web前端-js原生动画

• 匀速动画, 顾名思义就是速度不变的动画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