JavaScript 균일 애니메이션 및 버퍼 애니메이션에 대한 자세한 설명
- 高洛峰원래의
- 2016-12-09 15:21:361509검색
웹 페이지의 애니메이션과 관련하여 CSS3에서는 이미 일부 속성을 사용하여 빠르게 생성할 수 있지만 때로는 브라우저 호환성을 위해 여전히 js를 사용하여 웹 페이지에서 애니메이션을 생성해야 합니다.
JS를 사용하여 애니메이션을 만드는 데 가장 중요한 기능은 setInterval 기능입니다. 여기서는 자세히 설명하지 않겠습니다. Baidu에서 직접 사용해도 됩니다. 이 글에서는 주로 애니메이션의 원리와 제작 과정의 핵심 사항에 대해 이야기합니다.
기존 규칙은 코드를 먼저 작성하는 것입니다. 직접 이해할 수 있으면 시간을 절약할 수 있습니다.
html 부분:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>move</title> <link rel="stylesheet" href="move1.css"> </head> <body> <input type="button" value="匀速移动" id="move1"> <input type="button" value="渐变移动" id="move2"> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <script type="text/javascript" src="move1.js"></script> </body> </html>
css 부분:
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-top: 10px;
}
js 부분:
/**
* Created by siri on 2016/9/10.
*/
window.onload=function () {
var btn1 = document.getElementById('move1');
var btn2 = document.getElementById('move2');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
btn1.onclick = function () {
animate1(box1,500);
}
btn2.onclick = function () {
animate2(box2,500);
}
//匀速动画
function animate1(ele,target){
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target>ele.offsetLeft?3:-3;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长，那么就不能再前进了
//因为步长有正有负，所有转换成绝对值来比较
console.log(val);
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
//缓动动画封装
function animate2(ele,target) {
clearInterval(ele.timer); //清楚历史定时器
ele.timer = setInterval(function () {
//获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
var step = (target-ele.offsetLeft)/10;
//对步长进行二次加工(大于0向上取整,小于0项下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理： 目标位置 = 当前位置 + 步长
console.log(step);
ele.style.left = ele.offsetLeft + step + "px";
//检测缓动动画有没有停止
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px"; //直接移动指定位置
clearInterval(ele.timer);
}
},30);
}
}
html과 css는 기본적으로 js 부분의 프레임워크입니다. 이에 대해서는 자세히 설명하지 않겠습니다. 전체 상황을 이해해야 한다는 것입니다. 여백과 패딩을 0으로 지우십시오. 그렇지 않으면 계산 중에 초기 마진과 패딩이 계산에 영향을 미쳐 논스톱 모션이 발생하는 경우가 있습니다.
코드의 JavaScript 부분에 대한 분석은 이미 소스 코드에 매우 자세하게 설명되어 있습니다.
균일한 움직임:
setInterval 함수를 통해 몇 밀리초마다 이동 거리를 제어한 후 지정된 위치에 도달하려고 할 때 스텝 길이(수 밀리초 간격으로 이동)와 이 시간과 목표 위치 사이의 거리입니다. 스텝 길이가 이 시간과 목표 위치 사이의 거리보다 클 경우, 바로 목표 위치에 위치하게 됩니다. 보폭과 총 거리가 정수배가 되지 않도록 하여 최종 도착 위치와 목표 위치의 차이가 발생합니다.
버퍼링 모션 :
버퍼링 모션의 기본 기능은 등속 모션과 동일하지만, 버퍼링 모션의 스텝 길이는 목표 위치와의 거리에 따라 결정되므로 우리는 단계 크기가 지속적으로 작아져 버퍼링 동작 효과를 얻습니다. 스텝 크기를 결정할 때 Math.ceil 및 Math.floor를 사용하여 소수점을 피하기 위해 스텝 값을 반올림합니다. 왜냐하면 소수점이 있으면 도달한 최종 위치는 목표 위치와 확실히 다르기 때문입니다.
참고: 각 이동 전에 타이머를 지우려면 clearInterval을 사용해야 합니다.