tween.js的动画效果

2021-07-13 20:08

阅读：371

YPE html>

标签：last 语法 http 分享 border ges ast bounce idt

实现动画可以用好多种的方法，今天来看看用tween.js插件是如何实现动画效果的。

tween.js的使用
　　1.下载
　　2.引入
　　3.使用tween.js语法


需要哪些条件来做运动
　1.初始位置
  2.目标点

缓动函数
　　1.linear 匀速
　　2.Quad 二次方缓动效果
　　3.Cubic 三次方缓动效果
　　4.Quart 四次方缓动效果
　　5.Quint 五次方缓动效果
　　6.Sine  正弦缓动效果
　　7.Expo  指数缓动效果
　　8.Circ  圆形缓动函数
　　9.Elastic 指数衰减正弦曲线缓动函数
　　10.Back  超过范围的三次方的缓动函数
　　11.Bounce 指数衰减的反弹曲线缓动函数
每种缓动函数都由三种效果:
　　1.easeIn  加速
　　2.easeOut 减速
　　3.easeInOut  先加速后减速
　　注:linear 只有一种效果匀速

Tween.缓动函数名.缓动效果名(t,b,c,d);

  t:当前已经运动的时间
  b:初始位置
  c:变化的值
  d:总步数  总时间

我们来举个例子吧！

 1 
 2 "en">
 3 4     "UTF-8">
 5     Document 6     18 
19 
20     ‘div1‘>
21     
22     23     47 
48

移动前：

技术分享

移动后：
再给大家分享一个开关门的动画效果。

  1 
  2 
  3 "en">
  4     "UTF-8">
  5       6      18 
 19 
 20 "div">
 21     
 22         
"img4.jpg" alt=""/>
 23         "li1">
 24         "li2">
 25     
 26 
 27 
 28 
 29 
 30  31 113