Skip to content

Latest commit

 

History

History
34 lines (25 loc) · 1.22 KB

README.md

File metadata and controls

34 lines (25 loc) · 1.22 KB
Raw

#tween动画

动画中的几部分:

  1. 开始位置、结束位置、总距离；（总距离=结束位置-开始位置）

  2. 总运动时间、定时器间隔时间 、步长 ；（步长=(总距离/总运动时间)*定时器间隔时间）

  3. 运动的方式:匀速、减速、加速、变速

动画需要的参数

  • 起始位置：begin；

  • 终点位置：target；

  • 一共需要移动的距离：change

  • 当前走的时间：times

  • 所需的总时间：duration

  • 单步间隔时间：interval

    直线的公式

  • 当前的位置=起始位置+总距离*（当前走的步数/所需要走的步数）

  • 当前的位置=起始位置+总距离*（当前走的时间/所需要走的时间）

  • 当前的位置=begin+change*(times/duration)

interval:运动是一步一步走的，也就是单步时间，可以通过控制单步的时间，来控制运动的效果；时间要求的短，步子就要迈大点，时间要求的长，就走小碎步

 /*动画的初始条件*/

var begin=oDiv.offsetLeft;//起点
var target=600;
var change=target-begin;//总的移动距离=目的地-其实的位置;
var times=0;
var duration=1000;//总的时间；
var nInterval=13;//一步走多少；步长；