JavaScript动画主要利用定时器(setTimeout 和 setInterval)来实现。设计思路:通过循环改变元素的某个 CSS 样式属性,从而达到动态效果,如移动位置、缩放大小、渐隐渐现等。
移动动画
移动动画主要通过动态修改元素的坐标来实现。技术要点如下:
- 考虑元素的初始坐标、终点坐标,以及移动坐标等定位要素。
- 移动速度、频率等问题可以借助定时器来实现。但效果的模拟涉及算法问题,不同的算法,可能会设计出不同的移动效果,如匀速运动、加速和减速运动。
示例
下面示例演示了如何设计一个简单的元素移动效果。通过指向元素、移动的位置,以及移动的步数,可以设计按一定的速度把元素从当前位置移动到指定的位置。本示例引用前面介绍的 getB() 方法,该方法能够获取当前元素的绝对定位坐标值。
-
//简单的移动参数 //参数:e表示元素,x和y表示要移动的终点坐标,t表示元素移动的步数 function slide (e, x, y, t) { var t = t || 100; //初始化步数,步数越大,速度越慢,移动越逼真 var o = getB(e); //当前元素的绝对定位坐标值 var x0 = o.x; var y0 = o.y; var stepx = Math.round((x - x0) / t); //计算x轴每次移动的步长,由于像素点不可用小数,所以会存在一定的误差 var stepy = Math.round((y - y0) / t); //计算y轴每次移动的步长 var out = setInterval (function () { //设计定时器 var o = getB(e); //获取