在Vue中使用GSAP完成动画（一）

本文的内容大致与官网文档内容相似，作者只是想自己学习记录一下学习过程，加深印象，叙述方式会尽可能地口头话一点，想看官方文档的可以点击此处 GSAP官方文档，完整的教程可以访问我的个人主页

1.GSAP简介

GSAP（GreenSock Animation Platform）是一个专业的动画库，可以用它完成你想要的各种效果

GSAP

2.使用方法

• 安装GSAP

npm install gsap --save

• 在需要使用的地方引入

import {TweenMax} from 'gsap'

• GSAP的四个动画库

image

• 第一个案例 TweenMax()

<template>
  <div>
    <div class="box" ref="box"></div>
  </div>
</template>

<script>
import {TweenMax} from 'gsap'

export default {
  name: "test",
  mounted(){
    const box=this.$refs['box'];
    new TweenMax(box,3,{
      x:600,
      alpha:0.4
    })
  }
}
</script>

<style lang="stylus" scoped>
.box{
  width 200px
  height 200px
  background-color green
}
</style>

image

3.动画结构

TweenMax.to(target,duration,vars)

**从当前状态过渡到指定状态 vars **

target             //动画目标对象 
duration           //动画持续时间，单位秒
vars               //动画参数（CSS属性、延迟、重复次数等） 

new TweenMax(box,3,{    //从当前状态过渡到右移600px并且透明度到0.4
  x:600,
  alpha:0.4
})

image

TweenMax.from(target,duration,vars)

从指定状态 vars 过渡到初始状态

new TweenMax(box,3,{     //从右移600px并且透明度到0.4过渡到初始状态
  x:600,
  alpha:0.4
})

image

TweenMax.fromTo(target,duration,vars1,vars2)

**从指定状态 vars1 过渡到结束以后的状态 vars2 **

• vars1 初始动画参数（CSS属性、延迟、重复次数等）
• vars2 结束以后的动画参数（CSS属性、延迟、重复次数等）

new TweenMax.fromTo(box,3,{    //往右移动500px，并且透明度从0.2到1
  x:0,
  alpha:0.2
},{
  x:500,
  alpha:1
})

• TweenMax.staggerTo(target,duration,vars,stagger,onCompleteAll,onCompleteAllParams,onCompleteAllScope)

从当前状态过渡到指定状态 vars ,与 to() 不同的是它可以完成多个目标对象的过渡，并且多了四个全新的参数

同时还有两个类似的方法为 staggerFrom() , staggerFromTo() 同理，后面不再赘述

target                //动画目标对象，可以有多个，以数组方式传入 
stagger               //每个动画的起始时间间隔
onCompleteAll         //当所有显示对象都完成动画后要调用的函数
onCompleteAllParams   //onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope    //onCompleteAll函数的作用域，this指向

tips:HTML中写了多个<div class="box" ref="box"></div>

new TweenMax.staggerFromTo('.box',3,{
  x:0,
  alpha:0.2
},{
  x:500,
  alpha:1
},1)

image

• TweenMax.delayedCall(delay,callback,params,scope,useFrames)

设置 delay 秒以后触发一个回调函数，有点setTimeout的感觉

delay             //要延迟的秒数（或帧数，如果设置了useFrames:true）
callback          //要延迟执行的回调函数
params            //传递给onComplete函数的参数，以数组形式传入
scope             //函数的作用域，this的指向，默认为空
useFrames         //设定延迟的时间模式是基于秒数还是帧数 ，默认false：秒

new TweenMax.delayedCall(3,(params1,params2)=>{
  console.log(params1 + params2)
},['8854','jack'])              //3秒以后控制台输出 8854jack

• TweenMax.set(target,vars)

立即设置目标的属性值而不产生过渡动画，相当于0的动画时间

new TweenMax.set('.box',{      //没有任何过渡动画，小方块直接变红
  backgroundColor:'red'
})

文末总结

本文大致罗列了在 vue 中如何使用 GSAP ，以及它的动画结构，个人理解就是用的最多的基础调用方式，接下来作者还将继续学习后面的内容