GASP动画的基本使用

GSAP(TimelineMax、TweenMax)

什么是GSAP？

GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库。

 

GSAP优点

1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
3、没有依赖。
4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。

 

GSAP提供4个库文件供用户使用

1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
3.TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。

 

开始使用

1.加载文件

<script src="js/greensock-js/TweenMax.min.js"> </script>

 

2.制作动画

动画的三要素：

• 1.动画目标对象、需要缓动的对象
• 2.动画的持续时间
• 3.变化的属性

TweenMax( target:Object, duration:Number, vars:Object ) ;

.to(此方法用于创建一个从当前属性到指定目标属性的TweenMax动画对象)
TweenMax.to([obj1, obj2, obj3], 1, {x:100});(对多个对象进行动画)

.from(通过设置动画起始点来初始化一个TweenMax，相当于动画从设置点开始)

.fromTo(通过设置动画起始点和结束点来初始化一个TweenMax，相当于动画从设置点到第二个设置点)
TweenMax.fromTo([element1, element2], 1, 动画的起始起点{x:200},动画的结束起点{x:500});

.staggerTo(tagger系列方法为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组。    需要设置每个动画的开始间隔。如不设置则为零，同时开始动画。)
TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, 间隔时间stagger:Number....)

.staggerFrom(通过设定序列动画的终点来初始化一组TweenMax)
注意：stagger系列方法可以使用cycle属性来循环设置动画参数值。

.staggerFromTo(通过设定序列动画的起点和终点来初始化一个TweenMax)
还可以使用cycle属性

.delayedCall(提供一种在设定的时间（或帧）后调用函数的简单方法)
TweenMax.delayedCall( delay:Number, callback:Function, params:Array, scope:*, useFrames:Boolean )

.set(立即设置目标的属性值而不产生过渡动画，相当于0的动画时间。并返回TweenMax对象。)
TweenMax.set( target:Object, vars:Object )

 

基本动画初始值的了解

delay:Number
动画开始之前的延迟秒数（以帧为单位时则为帧数）。

ease: Ease (or Function or String)
过渡效果的速度曲线（缓动效果）。你可以在动画的参数中设置各种缓动来控制动画的变化率，赋予其特定的“感觉”。例如Elastic.easeOut或 Strong.easeInOut。默认是Power1.easeOut。

paused: Boolean
如果设置为true，动画将在创建时立即暂停。默认false

lazy: Boolean
延迟渲染
当动画第一次渲染并读取其起始值时，将默认自动“延迟渲染”该特定瞬间，这意味着它将尝试延迟渲染（写入值）直到最后时间点。这可以提高性能，因为它避免了某些浏览器所做的读/写/读/写布局颠簸。
如果要为特定补间禁用延迟渲染，可以进行设置lazy:false。 或者由于零持续时间的补间默认情况下不进行延迟渲染，因此您可以通过设置lazy:true等方式为其提供延迟渲染的权限TweenLite.set(element, {opacity:0, lazy:true});。
在大多数情况下，你不会需要设置lazy。

repeat: Number
动画在第一次完成后应重复的次数。例如，如果repeat为1，则动画将总共播放两次（初始播放加1次重复）。要无限期重复，请使用-1。repeat应该始终是一个整数。

repeatDelay: Number
每次重复之间的秒数（或帧）。例如，如果repeat是2并且repeatDelay是1，则动画将首先播放，然后在重复之前等待1秒，然后再次播放，然后再等待1秒再进行最后的重复。

yoyo: Boolean
如果设置yoyo为true，那么重复的动画将往返进行。默认为false。
例如当你设置了repeat:2，如果没设置yoyo，那么动画是这样的123-123-123
如果设置了yoyo，动画则是123-321-123

yoyoEase: Ease | Boolean
定义动画返回时，缓动效果如何，默认false，返回时的缓动效果按照前进时的反转。
例如，动画前行效果ease:Power1.easeOut，回转时则变成是ease:Power1.easeIn。如果设置为true，回转时则与前进相同，为ease:Power1.easeOut。
也可以设置为特定的ease效果，例如Power2.easeOut。

