One, the essence of JS animation
JavaScript animation, in essence, is to make tags move. To make the label move, its essence is to change the label properties, such as height and width, left margin, top margin, transparency, etc.
The essence of JavaScript animation is to continuously change a certain attribute of the label at very short intervals (milliseconds) .
Generally , you can get the animation effect by using the timer .
Timer, you can choose setInterval, setTimeout, and requestAnimationFrame.
Take controlling the movement of div.box as an example.
setInterval
let aniFun= function(){
// 动画代码
};
let myset = setInterval(aniFun,30);
let box = document.getElementById("box");
let dis = 0;
let speed = 10 ;
let aniFun= function(){
// 动画代码
dis += speed;
box.style.transform=`translateX(${
dis}px)`;
};
let myset2 = setInterval(aniFun,30);
setTimeout
let aniFun= function(){
// 动画代码
myset2 = setTimeout(aniFun,30);
};
let myset2 = setTimeout(aniFun,30);
let box = document.getElementById("box");
let dis = 0;
let speed = 10 ;
let aniFun= function(){
// 动画代码
dis += speed;
box.style.transform=`translateX(${
dis}px)`;
myset2 = setTimeout(aniFun,30);
};
let myset2 = setTimeout(aniFun,30);
requestAnimationFrame
The usage is very similar to setTimeout. You need to call back itself again at the end of the animation function.
let aniFun= function(){
// 动画代码
req = requestAnimationFrame(aniFun);
};
let req = requestAnimationFrame(aniFun);
let box = document.getElementById("box");
let dis = 0;
let speed = 10 ;
let aniFun= function(){
// 动画代码
dis += speed;
box.style.transform=`translateX(${
dis}px)`;
req = requestAnimationFrame(aniFun);
};
let req = requestAnimationFrame(aniFun);
More recommended requestAnimationFrame.
requestAnimationFrameIt is the system that determines the timing of execution of the callback function. If the screen refresh rate is 60Hz, then the callback function will be executed every 16.7ms (1000/60). If the refresh rate is 75Hz, then this time interval becomes 1000/75=13.3ms. In other words, the pace of requestAnimationFrame follows the refresh pace of the system.- When the page loses focus (switch to another page),
requestAnimationFramethe animation will pause to resolve system resources.
Second, use events to trigger animation
Click the button to activate div.box.
<div id="box" class="box"></div>
<button id="btn">点击开始运动</button>
1. Basic operation
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let dis = 0;
let speed = 30;
let req ;
let BoxGo = function(){
dis += speed ;
box.style.transform=`translateX(${
dis}px)`;
req = requestAnimationFrame(BoxGo);
};
btn.addEventListener("click",function () {
BoxGo();
});
There are two problems with the above code:
-
If you click the button continuously, the box will continue to accelerate continuously.
Solution : After clicking the button, stop the previous animation before starting a new animation.
-
The box will continue to move to the right without stopping.
The solution is as follows.
2. Set the animation distance
The animation stops when the distance is exceeded.
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let dis = 0;
let speed = 30 ;
let target = 500 ;
let BoxGo = function(){
dis += speed ;
// 限制运动距离
if( dis >= target){
dis = target ;
cancelAnimationFrame(aniFun);
}else{
console.info(dis);
box.style.transform=`translateX(${
dis}px)`;
aniFun = requestAnimationFrame(BoxGo);
}
};
btn.addEventListener("click",function () {
// 防止重复叠加动画：开始新的动画前，取消之前的动画。
cancelAnimationFrame(aniFun);
BoxGo();
});
3. Set the animation time
Set the animation time and stop the animation when the time is exceeded.
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let dis = 0;
let speed = 30;
let startTime = 0;
let aniTime = 500 ; // 动画时间为500毫秒。
let BoxGo = function(){
let time = new Date();
let p = time - startTime ;
dis += speed ;
// 限制运动时间 。到了 0.5s 就停止
console.info( p );
if( p >= aniTime ){
cancelAnimationFrame(aniFun);
}else{
box.style.transform=`translateX(${
dis}px)`;
aniFun = requestAnimationFrame(BoxGo);
}
};
btn.addEventListener("click",function () {
// 防止重复叠加动画：开始新的动画前，取消之前的动画。
cancelAnimationFrame(aniFun);
startTime = new Date();
BoxGo();
});
4. Set the animation time and distance
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let aniFun ;
let speed = 30;
let aniTime = 500 ; // 运动时间 500 毫秒
let aniDis = 1500 ; // 运动距离 500px
let startTime = 0;
let BoxGo = function(){
let time = new Date();
let pastTime = time - startTime ; // 已经运动的时间点
console.info(pastTime);
let past = Math.min(pastTime/aniTime,1) ; // 0-1
// 限制运动时间 。到了 0.5s 就停止
if( pastTime >= aniTime ){
pastTime = 500 ;
cancelAnimationFrame(aniFun);
}else{
box.style.transform=`translateX(${
past*aniDis}px)`;
aniFun = requestAnimationFrame(BoxGo);
}
};
btn.addEventListener("click",function () {
// 防止重复叠加动画：开始新的动画前，取消之前的动画。
cancelAnimationFrame(aniFun);
startTime = new Date();
BoxGo();
});
Three, application
The picture fades in and out.
<img src="images/pic1.jpg" alt="" id="pic">
let pic = document.getElementById("pic");
let aniTime = 500; // 动画时间
let startTime = new Date();
let aniFun = function(){
let pastTime = new Date() - startTime ;
let past = Math.min( pastTime / aniTime ,1 ) ;
pic.style.opacity = past ;
if( past >= 1){
cancelAnimationFrame(req);
}else{
req = requestAnimationFrame(aniFun);
}
};
let req = requestAnimationFrame(aniFun);
Encapsulated into a function:
let fadeAni = function({
duration=500,
targetV=1,
startV=0,
element
}={
}){
let aniTime = duration; // 动画时间
let startTime = new Date();
let aniFun = function(){
let pastTime = new Date() - startTime ;
let past = Math.min( pastTime / aniTime ,1 ) ;
element.style.opacity = (targetV- startV)* past + startV ;
if( past >= 1){
cancelAnimationFrame(req);
}else{
req = requestAnimationFrame(aniFun);
}
};
let req = requestAnimationFrame(aniFun);
};
let pic = document.getElementById("pic");
// 淡入
fadeAni({
duration:1000,
startV:0,
targetV:1,
element:pic
});
let pic = document.getElementById("pic");
// 淡出
fadeAni({
duration:1000,
startV:1,
targetV:0,
element:pic
});