顶级高性能动画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动画

文本插件 - 控制文本动画

属性插件 - 控制属性动画

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180301A062BV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券