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-11-28 11:00:35

    Vue子组件调用父组件的方法

    下面有三种方法，我自己重点推荐第一种，毕竟这种简单粗暴好用好理解，不过这个有一个弊端，再组件嵌套组件的时候，尤其是用第三方组件里面调用自己的子组件的时候，其实已经是孙子组件了，这个时候就要parent.parent。。。。,这样就不好了，我们就得考虑其他方法了，具体怎么判断是父组件，还是爷爷组件，我会单独出一篇文章讲述。

  • 2019-11-29 13:04:47

    计算一个多边形的重心点坐标（准确版）

    在之前的 《如何判断一个多边形是否合法》 一文中有提到，用无人机规划飞行路线前，往往需要框选一个多边形的区域。 而在地图控件上显示这个多边形区域时，往往会遇到这样一个需求：需要把所要测绘的多边形区域移动到地图中心。 实现这个需求的基本思路就是：获取到多边形区域的重心点坐标，然后利用地图控件的 setCenter方法，就可以把地图的显示中心移动到多边形区域重心了。那么问题来了，如何求出一个多边形的重心点坐标呢？

  • 2019-11-29 13:06:27

    如何判断一个多边形是否合法

    利用无人机对一片区域进行测绘前，我们会先在地图上框选一个区域，然后再规划飞行的路线，而需要测绘的这片区域往往是一个多边形。在 MeshKit 中，我们加入了多边形区域的编辑功能，其中就涉及判断用户所编辑出来的多边形是否合法的问题。

  • 2019-11-29 13:47:22

    百度地图做电子围栏总结

    在地图上画出围栏，设置围栏信息后保存，生成围栏列表。全选时，地图视野可看到全部的围栏区域，单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2019-11-29 13:50:29

    图片连接处出现白线

    block导致，只要父元素设置font-size：0或者设置img display: block; 便可。但是我设置了没有用，这条线不是所有的机型都有，而且页面滚动之后又消失，我琢磨半天，各种尝试，发现把图片高度减少（增加）1px就解决了。因为我们的项目是用postcss-px-to-viewport，我每张图片都是设置高度的，应该是数值转换出现偏差。

  • 2019-11-29 13:54:07

    粗略计算多边形中心点（并不是很准确，但简单好用）

    也是再做栅栏系统，搜索如何获取多边形中心点的问题上，发现了这个，简单易于理解，但是并不是特变准确，但也不影响使用。 后来发现了新的算法，并且百度地图也提供相应的api。 具体内容我写在了前面的文章，大家可以找一下。