TweenMax中文初级教程一

2020-04-17 11:27:48


  • TweenMax.js集成了GreenSock动画平台的大部分核心功能,且具有极高的兼容性。

TweenMax.js包含有两个核心功能:TweenMax和TweenLineMax。

Tweenmax

可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。

动画结构

TweenMax.to( target:Object, duration:Number, vars:Object )

  • target : 同jQuery选择器,也可为一个数组,甚至是一个普通对象(此时动画过程即对象属性的渐变过程)

  • duration : 一般为 秒

  • vars : 对象属性,如 left , x , opacity 等

  • TweenMax.to() 和 new TweenMax() 等价

      $('#obj')[0].score = 100;
      var myTween = TweenMax.to("#obj", 3, {
        left: function(index){
          return index*50+100
        },
        score: 5,
        onUpdate: function () {
          document.querySelector("#obj").innerHTML = $('#obj')[0].score;
        }
      }
      );
TweenMax.from()

  • 类似TweenMax.to(),但是动画会从目标起始点开始,返回原来位置

TweenMax.fromTo( target, duration, fromVars, toVars )

  • 动画从fromVars到toVars

TweenMax.staggerTo()

  • TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

  • 注意onCompleteAll等参数不属于vars对象，而是并列的参数

TweenMax.staggerFrom()
TweenMax.staggerFromTo()

  • 为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组

  • cycle属性可以分别指定每一个目标的动画属性(通过传入数组 或 function的return)

TweenMax.delayedCall()

  • 类似setTimeout()

//1秒后执行myFunction并传递两个参数:TweenMax.delayedCall(1, myFunction, ["value1" , "value2"],document);function myFunction(param1, param2) {
    console.log(param1+param2+this)//this指向document}
TweenMax.set()

  • 直接设置属性,相当于duration为0的动画

动画vars设置

  • transformOrigin:"bottom center" 旋转中心

  • delay:number 设置延时

  • paused: Boolean (false) 创建时是否暂停

  • overwrite: String or int ( "auto" ) 同一对象存在多个动画时的覆盖情况

    • true : 只运行后者(慎用，会导致TimeLine上的后续call被调用)

    • false : 同时运行,当同一时刻前后者都存在某属性时,以后者为准

    • auto : 同时运行,当前后者都存在某属性时,忽略前者该属性

  • useFrames: Boolean (false) 为true时采用帧而非秒

  • repeat: Number (0) 动画 额外 重复次数,为-1则无限期重复。

  • repeatDelay: Number (0) 每次重复的间隔

  • yoyo: Boolean (false) 重复时是否往返进行

  • yoyoEase: Ease | Boolean (false) 动画返回时的缓动效果，默认返回时的缓动效果按照前进时的反转。

  • startAt: Object 设置动画开始时的值 例TweenMax.to(mc, 2, {x:500, startAt:{x:200}});

  • callbackScope: Object 指定onStart，onUpdate，onComplete等回调中“this”的指向。

  • autoCSS: Boolean 允许省略css:{}包装器。默认true。

  • timeScale: 改变目标TweenMax或TweenLineMax实例的速度(其实只是target为对象时的一个特殊运用)
    例 : TweenMax.to(tween1, 10, { timeScale: 0 }); //将tween1动画逐渐减速

  • ease: Ease (or Function or String) 速度曲线

    • 默认是Power1.easeOut

    • 基本缓动 Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）

    • Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine

  • cycle: Object 仅适用于stagger（错开）动画，以为不同目标设置不同属性值，还可使用function关键词。

myTween = TweenMax.staggerTo(".box", 1, {
    cycle: {
        //为目标循环设置一下属性数组
        backgroundColor: ["red", "white", "#00f"],
        //通过function返回属性数组
        y: function(index, target) {
            console.log(index, target)
            //目标target < div class = "box" > < /div>
                        // 目标数组的动画索引值index
            return index * 20;
        },
    },}, 0.5);

  • roundProps: Object
    动画过程中将目标属性四舍五入（舍入）,即动画效果会以跳跃方式播放

