文章目录
匀速动画
匀速动画案例描述
在浏览器中，某一个盒子以一定不变的速度向右移动直到停止
匀速动画案例图示
HTML+CSS
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
</body>
匀速动画JS代码
在定时器中用begin记录并改变每一次变化后的margin-left，通过margin-left的改变来实现盒子向右匀速移动。if 语句的作用是使盒子到达目的位置后停止下来
<script>
window.addEventListener('load',function() {
//获取需要的标签
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var interval, begin = 0, step = 50, target = 400;
//事件触发
btn.addEventListener('click',function() {
//清除定时器
clearInterval(interval);
//设置定时器
interval = setInterval(function(){
//改变起始值
begin += step;
//判断
if(begin >= target){
begin = target;
//清除定时器
clearInterval(interval);
};
box.style.marginLeft = begin + 'px';
},50); //一般设置为50-100
});
});
</script>
匀速动画JS代码改进----函数封装
上面的JS代码有一个不足之处就是step和target都是固定的，要改变step或target就要在原始代码中去改，就这一点来说是不推荐的。为了解决这一不足，自然而然地就想到封装。
改进代码与上面代码地不同之处就在于其用了一个封装函数，然后再window监听事件中调用这个函数。
<script>
window.addEventListener('load',function(){
cart('btn','box',50,300); //调用
});
//封装
function cart(btnId, boxId, step, target) {
//获取需要的标签
var btn = document.getElementById(btnId);
var box = document.getElementById(boxId);
var interval, begin = 0;
//事件触发
btn.addEventListener('click',function() {
//清除定时器
clearInterval(interval);
//设置定时器
interval = setInterval(function(){
//改变起始值
begin += step;
box.style.marginLeft = begin + 'px';
//判断
if(begin >= target){
begin = target;
//清除定时器
clearInterval(interval);
};
},1000);
});
}
</script>
缓动动画
缓动动画案例描述
在浏览器中，某一个盒子以一个从快到慢的速度向右移动直到停止
缓动动画案例图示
HTML+CSS
<style>
#box {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
</body>
缓动动画JS代码
缓动动画与匀速动画的不同就在于多用了一个公式：起始值 += (结束值 - 起始值) * 缓动系数 【缓动系数的值在（0，1），一般将缓动系数置为0.5以下是为了让动画移动更加细腻】
<script>
window.addEventListener ('load',function(){
//定义变量
var interval, begin = 0; target =300;
//开始动画
var btn = $('btn');
var box = $('box');
btn.addEventListener('click',function(){
//清除定时器
clearInterval(interval);
//设置定时器
interval = setInterval(function(){
//起始值 += (结束值 - 起始值) * 缓动系数 （0，1）为了让动画更加细腻，一般将缓动系数置为0.5以下
begin += (target - begin) * 0.2; //target - begin最终趋于0
//判断
if(Math.round(begin) >= target) {
begin = target;
clearInterval(interval);
}
box.style.marginLeft = begin + 'px';
},50); //一般设置为50-100
});
});
//封装获取id元素地函数
function $(id){
return typeof id === 'string' ? document.getElementById(id):null;
};
</script>
缓动动画JS代码改进----函数封装
分析同匀速动画
<script>
window.addEventListener('load',function(){
cartoon('btn','box',50,300); //调用
});
//封装
function cartoon(btnId, boxId, step, target) {
//开始动画
//起始值 += (结束值 - 起始值) * 缓动系数 （0，1）为了让动画更加细腻，一般将缓动系数置为0.5以下
var btn = $(btnId);
var box = $(boxId);
var interval, begin = 0;
btn.addEventListener('click',function(){
//清除定时器
clearInterval(interval);
//设置定时器
interval = setInterval(function(){
begin += (target - begin) * 0.2; //target - begin最终趋于0
//判断
if(Math.round(begin) >= target) {
begin = target;
clearInterval(interval);
}
box.style.marginLeft = begin + 'px';
},50); //一般设置为50-100
});
}
//封装获取id元素地函数
function $(id){
return typeof id === 'string' ? document.getElementById(id):null;
};
</script>
