(三)TweenMax运动效果
2018-09-30 本文已影响0人
我拥抱着我的未来
(1)本机知识点
- 运动效果
实例化对象.set() 立刻运动到指定地点，不用加时间
(2) 设置其他缓动效果
- Linear 线性
- Back 变化
- Bounce 弹跳变化
- Circ 圆形变化
- Cubic 立方体变化
- Elastic 橡皮圈变化
- Expo 爆炸变化
- Quad 变化
- Quint 变化
- Sine 正弦变化
(3) set 立刻运动 代码如下
<!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;
}
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 100px;
}
</style>
<div id="box"></div>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.set("#box", {
x: 400
})
})
})
</script>
</html>
(4)运动效果
<!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;
}
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 100px;
}
</style>
<div id="box"></div>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
// TweenMax.set("#box", {
// x: 400
// })
TweenMax.to("#box", 2, {
x: 400,
//ease: Back.easeIn,
//ease: Back.easeOut,
ease: Back.easeInOut,
})
})
})
</script>
</html>