startAt: Object
设置动画属性开始时的值

cycle: Object
在stagger（错开）动画中设定属性组。虽然stagger限定了动画目标使用相同的属性（如x:100, rotation:90），但你可以使用cycle来设定一个属性组（如 cycle:{x:[100,-100], rotation:[30,60,90]} ），还可使用function关键词（如 {x:function() { return Math.random() * 200; }} ）
cycle适用于 staggerTo() 、 staggerFrom() 和 staggerFromTo() 。

 

动画常用的事件

....

 

 

 

什么是TimelineLite/TimelineMax？

TimelineLite/TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具，可创建时间轴（timeline）作为动画或其他时间轴的容器，这使得整个动画控制和精确管理时间变得简单。

试想一下，如果不使用TimelineLite/TimelineMax创建时间轴，那么构建复杂的动画序列将会非常麻烦，因为你需要用delay为每个动画设置开始时间。

以下是没有使用时间轴的动画序列的基本示例：

TweenLite.to(element, 1, {left:100});
TweenLite.to(element, 1, {top:50, delay:1});//延迟1秒，接续前一个动画
TweenLite.to(element, 1, {opacity:0, delay:2});//延迟2秒，接续前一个动画

上面的代码将元素的"left" 属性设置为100，然后将“top”设置为50，最后将“透明度”设置为0（注意 delay除第一个以外的所有其他动画都用上了）。但想象一下，如果你想将第一个动画的持续时间增加到1.5，那么你需要调整其后的每一个延迟。

如果你想要pause()整个动画序列或者restart()它，或者reverse() 它在运行中或跳到整个动画中的特定点，这变得相当混乱（或不可能），但TimelineMax使其非常简单：

var tl = new TimelineLite();
tl.add( TweenLite.to(element, 1, {left:100}) );//将一个动画添加到时间轴
tl.add( TweenLite.to(element, 1, {top:50}) );//将一个动画添加到时间轴末端，即与前一个动画接续
tl.add( TweenLite.to(element, 1, {opacity:0}) ); //将一个动画添加到时间轴末端，即与前一个动画接续
 
//控制时间轴
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
...

或者使用简单的to()方法和链式调用使其更加简洁：
var tl = new TimelineLite();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});
现在，你可以随意调整任何动画，而不必担心延迟时间会发生混乱。增加第一个动画的持续时间，一切都会自动调整。

 

TimelineMax基本使用

.TimelineMax( vars:Object ) ;
构建一个TimelineMax实例，创建时间轴。

//创建一个重复3次每次1秒间隔的时间轴，当时间轴结束时执行myFunction()
var tl = new TimelineMax({repeat:3, repeatDelay:1, onComplete:myFunction});
//添加一个动画
tl.add( TweenLite.to(element, 1, {left:200, top:100}) );
        
//在时间轴末尾添加另一个动画
tl.add( TweenLite.to(element, 0.5, {opacity:0}) );
 
//通过.to()方法添加一个动画，添加于时间轴末尾后0.5秒处的
tl.to(element, 1, {rotation:30}, "+=0.5");
         
//反向播放时间轴
tl.reverse();
//在三秒钟处插入一个标签
tl.addLabel("spin", 3);
//在标签处插入一个动画
tl.add( new TweenLite(element, 2, {rotation:"+=360"}), "spin");
    
//跳转到标签处开始播放
tl.play("spin");
//在时间轴中插入另一个时间轴
var nested = new TimelineMax();
nested.to(element2, 1, {left:200}));
tl.add(nested);

...

..

.

 

 

GSAP(TimelineMax、TweenMax)中文文档：https://www.tweenmax.com.cn/api/tweenmax/

来源：https://www.cnblogs.com/sunchao0709/p/12203756.html