本节知识点
- 多对象运动
- staggerTo
-- 高级技巧cycle的使用
-- 贝赛尔曲线 - staggerFrom
- staggerTo
- 回调函数
- onStart
- onUpdate
- onComplete
- 3D效果
- 3D效果的产生方式
(1) TweenMax transformPerspective
(2) CSS Perspective - 变换原点
transformOrigin
- 3D效果的产生方式
(一) 链式运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
</style>
<div id="box"></div>
<div id="box2"></div>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.to("#box", 1, {
x: 400,
}).to("#box2", 1, {
x: 400,
}, "-=1")
//第4个参数表示延迟多少秒执行
// TweenMax.to("#box2", 1, {
// x: 400,
// },3)
})
})
</script>
</html>
(二) 多个元素链式运动
staggerTo staggerFrom
(1)多个元素运动到共同的位置
设置延迟时间了那表示每个DIV延迟执行的时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
p {
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
</style>
<div id="divall">
<p id="box"></p>
<p id="box2"></p>
<p id="box3"></p>
</div>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.staggerTo("#divall p", 1, {
x: 400,
}, 1)
//第4个参数表示延迟多少秒执行
// TweenMax.to("#box2", 1, {
// x: 400,
// },3)
})
})
</script>
</html>
(2)多个元素运动到不同的位置
cycle属性一个对象。里面的属性就是数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
p {
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
</style>
<div id="divall">
<p id="box"></p>
<p id="box2"></p>
<p id="box3"></p>
</div>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.staggerTo("#divall p", 1, {
cycle: {
x: [100, 400, 500]
}
}, 1)
//第4个参数表示延迟多少秒执行
// TweenMax.to("#box2", 1, {
// x: 400,
// },3)
})
})
</script>
</html>
也可以利用回调函数
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.staggerTo("#divall p", 1, {
cycle: {
x: function(i) {
return i * 100
}
}
}, 1)
//第4个参数表示延迟多少秒执行
// TweenMax.to("#box2", 1, {
// x: 400,
// },3)
})
})
</script>
(三) 回调函数
- onStart
- onUpdate
- onComplete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
p {
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
</style>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.staggerTo("p", 1, {
x: 400,
onStart: function() {
console.log("开始运动")
},
onUpdate: function() {
console.log("运动中开始")
},
onComplete: function(i) {
console.log(i);
console.log("运动结束了");
console.log(this.target); //谁完成就是谁
this.target.style.background = "green"
}
}, 1)
})
})
</script>
</html>
(四) 3D效果
set ,transformPerspective,transformOrigin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
p {
width: 100px;
height: 100px;
background: red;
margin-bottom: 30px;
}
</style>
<p></p>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.set("p", {
transformPerspective: 800,
transformOrigin: "right"
})
TweenMax.staggerTo("p", 1, {
rotationY: 145,
}, 1)
})
})
</script>
</html>
