本文目录

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了