关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。
使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。
老规矩，先上代码，能直接看懂的可以节省时间。
html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>move</title> <link rel="stylesheet" href="move1.css"> </head> <body> <input type="button" value="匀速移动" id="move1"> <input type="button" value="渐变移动" id="move2"> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <script type="text/javascript" src="move1.js"></script> </body> </html>
css部分：
*{ margin: 0px; padding: 0px; } .box{ width: 100px; height: 100px; background-color: green; position: relative; margin-top: 10px; } js部分：
/** * Created by siri on 2016/9/10. */ window.onload=function () { var btn1 = document.getElementById('move1'); var btn2 = document.getElementById('move2'); var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); btn1.onclick = function () { animate1(box1,500); } btn2.onclick = function () { animate2(box2,500); } //匀速动画 function animate1(ele,target){ //要用定时器，先清除定时器 //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突 //而定时器本身讲成为盒子的一个属性 clearInterval(ele.timer); //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负 //目标值如果大于当前值取正，目标值如果小于当前值取负 var speed = target>ele.offsetLeft?3:-3; ele.timer = setInterval(function () { //在执行之前就获取当前值和目标值之差 var val = target - ele.offsetLeft; ele.style.left = ele.offsetLeft + speed + "px"; //目标值和当前值只差如果小于步长，那么就不能再前进了 //因为步长有正有负，所有转换成绝对值来比较 console.log(val); if(Math.abs(val)<=Math.abs(speed)){ ele.style.left = target + "px"; clearInterval(ele.timer); } },30); } //缓动动画封装 function animate2(ele,target) { clearInterval(ele.timer); //清楚历史定时器 ele.timer = setInterval(function () { //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。 var step = (target-ele.offsetLeft)/10; //对步长进行二次加工(大于0向上取整,小于0项下取整) step = step>0?Math.ceil(step):Math.floor(step); //动画原理： 目标位置 = 当前位置 + 步长 console.log(step); ele.style.left = ele.offsetLeft + step + "px"; //检测缓动动画有没有停止 if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){ ele.style.left = target + "px"; //直接移动指定位置 clearInterval(ele.timer); } },30); } }
新闻热点
疑难解答
图片精选
