animation动画结束后的回掉函数

74 阅读 0 评论 49 点赞

我是靠谱客的博主老实大雁，这篇文章主要介绍animation动画结束后的回掉函数，现在分享给大家，希望可以做个参考。

今天做项目的时候在进度条结束的时候需要跳转页面，然后我就用了animation自带的自定义回调函数

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
}
//
Chrome, Safari 和 Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
}
//
Chrome, Safari 和 Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>

具体用法来自菜鸟教程：http://www.runoob.com/jsref/event-animationiteration.html

复制代码

1
2
3
4
5
6
7
8
 const box=document.querySelector('.box');
let value=0;
const add=()=>{
requestAnimationFrame(add);
value+=5;
box.style.transform=`translateX(${value}px)`
}
requestAnimationFrame(add);

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function animate(start, end, time, callback) {
let startTime = performance.now() // 设置开始的时间戳
console.log(performance.now())
let differ = end - start // 拿到数值差值
// 创建每帧之前要执行的函数
function loop() {
raf = requestAnimationFrame(loop) // 下一阵调用每帧之前要执行的函数
const passTime = performance.now() - startTime // 获取当前时间和开始时间差
let per = passTime / time // 计算当前已过百分比
if (per >= 1) { // 判读如果已经执行
per = 1 // 设置为最后的状态
cancelAnimationFrame(raf) // 停掉动画
}
const pass = differ * per // 通过已过时间百分比*开始结束数值差得出当前的数值
callback(pass) // 调用回调函数，把数值传递进去
}
let raf = requestAnimationFrame(loop) // 下一阵调用每帧之前要执行的函数
}
let box = document.querySelector('.box');
animate(0, 400, 1000, value => {
box.style.transform = `translateX(${value}px)` // 将数值设置给 方块 的 css 属性 transform 属性可以控制元素在水平方向上的位移
})