动画的种类
动画原理 = 盒子位置 + 步长。
1. 闪动。 (瞬间到达)
2. 匀速。 (每次走一样距离)
3. 缓动。 (开始特快越走越慢,步长越来越小. 类似刹车,电梯停止,压缩弹簧…)
动画的原理:盒子的位置 = 盒子本身所在的位置 + 步长
- <style>
- * { padding: 0; margin: 0; } div { width: 100px; height: 100px; position:
- absolute; left: 5px; background-color: pink; } .box2 { background-color:
- yellowgreen; top: 140px; }
- </style>
- <body>
- <button>
- 到200位置
- </button>
- <button>
- 到400位置
- </button>
- <div>
- </div>
- <div class="box2">
- </div>
- <script>
- //需求:点击按钮,盒子移动var btnArr = document.getElementsByTagName("button");var box = document.getElementsByTagName("div")[0];var box2 = document.getElementsByTagName("div")[1];btnArr[0].onclick = function () { animate(box, 200); animate(box2, 200);}btnArr[1].onclick = function () { animate(box, 400); animate(box2, 400);}//匀速动画封装function animate(ele, target) { //要用定时器,先清定时器。(把老定时器清掉,这样不会影响新的定时器) clearInterval(ele.timer); ele.timer = setInterval(function () { //判断:如果目标位置大于当前位置步长是10;小于当前位置是-10; var step = target > ele.offsetLeft ? 10 : -10; //leader获取当前位置; var leader = ele.offsetLeft; ele.style.left = ele.offsetLeft + step + "px"; //如果目标位置和当前位置只差小于步长,就可以清除定时器了。 if (Math.abs(target - leader) < Math.abs(step)) { //直接到达指定位置 ele.style.left = target + "px"; clearInterval(ele.timer); } }, 30);}
- </script>
- </body>
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: