参考地址 TweenMax运动效果
(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>