(1) 本节知识点
- 引入插件
--TweenMax.js 必须借助jquery
- 实例化对象
--new TimelineMax()
- 三大运动方法
--from
--to
-- fromTo
(2) 动画运动
-
(一)实例化对象.to(参数1，参数2,参数3,参数4表示延迟多少秒)
- to 也叫终点式运动
- 第一个参数必须定义元素
- 第二个参数表示时间单位秒
- 第三个参数是JSON表示最后的终点
- 第四个参数表示延迟的时间可以是"5"也可以是"-=2"
<!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.to("#box", 2, {
left: 300,
},"2") //延迟2秒执行
})
})
</script>
</html>
-
(二)实例化对象.from(参数1，参数2,参数3)
- from 也叫起点式运动
- 第一个参数必须定义元素
- 第二个参数表示时间单位秒
- 第三个参数是JSON表示起点。那么你在css里面定义的就是最后的终点
<!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.from("#box", 2, {
left: 300,
})
})
})
</script>
</html>
-
(二)实例化对象.fromTo(参数1，参数2,参数3,参数4)
- fromTo 也叫起终式运动
- 第一个参数必须定义元素
- 第二个参数表示时间单位秒
- 第三个参数是JSON表示起点。
- 第四个参数是JSON表示终点
<!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.fromTo("#box", 2, {
left: 100,
}, {
left: 400
})
})
})
</script>
</html>
