TweenMax学习记录教程

无恃而安

于 2023-05-28 21:56:50 发布

阅读量554

点赞数

文章标签：学习前端 vue.js html 开发语言

Lcc

本文链接：https://blog.csdn.net/weixin_50601484/article/details/130913507

版权

TweenMax

网址
安装
使用场景以及文章须知
动画
初始化设置
事件设置
动画设置
设置动画播放时间
TimelineLite 一点点 [官网](https://greensock.com/)

网址

国外官网：https://www.tweenmax.com.cn/
中文文档：https://www.tweenmax.com.cn/api/tweenmax/

安装

引入链接：

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

来源

请将x.x.x改成你需要的版本号，例如2.0.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/x.x.x/TweenMax.min.js"> </script>
或者
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
怀疑gsap库包含TweenMax动画

来源

使用场景以及文章须知

使用场景vue的created和mounted和methods中
o为老位置 n为新位置

target ：缓动的对象例 .box  #box  this.$refs.box  dev或包含以上的数组
			设置运动的对象 单个或多个
duration： 动画时间
vars  :         动画参数
	alpha：透明度
	x:横坐标
	y:纵坐标
	rotation： 旋转 0 ~360
赋值 可直接给值 或使用函数 return 值 进行赋值 多针对多个对象 不同位置
{
  	cycle:{
      backgroundColor:["red", "white", "#00f"],
       x:function(index){
            if(index % 2 === 0){
              return 100
            }
            return  -100
          }
    }
 }
 也可使用 数组（循环赋值） 函数 判断返回赋值    值 直接使用
 
使用原理是使用css 进行动画
transform: matrix(1, 0, 0, 1, 100, 0);

动画

TweenMax() o => n

TweenMax的构造函数，用来构建一个TweenMax对象
TweenMax( target:Object, duration:Number, vars:Object ) ;
target:为对象
duration：时间
vars：n位置
var tween = new TweenMax('.box', 3, {
        x: 500,
        alpha: 0.3,
      });
      tween.delay(1);

weenMax.to() o => n

一个从当前属性到指定目标属性的TweenMax动画对象。
var myTween = TweenMax.to(".box", 1, {
  x: function(index, target) {
    console.log(index, target);
    return (index + 1) * 100 // 100, 200, 300
  }
})

TweenMax.from() n => o

通过设置动画起始点来初始化一个TweenMax，相当于动画从设置点开始。
TweenMax.from( target:Object, duration:Number, vars:Object ) : TweenMax
var myTween = TweenMax.from(".box", 3, {
  x: 500,
})

TweenMax.fromTo() n1 => n2 n1可以 == o n2也可以 == o

通过设置动画起始点和结束点来初始化一个TweenMax，相当于动画从设置点到第二个设置点。
TweenMax.from( target:Object, duration:Number, vars:Object ) : TweenMax
var myTween = TweenMax.from(".box", 3, {
  x: 500,
})

TweenMax.staggerTo() o => n s

为多个目标制作一个有间隔的动画序列，相当于多个TweenMax的数组。
TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array

TweenMax.staggerTo("li", 1, {rotation:360, x:100}, 0.5,(param)=>{
        console.log('跑完了');
      }, ["Complete"],window);
      TweenMax.staggerTo("li", 1, {rotation:360, x:100}, 0.5); 即可 
      每一个li间隔0.5秒后开始1秒的动画

TweenMax.staggerFrom() n => o s

通过设定序列动画的终点来初始化一组TweenMax。
TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array

TweenMax.staggerFrom("li", 1, {y:-1000}, 0.5);
从y = -1000每隔0.5到初始位置

TweenMax.staggerFromTo() n1 => n2 n1可以 == o n2也可以 == o

TweenMax.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
通过设定序列动画的起点和终点来初始化一个TweenMax。
TweenMax.staggerFromTo(objects, 1, {opacity:1}, {opacity:0}, 0.2);

TweenMax.delayedCall() 动画走一半执行的函数

TweenMax.delayedCall( delay:Number, callback:Function, params:Array, scope:*, useFrames:Boolean ) : TweenMax
提供一种在设定的时间（或帧）后调用函数的简单方法。
var myTween=new TweenMax('.box', 3, {
   x: 500,
})
var myTween2=TweenMax.delayedCall(2,myFunction,["参数1","参数2"])
function myFunction(param1, param2) {
  alert("延迟2秒输出"+param1+'和'+param2);
}

TweenMax.set() 使动画更3D效果

立即设置目标的属性值而不产生过渡动画，相当于0的动画时间
TweenMax.set( target:Object, vars:Object ) : TweenMax
设置父级元素，使其全部子元素产生3D效果 TweenMax.set(".wrapper",{perspective:200});
TweenMax.set(".nbox",{transformPerspective:300});      父级
TweenMax.to(".box", 3, {rotationY:360, transformOrigin:"left top"})    子级

初始化设置

delay ：延迟秒数delay：3 延迟三秒 在n 中vars   使用
ease：滑动效果 例如Elastic.easeOut或 Strong.easeInOut。默认是Power1.easeOut。
  TweenLite中包含了基本缓动：Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）。
  而TweenMax在此基础上还另外增加了特殊缓动：Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine。
  如果想在TweenLite中使用特殊缓动则需要加载缓动类easing/EasePack.min.js 。
paused：暂停 如果设置为true，动画将在创建时立即暂停。默认false
  可使用 tween.play();播放
immediateRender ：立即渲染，默认false。有些动画是true 有些是false  不想立刻显然可设置为false
overwrite: 0 1 2 3 4 5  用来控制同一个对象上有多个动画时的覆盖之类的情况。6种模式
  用来控制同一个对象上有多个动画时的覆盖之类的情况。抹掉重复或者优化
useFrames ：帧数变秒数
lazy：延迟渲染
autoCSS： 自动识别css对象
repeat ：运动的次数 默认一次 两次就写1 三次就写2 。。。 无限期重复写-1
repeatDelay：运动重复之前的间隔时间  1间隔一秒后再重复
yoyo：动画是否往返进行 用于重复动画返回方式 是否
yoyoEase：返回时的动画 返回方式
startAt：动画属性开始时的值 适用于TweenMax
  new TweenMax('.box', 3, {
      x: 500,
      startAt: {x:200},//从200开始
  });
cycle ：设置非常棒

事件设置

onComplete：在动画结束时触发此回调函数。
onCompleteParams：传递给onComplete函数的参数数组
onCompleteScope：函数的作用域
onReverseComplete：反向播放动画完成时执行此回调函数。
onReverseCompleteParams:传递给onReverseComplete函数的参数数组
onReverseCompleteScope：定义onReverseComplete函数的作用域
onStart：当动画开始渲染时执行此事件函数，有可能会被执行多次，因为动画是可以重复开始的
onStartParams：传递给onStart事件函数的参数数组
onStartScope：定义onStart函数的作用域，即函数内this的指向
onUpdate：当动画发生改变时(动画进行中的每一帧)不停的触发此事件。
onUpdateParams：参数
onUpdateScope：作用域
onOverwrite：当一个补间动画被另外一个补间动画覆盖时发生的事件
onRepeat：动画重复时(repeat)执行此事件函数。
onRepeatParams：参数
onRepeatScope：作用域

动画设置

.play() 正方向播放 可设定开始的时间点 .play(2);
.pause() 暂停 可设置暂停时间点 .pause(2）
.paused() 获取是否暂停状态 可进行切换暂停/非暂停状态 myAnimation.paused( !myAnimation.paused() );
.restart() 重新开始动画/重头开始。tween.restart(true);如果有延时也将延时触发
.resume() 恢复播放而不改变方向（前进或后退），可选择首先跳到特定时间。 myAnimation.resume(2);
.reverse() 控制动画反向播放 控制动画末端往回1秒位置反向播放 .reverse(-1);
.reversed() 获取或设置动画的反转状态，指示是否应该反向播放动画 .reversed( true ); //设置反方向
.seek()  .seek(2); 不改变状态（播放、暂停、方向）的情况下直接跳转到某个时间点。.seek(2);

设置动画播放时间

duration():获取或设置动画持续的时间。
totalDuration 获取或设定全部重复的动画的持续时间。
.time() 获取或设置当前动画时间。
.totalTime() 获取或设置总的动画时长。
.progress() 获取或者设置单次动画的进程（从0到1）
.totalProgress() 获取或者设置总的动画进程（从0到1）
.delay() 获取或者设置动画的开始延迟秒数（帧）。
.invalidate() 新任何内部记录的开始/结束值，如果您想要重新启动动画而不恢复到以前记录的任何起始值，这将非常有用。
.repeat()  获取或者设定动画在第一次完成后的重复次数。
.repeatDelay( value:Number ) : *获取或者设置每次重复动画之间的间隔时间（秒）
.yoyo()  获取或设置补间动画的yoyo的状态。

TimelineLite 一点点官网

页面元素挨个出来
var tl = new TimelineLite();
      tl.from(this.$refs.img, 1, {
				x: 100,
				opacity: 0
			});
      tl.from(this.$refs.h2, 1, {
				x: -100,
				opacity: 0
			});
      tl.from('.box', 1, {
				y: -100,
				opacity: 0
			});
      tl.from('.btn', 1, {
				y: 100,
				opacity: 0
			});
			// 也可使用以上动画设置重新展示或隐藏
			// 可制作数字动画
			var demo = {score:0}
			TweenLite.to(demo,20,{
					score:100,
					onUpdate:()=> {
						console.log(demo.score.toFixed(2))
					}
			})
	
	TimelineLite 是 GreenSock 公司开发的一个轻量级的时间线库，可以用来创建复杂的动画序列。以下是 TimelineLite 的文档：

	创建时间线
	可以通过以下方式来创建一个新的时间线：
	var timeline = new TimelineLite();
	
	添加动画
	可以通过 to()、from()、fromTo() 和 set() 方法来添加动画到时间线中。这些方法和 TweenLite/TweenMax 中的相应方法非常相似。例如：
	timeline.to(element, duration, {x: 100, opacity: 0.5});
	
	暂停和播放
	可以通过 pause()、resume()、restart() 和 seek() 方法来控制时间线的播放。例如：
	timeline.pause();
	timeline.resume();
	timeline.restart();
	timeline.seek(2); // 将时间线跳转到 2 秒的位置
	
	循环播放
	可以使用 repeat() 方法来循环播放时间线。例如：

	timeline.repeat(2); // 时间线将会重复播放两次
	
	反向播放
	可以使用 reverse() 方法来反向播放时间线。例如：
	
	timeline.reverse();
	回调函数
	可以使用 call() 方法来在时间线的指定位置执行回调函数。例如：
	
	timeline.call(myFunction, [param1, param2], thisObj, 1);
	事件
	可以通过 add() 方法来添加事件，时间线到达某个位置时会触发这些事件。例如：
	
	timeline.add(myFunction, 2);
	暂停和恢复单个动画
	可以使用 pause() 和 resume() 方法暂停和恢复单个动画。例如：
	
	var tween = timeline.to(element, duration, {x: 100});
	tween.pause();
	tween.resume();
	其他方法
	还有许多其他的方法可以使用，例如 kill()、invalidate()、timeScale() 等等。完整的文档可以在 GreenSock 的官网上找到。