JamieMaple / animated

向更优雅更丝滑的前端动画迈进!!!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

animated

向更优雅更丝滑的前端动画迈进!!!

初期探索

以前写动画很多时候都理所当当然的认为 css3 的动画比 js 控制的动画性能更高,理所当然的认为。。。当然对于简单动画而言,简单的 css 来控制确实非常简单,但是如果动画需求一旦比较复杂,则变得非常难以控制。css3 控制动画的确有很多优点,比如可以让浏览器去控制动画帧等等,但是对于像 IE 那种反人类的浏览器而言,css3 兼容性的确堪忧。

问题出现

当出现不仅需要像 animate.css 的那种效果,同时还需要某种顺序来控制动画的时候,css3 真的非常难以控制了。以前自己写动画的时候,为了强行结合css3实现队列不得不用到监听 animationend 事件,有的时候还不得不配合一下 promise 以实现更好的动画队列管理。

第三方库

对于这种队列,zepto/jquery 等早期框架提供过一种很好的思路,基于一种队列来控制动画。除此之外,js 利用良好的动画算法等完全可以做到甚至优于 css3 动画,所以以前很多优秀的第三方库出现了,形如 Tween.js ,mojs,popmotion 甚至 RxJS 都能很好的管理动画队列。

目的

该 repo 的目的不为别的,祭奠很长时间以来片面智障的自己,以鼓励自己书写更加优雅更佳丝滑的动画库的 JS 代码甚至可以自己造轮子。

About

向更优雅更丝滑的前端动画迈进!!!


Languages

Language:JavaScript 60.7%Language:HTML 39.3%