GSAP循环动画

1.GSAP简介

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

image

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'
})

作者：辉夜真是太可爱啦
链接：https://www.jianshu.com/p/a8e150f0e569
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

GSAP循环动画