当前的位置:首页首页 > 资源分享 > 前端资源
TweenMax.js之TweenMax
日期:2020-02-13 21:55:34 来源:简书 作者:李霖弢 次浏览
分享:

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

https://www.tweenmax.com.cn/
  • 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.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' } })

注:本站所转载文章,目的在于帮助更多的人学习交流,不代表本站观点,如有侵权可联系管理员删除。但对于本站原创文章,转载需注明出处和链接。更多有关电脑、手机、平面/前端设计、建站知识和技巧,欢迎搜索关注微信公众号:“PC电脑小白”。
本文链接:https://pcxiaobai.com/resource/frontresource/20200213/903.html

上一篇:anime.js 简单入门教程

下一篇:返回列表