- 匀速动画, 顾名思义就是速度不变的动画Demo 地址
<button id="btn">开始</button>
<div class="box" id="box"></div>
下面的代码是修改一个盒子的 left 相当于修改这个盒子的位置, 所以盒子需要进行绝对定位
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 开始位置
var begin = 0;
// 结束位置
var end = 600;
// 速度
var speed = 5;
// 定时器
var timer = null;
btn.onclick = function() {
clearInterval(timer);
timer = setInterval(function(){
begin += speed;
obj.style.left = begin + 'px';
if(begin >= target) {
box.style.left = target + 'px';
clearInterval(timer);
}
}, 50)
}
改进后的代码, 主要是把开始位置使用了offsetLeft来改进
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var timer = null;
var target = 600;
var speed = 5;
btn.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
begin = box.offsetLeft;
begin += speed ;
box.style.left = begin + 'px'
if(begin >= target) {
box.style.left = target+'px';
clearInterval(timer);
}
},50)
}
封装匀速动画函数
// 匀速动画函数
// obj: 要进行运动的 dom 对象
// target : 运动到的目标位置
// speed : 运动速度
function constant(obj,target,speed) {
clearInterval(obj.timer);
var myspeed = target > obj.offsetLeft ? speed : -speed;
obj.timer = setInterval(function(){
obj.style.left = obj.offsetLeft + myspeed + 'px';
if (Math.abs(obj.offsetLeft - target) < speed) {
obj.style.left = target + 'px';
clearInterval(obj.timer);
}
},20)
}
- 缓动动画, 就是动画的速度是由快变慢 Demo 地址
缓动动画公式(目标位置 - 开始位置) / 系数 = 速度 这里这个速度是每次减小的.
封装一个简单的缓动动画的函数库
<button id="btn">开始</button>
<button id="goback">回去</button>
<div class="box" id="box"></div>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: #0094ff;
}
window.onload = function() {
var btn = document.getElementById('btn');
var back = document.getElementById('goback');
var box = document.getElementById('box');
btn.onclick = function() {
move(box, 400);
}
back.onclick = function() {
move(box, 0)
}
function move(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var begin = obj.offsetLeft;
var speed = (target - begin) * 0.2;
speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
obj.style.left = begin + speed + 'px';
if (target == begin) {
clearInterval(obj.timer);
}
}, 50)
}
}
这里就说下这两种简单的动画实现, 其实还有多值动画(就是同时改变多个属性, 如改变位置和宽高) , 这里就先不介绍了, 期待下一篇吧.
有问题@me
