顶级高性能动画Javascript类库KUTE.js实战入门介绍

基于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动画

文本插件 - 控制文本动画

属性插件 - 控制属性动画

如果你期待这套课程，更多相关的课程介绍和说明， 请持续关注我们的公众号及网站哦^_^~