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

RancherLabs 发布于2019-08-22 15:38 / 2791人阅读

摘要：上一篇讲了动画定时器相关知识，这一篇介绍下缓动函数及流行的动画库。动画库动画库做的事基本就是一下四点，定时器，各种属性变量处理的封装，过程控制，缓动函数。

上一篇讲了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

GPU云服务器云服务器惯性缓动 java 动画库 js 暂停动画 js动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93610.html

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

摘要：上一篇讲了动画定时器相关知识，这一篇介绍下缓动函数及流行的动画库。动画库动画库做的事基本就是一下四点，定时器，各种属性变量处理的封装，过程控制，缓动函数。上一篇讲了JS动画定时器相关知识，这一篇介绍下缓动函数及流行的动画库。熟悉的图 showImg(https://segmentfault.com/img/bV6ACd?w=751&h=533); 实际使用 jquery anima...

ybak 2019-08-01 18:44 评论0 收藏0
GSAP - 专业的 Web 动画库

摘要：虽然没有视觉效果，但这就是基本的值动画。有专门的位置可以查询缓动函数。另外，不要期望在不支持的浏览器上做动画。是专业动画库，在大部分情况下，它也具备更好的动画性能。说到在网页里创建动画，你可能很快会想到jQuery的animate()方法，或者css3的animation和transition。现在，本文将介绍另一个web动画的可选方案，GSAP。 GSAP的全名是GreenSock...

MASAILA 2019-08-19 18:25 评论0 收藏0
一个精简的js动画库实现 (可自行扩展须要的内容)

摘要：一个精简的动画库实现项目地址由于项目须要做一些动画，并不想让整个项目引入太多的内容导致文件过大，所以为了满足要求写了一个精简的可扩展的动画库功能是简单模仿里面的函数用法这里的会返回到之间的数字再根据情况自己处理须要处理的动画改变属性到代码过一个精简的js动画库实现项目地址 animation.js 由于项目须要做一些动画，并不想让整个项目引入太多的内容导致文件过大，所以为了满足要求...

Benedict Evans 2019-08-21 17:34 评论0 收藏0
从0到1，开发一个动画库(1)

摘要：传送门从到，开发一个动画库如今市面上关于动画的开源库多得数不胜数，有关于甚至是渲染的，百花齐放，效果炫酷。当你看到的时候可能不大明白外界传入的到底是啥其实是一个数组，它的每一个元素都保存着独立动画的起始与结束两种状态。传送门：从0到1，开发一个动画库(2) 如今市面上关于动画的开源库多得数不胜数，有关于CSS、js甚至是canvas渲染的，百花齐放，效果炫酷。但你是否曾想过，自己亲手...

canopus4u 2019-08-22 13:56 评论0 收藏0