javascript动画库GASP(greensock)

林太白
1,158 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情

javascript动画库GASP(greensock)

❤ 认识

GreenSock在Flash动画时代久负盛名，并且GreenSock的维护团队与时俱进，推出了以javascript为核心的GreenSock，在Flash和HTML5项目中，你可以使用相同的动画工具集，同样的API，同样的开发体验，同样关注性能。

❤优点:

1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。

2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。

3、没有依赖。

4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。

5、任何对象都可以实现动画。

❤使用

了解下GSAP动画平台四个插件的不同功能

使用案例：

  • 结构
<div id="box">
  <div class="boxSmall"></div>
</div>
  • 样式
body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
#box {
  background-color: #88ce02;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.boxSmall {
  position: absolute;
  background-color: #70a40b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}
  • 引入库
引入GreenSock文件，这里我们引入的是TweenMax这个全功能的js文件，
为了操作方便我们还需要引入jquery来选择和操作DOM

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

过程：

前提：先拿到元素

var $box = document.getElementById('box');

① TweenLite.to()方法让元素移动

TweenLite.to($box, 0.7, {left: 0});

//支持第二个元素
//可以通过定义元素的X来更正元素位置

TweenLite.to($box, 0.7, {left: 0, x: 0});

② TweenLite.from方法

TweenLite.from($box, 2, {x: '+=200px', autoAlpha: 0});

用来使元素从定义在.from()方法里的位置运动到在CSS中定义的位置

会看到元素从元素左边200px的位置运动到元素在CSS中定义的位置。

  • autoAlpha方法是GSAP中一个特别的属性，它把opacity和visibility两个属性合二为一了
  • autoAlpha: 0表示它会把元素初始化为opacity:0;visibility:hidden。当执行动画效果的时候它会把visibility的值设置为inherit以及opacity值设置为1。从而产生一个渐现的效果

③TweenLite.set()

当我们想设置元素的一些CSS属性需要动画效果时候，比如，重设元素的位置

TweenLite.set($box, {x: '-=200px', scale: 0.3});
TweenLite.set($box, {x: '+=100px', scale: 0.6, delay: 1});
TweenLite.set($box, {x: '-50%', scale: 1, delay: 2});

元素会从-200px 的位置开始执行以下的两步：放大和向右位移到x 为 -50% 的位置

元素只是单纯的在改变属性并没有动画效果。

delay这个属性来制定元素属性改变的延迟时间

④TweenLite.fromTo()方法

这个方法我们可以定义元素的起始位置

TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 300});

定义元素从左边200px的位置开始运动到指定的位置。

x:300会覆盖在CSS中定义的transform: translate(–50%, –50%)的样式

用新的transform: matrix(1, 0, 0, 1, 300, -50);样式来代替。

⑤GreenSock提供了各种的运动曲线

  • 依靠的是缓动曲线函数

TweenMax的话，它已经包含了EasePack

EasePack包含下面的这些运动曲线：

1、Back 2、SlowMo 3、StppedEase 4、RoughEase 5、Bounce 6、Circ 7、Elastic 8、Expo 9、Sine

  • 简单使用
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut});

下面来添加ease:Power4.easeInOut来看看实际的效果

TweenLite.to($box, 0.4, {top: '100px', y: '-100%', ease:Bounce.easeOut, delay: 2});
    TweenLite.to($box, 0.7, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 3});
    TweenLite.to($box, 0.8, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 4.2});
    TweenLite.to($box, 2.5, {top: '50%', y: '-50%', ease:Power0.easeNone, delay: 5});
    TweenLite.to($box, 2.5, {x: '+=400px', ease:Elastic.easeInOut, delay: 7.7});
    TweenLite.to($box, 2.5, {x: '-=400px', rotation: -720, ease: SlowMo.ease.config(0.1, 0.7, false), delay: 10.4});

曲线函数地址：greensock.com/ease-visual…

⑥ 回调函数

GreenSock提供了丰富的回调函数来操作动画效果。

以.fromTo()方法为例

比如，我们想要在动画开始的时候触发回调函数。可以创建一个start的函数：

  • 分别在不同的状态的时候触发对应的回调函数

onStart:start在动画开始的时候来触发回调函数

onUpdate会在动画的每一帧触发

onComplete会在动画结束的时候触发。

function start(){
  console.log('start');
}
function update(){
  console.log('animating');
}
function complete(){
  console.log('end');
}
  
TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut, onStart: start,onUpdate:update,onComplete:complete});

最后输出结果：

avatar
文章
阅读
粉丝