TweenLite.to(element, 5, { x:600, y:100, roundProps:{    
    x:100, //将x舍入到最接近100的增量    y:0.1  //将y舍入到最接近0.1的增量  }});

动画事件 (每个事件均有XParams和XScope)

  • onComplete: Function 动画结束时触发

  • onCompleteParams: Array 传递给onComplete的参数数组

  • onCompleteScope: Object 定义onComplete的this指向

  • onReverseComplete: Function 反向动画结束时触发

  • onStart: Function 动画 start/restart 时触发

  • onUpdate: Function 每一帧都会不停触发

  • onOverwrite: Function

  • onRepeat: Function

  • .eventCallback( type:String, callback:Function, params:Array, scope:* )

    • 直接对动画实例设置事件,可链式执行

    • 相同type的事件会覆盖,也可将事件设为null来清除原有事件

    • params可传入["{self}"]表示动画实例本身

var myTween = new TweenLite(mc, 1, {x:100});myTween.eventCallback("onComplete", myFunction, ["param1"]);

动画实例事件

  • .play( from:*, suppressEvents:Boolean ) 正向播放

    • from 播放开始时间点,默认为当前位置

    • suppressEvents (true) 若为false,则被跳过时间段内的回调/事件也会触发

  • .pause( atTime:*, suppressEvents:Boolean ) 暂停

    • atTime (null) 跳转到特定事件再暂停

  • .paused( value:Boolean ) 获取或设置暂停状态,无入参时即为获取

  • .restart( includeDelay:Boolean, suppressEvents:Boolean ) 重新开始

    • includeDelay (false) 是否包含延迟(如果有)

  • .resume( from:*, suppressEvents:Boolean ) 按当前方向恢复播放

  • .reverse( from:*, suppressEvents:Boolean ) 反向播放

  • .reversed( value:Boolean ) 获取或设置反转状态,无入参时即为获取

  • .seek( time:*, suppressEvents:Boolean ) 不改变状态（播放、暂停、方向）的情况下直接跳转到某个时间点。

  • .timeScale( value:Number ) 获取或设置动画速率,默认为1

动画属性调整(无入参时为获取)

  • .duration( value:Number ) 单次动画持续的时间

  • .totalDuration( value:Number ) 全部重复动画加重复间隔的持续时间

  • .time( value:Number ) 当前动画已用时间

  • .totalTime( time:Number, suppressEvents:Boolean ) 全部重复动画加重复间隔的总时间

  • .progress( value:Number, suppressEvents:Boolean ) 进程0~1

  • .totalProgress( value:Number, suppressEvents:Boolean ) 总进程0~1

  • .delay( value:Number )

  • .invalidate() 刷新开始/结束值,此时如再restart()会以当前位置作为新的开始点

  • .isActive() 判断是否在播放中

  • .startTime( value:Number ) / .endTime( value:Number )

  • .repeat( value:Number ) 第一次完成后的重复次数

  • .repeatDelay( value:Number )

  • .yoyo( value:Boolean )

实例属性(除data和ticker外均仅用于获取数据)

如myTween.data={data1:'value1'}

  • data 用于储存信息

  • target 动画对象

  • timeline 父级时间轴对象

  • vars 构造器配置对象

  • ticker 每当引擎update时这个对象将分配tick事件

//设置帧率,最高为60(默认)TweenMax.ticker.fps(30); //添加监听TweenMax.ticker.addEventListener("tick", myFunction);function myFunction() {//核心引擎update时处理这个事件}//移除监听TweenMax.ticker.removeEventListener("tick", myFunction);

实例方法

  • TweenMax.getTweensOf( target:Object, onlyActive:Boolean )获取目标上所有动画对象的数组

  • TweenMax.getAllTweens( includeTimelines:Boolean ) 获取所有动画实例的数组

  • .kill( vars:Object, target:Object ) 消灭整个动画或部分参数。

//删除动画myAnimation.kill(); //删除动画的x和y属性myAnimation.kill({x:true, y:true});//删除对象"myObject"上的动画，如果动画有多个对象，其他对象上的动画不会删除myAnimation.kill(null, myObject); //仅删除对象"myObject"的动画的x和y属性myAnimation.kill({x:true, y:true}, myObject);//仅删除对象"myObject1"和"myObject2"对象的"opacity"属性myAnimation.kill({opacity:true}, [myObject1, myObject2]);

  • TweenMax.killDelayedCallsTo( function:Function ) 移除延迟函数

  • TweenMax.killTweensOf( target:Object, vars:Object ) 移除目标所有动画

  • TweenMax.killAll(complete, tweens, delayedCalls, timelines) 全部删除

  • TweenMax.killChildTweensOf( parent:Object, complete:Boolean )删除目标子元素动画

  • TweenMax.globalTimeScale( value:Number ) 读取或设置所有动画全局播放速率

  • TweenMax.pauseAll( tweens, delayedCalls, timelines ) 全部暂停

  • TweenMax.resumeAll( tweens, delayedCalls, timelines )全部恢复

一个3D旋转的案例

TweenMax.set("img", { css: { transformPerspective: 400, transformStyle: "preserve-3d" } });
TweenMax.to("img", 1, { ease: Power0.easeNone, css:  { rotationY: 360, rotationX: -360, rotationZ: 180, z: 300, top: '-60vh' } })



  • 精彩推荐

  • 2019-08-27 05:43:13

    Laravel 门面自动补全工具 laravel-ide-helper

    当我们在 PhpStorm 编辑器中，开发 Laravel 框架的项目时，很多类方法都不能自动补全和定位，比如 Facade 门面的方法，DB::table()、Route::get() 等。

  • 2019-08-28 08:28:36

    Js apply,call方法详解,及其apply()方法的妙用

    在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

  • 2019-08-28 08:49:47

    Nginx + fastcgi + php 的原理与关系

    CGI对每个请求会parse一遍对应脚本的配置文件（如php.ini）， 加载配置和扩展，初始化执行环境，性能非常差，所有有了下面的流程：

  • 2019-08-28 09:23:15

    php单例模式

    单例模式，是一种常见的软件设计模式。在应用这个模式时，单例对象的类必须保证只有一个实例存在。

  • 2019-08-28 22:45:02

    彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系

    Gradle是个构建系统，能够简化你的编译、打包、测试过程。熟悉Java的同学，可以把Gradle类比成Maven。Gradle Wrapper的作用是简化Gradle本身的安装、部署。不同版本的项目可能需要不同版本的Gradle，手工部署的话比较麻烦，而且可能产生冲突，所以需要Gradle Wrapper帮你搞定这些事情。Gradle Wrapper是Gradle项目的一部分。