（转）TweenMax动画库学习（四）

上一节我们主要聊了TweenMax动画库中的seek()完成指定的动画（无过渡）、time() 动画已执行的时间、clear()：清除所有动画等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。

TweenMax动画库的官方网址: http://greensock.com/timelinemax

下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：

1、staggerTo()：添加动画

参数说明：

1. 元素选择器或对象
2. 持续时间
3. 对象变化的属性->值
4. 【可选】动画延迟发生时间可写数字，“-=0.5”，“+=0.5“

页面布局

<script src="./../js/jquery-2.1.4.min.js"></script>
<script src="./../js/TweenMax.js"></script>
<style>html,body{margin: 0;padding: 0;}.box{width:100px;height:100px;background: #8D121A;margin:1px 0;}
</style>

 1 <body>2 <div class="box"></div>3 <div class="box"></div>4 <div class="box"></div>5 <div class="box"></div>6 <div class="box"></div>7 <div class="box"></div>8 <div class="box"></div>9 <div class="box"></div>
10 <div class="box"></div>
11 <div class="box"></div>
12 <div class="box"></div>
13 </body>

staggerTo("元素选择器或对象",持续时间,对象,动画延迟发生时间);

1 <script>
2         $(function(){
3               var t =new TimelineMax();
4             //t.to(".box",1,{width:300},1);
5               t.staggerTo(".box",2,{width:300},1);
6             //staggerTo()与to()的区别在于在设置相同的延迟时间的情况下，
7             //to()下的所有动画会同时进行，而staggerTo()下的动画会一个接着一个依次执行
8         });
9  </script>

2、 totalDuration()：获取动画的总时长

页面布局

 1 <style>2         html,body{3             margin: 0;4             padding: 0;5         }6         .div1{7             width:100px;8             height:100px;9             background: #8D121A;
10             position: absolute;
11             top:0;
12             left:0;
13         }
14 </style>

1 <body>
2 <div class="div1"></div>
3 </body>

totalDuration()

1 <script>
2         $(function(){
3             var t =new TimelineMax();
4             t.to(".div1",1,{left:300},1);
5             t.to(".div1",1,{width:300},"+=1");
6             t.to(".div1",1,{height:300});
7             console.log(t.totalDuration());//5   //获取动画的总时长
8         });
9 </script>

3、getLabelTime()：返回从开始到当前状态的时间

参数说明：

1. 状态的字符串返回值是一个数字

getLabelTime(字符串)

 1 <script>2         $(function(){3             var t =new TimelineMax();4             t.add("state1");5             t.to(".div1",1,{left:300},1);6             t.add("state2");7             t.to(".div1",1,{width:300},"+=1");8             t.add("state3");9             t.to(".div1",1,{height:300});
10             console.log(t.getLabelTime("state2"));  //2   //返回从开始到当前状态的时间
11         });
12 </script>

部分动画演示：

转载于:https://www.cnblogs.com/sdzbxfcy/p/9798885.html

（转）TweenMax动画库学习（四）相关推荐

TweenMax动画库学习(三)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) ...
TweenMax动画库学习-陈亚博客
http://www.cnblogs.com/chenyablog/p/5554926.html
animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
【Anime.js】——JavaScript动画库：Anime.js——学习笔记
目录一.搭建开发环境二.基本功能和使用开始制作动画动画属性三.anime.stagger--交错动画四.timeline--时间轴五.控制.回调与助手一.控制二.回调三.助手六. ...
TweenMax的GSAP（GreenSock动画平台）GSAP，专业的Web动画库
很好奇红框框里面的内容是什么,于是点了进去,又百度了下这个英文缩写具体指的什么东西. GSAP的全名是GreenSock Animation Platform,是一个从flash时代一直发展到今天的专 ...
前端学习（205）:animation动画库
动画库 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
js svg语音波动动画_11 个非常受欢迎的 JavaScript 动画库，值得学习！
1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了. .CSS3D 和 WebGL渲染器,让我们在设备和浏览器之间创建丰富的 ...
11 个非常受欢迎的 JavaScript 动画库，值得学习！
1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了<canvas>. <svg>.CSS3D 和 W ...
前端进阶必学必会动画学习之Animate.css的使用与解析：一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...

（转）TweenMax动画库学习（四）

（转）TweenMax动画库学习（四）相关推荐

最新文章

热门文章