阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript twenn动画原理

      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;//一步走多少;步长;
      

      —–===

      #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;//一步走多少;步长;
      目录
      目录