웹 전단 - js 오리지널 애니메이션

등속 애니메이션은 말 그대로 속도가 변하지 않는 애니메이션 데모 주소

下面的代码是修改一个盒子的 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)
}

느린 애니메이션, 즉 애니메이션의 속도가 느린 데모 주소

완동 애니메이션 공식( - ) / = 에서 이 속도는 매번 줄어든다.
간단한 부드러운 애니메이션 함수 라이브러리 봉인

* {
    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