TweenMax动画库

TweenMax扩展自TweenLite，添加了很多比较有用的特性，例如：repeat(),repeatDelay(),yoyo(),等等。

TweenMax构造函数

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

target : Object – 目标 MovieClip (或其它对象)，对它的属性进行缓动
duration : Number – 动画的时间长度（单位：秒）
vars : Object -一个包含了多种属性的对象，用来存贮缓动结束时的各种属性值（如果你使用 TweenLite.from() 方法，这里的参数表示缓动的初始值）。

最常用的方法是TweenMax.to(),它允许你定义对象的目标值。

var photo = document.getElementById('photo');
TweenMax.to(photo,2,{width:"200px",height:"150px"});

上述代码将会使ID为photo的DOM元素从width和height的当前值在2秒钟内分别逐渐变成200px和150px，注意width和height属性是被定义在一个普通对象里（面花括号里面）。你可以随意定义更多的属性进里面，你需要的话。
如果你的target传入的是一个字符串。例如：

TweenMax.to("#myID", 1, {left:"100px"}))

TweenMax会将其匹配到$(即典型的jQuery)，或者如果没有匹配到，则默认匹配成document.querySelectorAll() 或者document.getElementById()(自动删除“#”符号)，或者你也可以定义你自己的选择器，像TweenLite.selector = YOUR_SELECTOR_ENGINE；
所以一旦TweenMax加载，你就可以轻松地处理这样的动画：

TweenMax.to("#myID",2,{backgroundColor:"#ff0000",width:"50%",top:"100px",ease:Power2.easeInOut});
//或者你可以使用更多先进的选择器，例如所有具有myClass类的元素：
TweenMax.to(".myClass",2,{boxShadow:"0px 0px 20px red",color:"#fc0"});

tweens默认立刻执行，但是你可以使其延迟或者暂停执行，通过使用特殊属性delay和
pause；
target还可以是对象数组，例如，下面的代码会使obj1,obj2,obj3的opacity变成0.5，transform的rotation属性变成45：

TweenMax.to([obj1, obj2, obj3], 1, {opacity:0.5, rotation:45});

你还可以使用TweenMax.from()，如果你想定义开始值，而不是目标值的话。这时，目标对象将会从定义的开始值逐渐运动变为当前值。另外，TweenMax.fromTo()可以定义开始值以及目标值。
虽然to(), from(), 和 fromTo()这三个静态方法非常流行，因为他们快速，可以避免垃圾收集的繁琐程序，但其实你还可以使用更多的面向对象的语法，例如：

var tween = new TweenMax(myObject, 2, {width:200, height:150});
//甚至是：
var tween = TweenMax.to(myObject, 2, {width:200, height:150});

专有属性，回调函数和缓动

除了处理tween的目标值，vars对象允许你使用各种选项来配置你的tween。

TweenMax.to(element, 1, {opacity:0, onComplete:completeHandler, ease:Back.easeOut, useFrames:true});

TweenMax vars对象的所有属性列表如下：

0. delay 数值 表示动画开始前的延迟时间（或者是帧），单位是秒
1. ease 方法或字符串 表示缓动方式 它的值有很多种：Elastic.easeOutStrong.easeInOutPower0.easeIna.控制加减速easeOut:减速运动easeIn：加速运动easeInOut：先加速后减速运动easeNone：匀速运动b.控制运动方式Elastic 弹性运动Linear 线性运动Power0 力度比较小的Power1Power2Power3Power4Power5QuadCubicQuartQuintStrongBackBounce SlowMo SteppedEase Circ ExpoSine

repeat 数值（整数）继第一次动画循环后，动画应该重复的次数，假如repeat为1，那么动画将总共执行两次
repeatDelay 数值动画每次重复之间延迟的时间，单位是秒
yoyo 布尔值如果值为true，每隔一个重复周期对象以相反方向运行一次，使补间来回走动，尽管这样，但它不会影响到“reversed”属性。所以，如果repeat为2，yoyo为false，这将看起来像 “start-1-2-3-1-2-3-1-2-3-end”但如果yoyo值为true，这将看起来像是：”start-1-2-3-3-2-1-1-2-3-end”。
paused 布尔值如果为true，补间动画将立即停止
overwrite 字符串或整数值控制怎么（或者是否）覆盖其他同一目标值的补间动画，这里有几种模式可提供选择：
none（0）（or false）不会出现覆盖
all （1）（or true）立刻覆盖所有存在相同目标对象的补间动画，即使是还没开始运动的或者是没有冲突属性的。
auto (2)（默认值）当补间动画第一次呈现时，它会分析活动着或者正在运动的具有相同目标对象的补间动画，并且只会覆盖个别属性重叠或者冲突的。并且忽略还未开始的补间动画。比如说，如果另外一个活动着的补间动画有3个属性，并且只有一个属性是与新的补间动画相同冲突的，那么另外两个属性将会被忽略，只有冲突的那个属性会被覆盖或者杀死。
concurrent (3) 当补间动画第一次呈现，将只会杀死相同目标对象并且活动着的补间动画，而不管它们是否存在冲突的属性。像是“all”与“auto”的混合。适合用在你每次只需要一个补间动画来控制目标对象的情况。
allOnStart (4)
preexisting (5)

7.onComplete 函数动画完成时调用的函数
8.onCompleteParams 数组传入动画完成函数的参数
9.onCompleteScope 对象定义动画完成函数的作用域如：“this”

10.onRepeat 函数每次动画重复时调用
11.onRepeatParams
12.onRepeatScope

13.onReverseComplete 函数当动画从相反方向回到重新开始的地方时调用，例如，一旦reverse()方法被调用，补间动画将回到起点时，并且时间归0时，onReverseComple()会被调用。
14.onReverseCompleteParams
15.onReverseCompleteScope

16.onStart 在补间动画开始时被调用（当时间从0改变为其他值，他可以发生多次如果补间动画重复启动多次）
17.onStartParams
18.onStartScope

19.onUpdate 函数 - 每次动画更新（动画被激活的每一帧上）时被调用。
20.onUpdateParams
21.onUpdateScope

22.startAt 对象-允许您定义补间属性的初始值。通常情况下，TweenMax使用当前值（不管它发生是否在补间开始的时间）作为初始值，但startAt可以覆盖该行为。
只需补间开始之前在你想设置的属性中传递一个对象。例如，如果mc.x目前是100，你想使其从0变到500，执行：
TweenMax.to(mc, 2, {x:500, startAt:{x:0}});

23.useFrames 布尔值 - 如果useFrames为true，则补间的时间将基于帧而不是秒，因为它是intially添加到基于帧的根时间轴。这导致它们两个的持续时间和延迟是基于帧的。一个动画的定时模式总是由其父时间表确定。

24.lazy 布尔值 - 当补间第一次呈现和读取其初始值，默认情况下，GSAP会自动“懒渲染”，，这意味着它会尽量拖延渲染（值写入），直到尽头的“勾选“循环，可以提高性能，因为它避免了读/写/读/写布局颠簸，有些浏览器做的。如果您想关闭延迟渲染特定补间，您可以设置懒：假的。或者，因为零时间补间不懒渲染默认情况下，可以专门给它的权限设置懒渲染：真像TweenLite.set（元，{不透明度：0，懒：真}）;.在大多数情况下，你不会需要设置懒惰。
25.onOverwrite 函数 - 当补间被另一补间动画覆盖，应该调用的函数。以下参数将被传递到该函数：
1.overwrittenTween :动画 - 刚覆盖补间
2.overwritingTween :动画-做了覆盖的补间
3.target
4.overwrittenProperties
26.autoCSS 布尔值 - 与动画相关的DOM元素属性需要CSSPlugin。CSSPlugin-正常情况下，你需要把css相关属性放进一个css:{}对象中，例如：TweenLite.to(element,2,{css:{left:”200px”,top:”100px”},ease:Linear.easeNone})，用来表明你的意图（告诉GSAP以提供这些值给CSSPlugin），但是由于动画与css相关的属性是很常见的，GSAP实现了一些内部逻辑，允许您忽略css:{}的包裹（意味着你可以这样写上面的例子：TweenLite.to(element,2,{left:”200px”,top:”100px”,ease:Linear.easeNone})），默认情况下，它会检测目标对象是否是DOM元素，如果是，并且您没有定义一个css:{}对象，它就会创建该对象并填充属性。若要禁止该功能，可以设置autoCSS:false

27.callbackScope 对象 - 范围用于所有的回调（onStart，onUpdate，onComplete等）。该范围是什么“this”指向的所以内部回调函数。旧的特定回调范围的属性（onStartScope，onUpdateScope，onCompleteScope，onReverseComplete等）已被弃用，但仍然可以工作。
“`

tweenmax笔记相关推荐

TweenMax学习笔记整理
因为要做一个案例,里面用到了很多动画,TweenMax真的是一个很强大的动画库,所以就学了一点里面的方法,现在整理出来官网:https://greensock.com/tweenmax 注意:这个动 ...
tweenMax学习笔记
tweenMax是一款缓动插件,能实现很多牛逼的效果,在网上看了些demo,确实很吊,虽说很多用CSS3也能做出来,但是技多不压身,学之. 网上的demo还是很多的,但是资料不多,唯一能够让我有思绪的 ...
【读书笔记】知易行难，多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
【运维学习笔记】生命不息，搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
SSAN 关系抽取论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务共指id嵌入一样但是实体嵌入的时候 ...
pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...

tweenmax笔记

TweenMax动画库

TweenMax构造函数

专有属性，回调函数和缓动

tweenmax笔记相关推荐

最新文章

热门文章