TweenMax动画引擎
TweenMax适用于移动端和现代互联网的超高性能专业级动画插件，可以实现复杂的动画效果，比如贝赛尔动画、暂停/继续能力，简便的连续动画、16进制颜色动画等更多的内容。TweenMax中文官网地址：https://www.tweenmax.com.cn/
由于TweenMax并不是学习Vue的重点，只是在开发项目时做复杂的动画会用到，所以这里只教一些常用的知识点，要学习更多的内容可以去TweenMax官网学习。
# 1.TweenMax.to()
此方法用于创建一个从当前属性到指定目标属性的TweenMax动画对象。
let APPComponent={
template:`
<div>
<div class="box" ref="box">hello</div>
</div>
`,
mounted(){
TweenMax.to(this.$refs["box"], 3, {
x: 500
});
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
注意不需要实例化TweenMax，直接TweenMax.to()调用方法即可，也可以对多个目标进行动画，代码如下：
let APPComponent={
template:`
<div>
<div class="box" ref="box">hello</div>
<div class="box2" ref="box2">hello</div>
</div>
`,
mounted(){
TweenMax.to([this.$refs["box"],this.$refs["box2"]], 3, {
x: 300
});
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2.TweenMax.from()
通过设置动画起始点来初始化一个TweenMax，相当于动画从设置点开始。
let APPComponent={
template:`
<div>
<div class="box" ref="box">hello</div>
<div class="box2" ref="box2">hello</div>
</div>
`,
mounted(){
TweenMax.from([this.$refs["box"],this.$refs["box2"]], 3, {
x: 300
});
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 3.TweenMax.fromTo()
通过设置动画起始点和结束点来初始化一个TweenMax，相当于动画从设置点到第二个设置点。
let APPComponent={
template:`
<div>
<div class="box" ref="box">hello</div>
<div class="box2" ref="box2">hello</div>
</div>
`,
mounted(){
//实例化TweenMax
TweenMax.fromTo([this.$refs["box"],this.$refs["box2"]], 3, {x:10,y:10},{x:100,y:100});
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 4.TweenMax.staggerTo()
staggerTo方法为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组。需要设置每个动画的开始间隔。如不设置则为零，同时开始动画
let APPComponent={
template:`
<div>
<div class="box green"></div>
<div class="box grey"></div>
<div class="box orange"></div>
<div class="box green"></div>
<div class="box grey"></div>
<div class="box orange"></div>
<div class="box green"></div>
<div class="box grey"></div>
<div class="box orange"></div>
</div>
`,
mounted(){
TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5,function(val1,val2){
alert("动画执行完成,"+val1+","+val2+"");
},["360","100"]);
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 5.TweenMax.staggerFrom()
和TweenMax.staggerTo()使用方式一样，只不过动画执行顺序相反。
# 6.TweenMax.staggerFromTo()
通过设定序列动画的起点和终点来初始化一个TweenMax，和fromTo()方法类似。
TweenMax.staggerFromTo(".box",1,{rotation:0, x:0,y:0},{rotation:180, x:100,y:100}, 0.5,function(val1,val2){
alert("动画执行完成,"+val1+","+val2+"");
},["180","100"]);
1
2
3
4
5
2
3
4
5
# 实现一个加入购物车抛物线动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.circle{
border: solid 1px red;
background-color: red;
border-radius: 50%;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点我加入购物车" @click=flag=!flag>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<p class="circle" v-show="flag"> </p>
</transition>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
flag: false
},
methods: {
beforeEnter(el){
el.style.transform = "translate(0, 0)"
},
enter(el, done){
// el.offsetWidth 强制html渲染动画
// el.offsetWidth 这句话如何不写就不会有动画效果直接渲染的
el.offsetWidth;
el.style.transform = "translate(150px, 250px)";
el.style.transition = "all 2s ease";
console.log(done);
done()
},
afterEnter(el){
this.flag = !this.flag
},
},
created: function () {
},
mounted: function () {
}
})
</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
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
上次更新: 2022/05/30 12:17:36
