基于javascript的动画类库其实有挺多滴, 接下来将会给大家带来系列教程,在这套教程中我们将介绍一款新的javascript动画类库 - KUTE.js, 和其它动画类库不同的地方, 在于KUTE.js拥有非常高效的动画性能, 并且优化了内存, 模块化的代码管理~
大家访问KUTE.js类库的首页可以看到一个非常赞的动画效果演示,如下:
可以看到以上动画非常流畅,并且没有任何的卡顿, 整个动画效果比较复杂多样, 包含了, easing的变化,多个页面元素的轮巡式样动画, 相对还是很复杂滴
类库介绍
KUTE.js这个类库包含了以下几个部分:
核心引擎
CSS插件
SVG插件
TEXT插件
属性插件
支持单独的JS类库,也支持jQuery插件形式
单独Javascript类库:
tween = KUTE.fromTo('selector', , , , , );
支持动画效果
KUTE.js几乎支持所有的动画标准中的动画效果,包括:
2D效果
translate
rotate
skewX
skewY
scale
3D效果
translateX
translateY
translateZ
rotateX
rotateY
rotateZ
perspective
perspective-origin
基本核心组件API
KUTE.js 包含了一些API方法, 分别如下:
Tween对象方法
.to() - 执行动画效果
.fromTo() - 执行动画效果A转到动画效果B
.allTo() - 所有元素执行动画效果
.allFromTo() - 所有元素执行动画效果A转到动画效果
Tween控制方法
.start() - 开始动画效果
.stop() - 终止动画效果
pause() - 暂停动画效果
play() - 播放动画效果
chain() - 链接更多其它动画效果
Tween对象参数
duration
delay
easing
yoyo
offset
API在线演示
http://www.igeekbar.com/igclass/code/7f776069-833f-431f-afe7-ae486d9a9112.htm
以上演示中,展示了如何使用allTo, allFromTo,chain等API方法生成复杂流畅的动画效果
相关插件
SVG插件 - 控制SVG动画
CSS插件 - 控制css动画
文本插件 - 控制文本动画
属性插件 - 控制属性动画
如果你期待这套课程,更多相关的课程介绍和说明, 请持续关注我们的公众号及网站哦^_^~
领取专属 10元无门槛券
私享最新 技术干货