搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > iG客吧 > 顶级高性能动画Javascript类库KUTE.js实战入门介绍

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

iG客吧 2018-03-01


基于javascript的动画类库其实有挺多滴, 接下来将会给大家带来系列教程,在这套教程中我们将介绍一款新的javascript动画类库 - KUTE.js, 和其它动画类库不同的地方, 在于KUTE.js拥有非常高效的动画性能, 并且优化了内存, 模块化的代码管理~


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


大家访问KUTE.js类库的首页可以看到一个非常赞的动画效果演示,如下:


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


可以看到以上动画非常流畅,并且没有任何的卡顿, 整个动画效果比较复杂多样, 包含了, easing的变化,多个页面元素的轮巡式样动画, 相对还是很复杂滴


类库介绍

KUTE.js这个类库包含了以下几个部分:

  • 核心引擎

  • CSS插件

  • SVG插件

  • TEXT插件

  • 属性插件


支持单独的JS类库,也支持jQuery插件形式 

单独Javascript类库:

tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo:

jQuery插件:

var tween = $('selector').fromTo({top: 20}, {top: 100}, {delay: 500});


支持动画效果

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

  • 文本插件 - 控制文本动画

  • 属性插件 - 控制属性动画



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


动画效果请点击下方阅读原文

通过相应链接进行观看^_^


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

iG客吧

网站:igeekbar.com


高逼格分享社区

长按二维码关注

更多精彩内容,尽在阅读原文~

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《顶级高性能动画Javascript类库KUTE.js实战入门介绍》的版权归原作者「iG客吧」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读