TimelineMax的基本用法

Reading time ~2 minutes

TimelineMax的基本用法

1.TimelineMax是GASP的一部分,用于制作动画的工具。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列。

2.TimelineMax是一个JavaScript序列工具,可以充当补间或者其它时间轴的容器,从而更容易把它们作为一个整体来控制,也可以精确地管理它们的时序。TimelineMax提供的方法允许我们访问动画的多个层面,还可以在运行的时候动态调整时间轴的速度。

1.初始化准备:

引用:<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

2.对象字面量的配置

函数参数的基本的配置

var tmax_options = {
  delay: 0,//延迟时间
  paused: false,//动画暂停
  onComplete: function() {//动画完成之后执行函数
  },
  onCompleteScope: {},
  tweens: [],
  stagger: 0,
  align: 'normal',
  useFrames: false,
  onStart: function() {//动画开始时执行的函数
  },
  onStartScope: {},
  onUpdate: function() {
    console.log('on update called');
  },
  onUpdateScope: {},
  onRepeat: function() {//动画重复时执行的函数
  },
  onRepeatScope: {},
  onReverseComplete: function() {//倒置重复是执行的函数
  },
  onReverseCompleteScope: {},
  autoRemoveChildren: false,
  smoothChildTiming: false,
  repeat: 0,//动画重复次数
  repeatDelay: 0,//动画重复延时
  ease: Elastic.easeInOut,
  yoyo: false,//是否反向重复
  onCompleteParams: [],
  onReverseCompleteParams: [],
  onStartParams: [],
  onUpdateParams: [],
  onRepeatParams: []
};

3.创建动画对象

tl是实例化的TimelineMax函数,将对象字面量作为参数传入,.to()是用于添加动画效果,以下的动画,先执行第一个.to(),再执行第二个.to(),“-=0.5”代表于上个动画的时间间隔,在上一个动画还剩0.5s的时候,再执行第二个动画。

var tl = new TimelineMax(tmax_options);
tl.to(element, 1, { left: 100 })
  .to(element, 1, { top: 100 }"-=0.5");
 

这是我最近在看TimelineMax的一些理解,是很简短的一个描述,介绍来对象字面量的部分键值,包括常见的:repeat代表重复的次数,yoyo:true代表的是重复的方向为反向等。TimelineMax实例化的过程和添加方法,设置方法的参数。

这都是基本的定义,没有具体涉及到动画的动态效果。更深层次的理解和运用会在下次再进行分享。