JS实现动画效果（利用定时器）

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); //获取每次移动后的绝对定位坐标值
var x0 = o.x;
var y0 = o.y;
e.style["left"] = (x0 + stepx) + 'px';
e.style["top"] = (y0 + stepy) + 'px';
//如果距离终点距离小于步长，则停止循环并校正最终坐标位置
if (Math.abs(x - x0) <= Math.abs(stepx) || Math.abs(y - y0) <= Math.abs(stepy)) {
e.style["left"] = x + 'px'; //定位每次移动的位置
e.style["top"] = y + 'px'; //定位每次移动的位置
clearTimeout(out);
};
}, 2)
};

使用时应该定义元素绝对定位或相对定位的显示状态，否则移动无效。在网页动画设计中，一般都使用这种定位移动的方式来实现。

<style type="text/css">
.block { width:20px; height:20px; position:absolute; left:200px; top:200px; background-color:red; }
</style>
<div class="block" id="block1"></div>
<script>
temp1 = document.getElementById('block1');
slide (temp1, 400, 400, 60);
</script>

渐隐渐显

渐隐渐显效果主要通过动态修改元素的透明度来实现。

示例

下面示例实现一个简单的渐隐渐显动画效果。

//渐隐渐显动画显示函数
//参数：e表示元素，t表示速度，值越大速度越慢
//io表示显示方式，true表示渐显，false表示渐隐
function fade (e, t, io) {
var t = t || 100; //初始化渐隐渐显速度
if (io) { var i = 0; } //初始化渐隐渐显方式
else { var i = 100; }
var out = setInterval (function () { //设计定时器
setOpacity (e, i); //调用setOpacity()函数
if (io) { //根据渐隐或渐显方式决定执行效果
i ++;
if (i >= 100) clearTimeout(out);
} else {
i --;
if (i <= 0) clearTimeout(out);
}
}, t);
}

下面调用该函数：

<style type="text/css">
.block { width:200px; height:200px; background-color:red; }
</style>
<div class="block" id="block1"></div>
<script>
e = document.getElementById('block1');
fade(e, 50, true); //应用渐隐渐显动画效果
</script>

JS实现动画效果（利用定时器）相关推荐

分享112个JS特效动画效果，总有一款适合您
分享112个JS特效动画效果,总有一款适合您 112个JS特效动画效果下载链接:https://pan.baidu.com/s/1uC61pccye_oYqBnUugIuig?pwd=u21z 提取 ...
分享113个JS特效动画效果，总有一款适合您
分享113个JS特效动画效果,总有一款适合您 113个JS特效动画效果下载链接:https://pan.baidu.com/s/1k0fyflcyTKQM9pYEif2f9g?pwd=hpa8 提取 ...
原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
分享114个JS特效动画效果，总有一款适合您
分享114个JS特效动画效果,总有一款适合您 114个JS特效动画效果下载链接:https://pan.baidu.com/s/18_NR3eaxDddWSHqAbMYiuw?pwd=m25p 提取 ...
分享116个JS特效动画效果，总有一款适合您
分享116个JS特效动画效果,总有一款适合您 116个JS特效动画效果下载链接:https://pan.baidu.com/s/1E3s1PAcOw-8dCCnq9NUeUw?pwd=tjl2 提取 ...
分享92个JS特效动画效果，总有一款适合您
分享92个JS特效动画效果,总有一款适合您 92个JS特效动画效果下载链接:https://pan.baidu.com/s/1C_b7PM8E8WUpNMethPGtbQ?pwd=r3f8 提取码: ...
分享111个JS特效动画效果，总有一款适合您
分享111个JS特效动画效果,总有一款适合您 111个JS特效动画效果下载链接:https://pan.baidu.com/s/1s8mWkRlIZML2t5v1g1rlDA?pwd=pe5p 提取 ...
原生js制作动画效果
理论基础:需要获取元素的任意css属性值 getComputedStyle(element,null),支持谷歌,火狐 element.currentStyle,支持ie8 //获取任意css属性值( ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...

JS实现动画效果（利用定时器）

移动动画

渐隐渐显

JS实现动画效果（利用定时器）相关推荐

最新文章

热门文章