JS动画之缓动函数分析及动画库

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS动画之缓动函数分析及动画库相关的知识,希望对你有一定的参考价值。

上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库。

熟悉的图

技术图片

实际使用

jquery animate()+jquery.easing插件的使用:

$(selector).animate(styles,speed,easing,callback)

原生js使用:
张鑫旭同学的文章

缓动函数知识

什么是缓动函数?我的理解是动画参数与数学公式结合的函数。

各流行库缓动函数对比,以easeInQuad为例,如图:

Tween.js

技术图片

jQuery.easing

技术图片

GSAP

技术图片

CreateJS

技术图片

Kute.js

  easingFn.easingQuadraticIn = function (t) { return t*t; };

分析对比结果

基本数学公式是一样的,都是2次方;
缓动函数是独立的,与平台载体无关;
缓动函数反应的是动画进程与数值变化量的对应关系,具体分析如下:

GSAP Ease在线示例,动画进程每增加一格,数值变化量是增加量是越来越大的,效果就是由慢到快。
技术图片

与定时器无关,具体演变代码分析如下:
左侧演示的是,由于算法二次方,进程每次等量增加1/5,但是变化量却越来越大;右侧演示的是,虽然定时器改变了(间隔减小一倍,由“滴答”执行五次改成十次),但是变化量的趋势是一样的,相同的进程增量,对应的变化量也是相同。
技术图片

动画库

动画库做的事基本就是一下四点:1,定时器;2,各种属性变量处理的封装;3,过程控制;4,缓动函数。

实际运用中还是推荐大家用动画库,不满足业务需求的可以自己整合,当然学习的时候可以找个简单的读下源码,试着自己写下核心功能,深入理解动画库的本质,入门我推荐Kute.js

动画库推荐(各自优劣势及区别下次再详述)

jquery animate(插件jquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js











以上是关于JS动画之缓动函数分析及动画库的主要内容,如果未能解决你的问题,请参考以下文章

requestAnimationFrame之缓动的应用

js缓动动画原理

JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数

js缓动动画原理

window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

tween.js的动画效果