高级网页动画制作

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhangxin09/article/details/90240159

现今浏览器如此地强大,以至不同形式的网页形式缤纷而至,例如动画就是必不可少的一环。早期有全站 Flash 技术制成的,现今则是多种技术混合在内,包括 CSS3+Canvas + SVG,甚至利用 AE(Adobe After Effects)强大的滤镜所做的动画都可以搬到上来。关于 AE 技术的转换,笔者早期学习 Web 时就了解过,当时是 AE 转换为 Flash 动画的,体积比较大的说。

lottie.js

最近接触一个日本的网站 https://pogg-sweetpotatopie.com/, 动画效果很好,研究一下源码发现居然都是些新技术,典型如 Vue 负责制作组件,大量使用 CSS3,还有 SVG 矢量图的动画,不但如此,还有 lottie.js(http://airbnb.io/lottie/#/) 负责将 AE 文件导出 json 文件,然后使用 lottie.js 进行动画的控制。

相关 lottie.js 链接:
https://imweb.io/topic/5b23a745d4c96b9b1b4c4efc
https://segmentfault.com/a/1190000010935368
https://www.jianshu.com/p/c440eb16c685
http://ife.baidu.com/note/detail/id/602
https://www.jianshu.com/p/b207db1581a1
http://www.bootstrapmb.com/item/3006
https://www.jb51.net/jiaoben/625453.html
https://www.jb51.net/jiaoben/666463.html
https://wow.techbrood.com/fiddle/41062 (制作菜单)

GSAP

GSAP 全称是 GreenSock Animation Platform,是一个 JS 动画框架。https://greensock.com/get-started-js

GSAP有两个版本,一个为 ActionScript 版本,已经在 Flash 平台上运行多年,是一个“轻量级”、“高效率”、强大的2D动画引擎。学AS的人,没有一个说是不知道、没使用过 GSAP 的。

GSAP JS 顾名思义是指 GSAP 的 js 版本,GSAP JS 是 GreenSock 公司新出的一个 2D 动画引擎,可以说是 AS 版本的移植版,虽然功能还不够AS版本的完善,但是一样是非常强大、高效、好用的,据说它的运行速度是 jQuery 的20倍。

注意有效插件不是免费的!

并不是完全开源的,它的开源类似于国内的开源程序那样,有点儿像伪开源:在免费/收费的项目中使用是不用付费的,但是,对于多用户的项目,你就需要商业许可证了:每年150美刀或者永久性的费用750美刀,不便宜

使用 GSAP

TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js4个文件就是GSAP的一般引用库文件,不过,这几个文件还有一些重叠和包含的关系:
在这里插入图片描述
https://blog.csdn.net/weixin_39939012/article/details/80833073

  • TweenLite:这是 GSAP 动画平台的核心部分,使用它可以用来实现大部分的动画效果,适合来实现一些元素的简单动画效果。
  • TimelineLite:一个强大的、轻量级的序列工具,它就如一个存放补间动画的容器,可以很容易的整体控制补间动画,且精确管理补间动画彼此之间的时间关系。比如动画的各种状态,Pause,reverse,restart,speed up,slow down,seek time,add labels等。它适合来实现一些复杂的动画效果。
  • TimelineMax:扩展 TimelineLite,提供完全相同的功能再加上有用的(但非必需)功能,如 repeat,repeatDelay,yoyo,currentLabel() 等。TimelineMax 的目标是成为最终的全功能工具,而不是轻量级的。
  • TweenMax:可以完成 TimelineLite 做的每一件事,并附加非必要的功能,如 repeat,yoyo,repeatDelay(重复延迟)等。它也包括许多常见的插件,如 CSSPlugin,这样您就不需自行载入多个文件。侧重于全功能的,而不是轻量级的。

https://www.tweenmax.com.cn/(中文网)
http://www.topfe.cn/javascript/524.html
https://www.cnblogs.com/tujia/p/3217436.html
http://www.xgllseo.com/?cat=38
https://yq.aliyun.com/articles/682532
https://juejin.im/post/58d4f52544d9040068659edd
https://linshuizhaoying.gitbooks.io/gsap-/content/index.html (不错的文档)
https://techbrood.com/?q=gsap (资源库)
http://www.jq22.com/code1889
https://www.jb51.net/jiaoben/665608.html
https://www.jb51.net/jiaoben/672111.html

展开阅读全文

没有更多推荐了,返回首页