gsap 补间动画插件让动画效果更流程

js yekong 1255℃

在vue项目开发中,我们除了可以通过wowjs来给页面增加动画效果外,也可以通过使用gsap补间动画来让页面元素动起来。

安装依赖

npm install gsap

使用

// typical import
import gsap from "gsap";

// 引入其他插件
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

// 注册插件
gsap.registerPlugin(ScrollTrigger, Draggable, Flip); 

设置动画

从上往下动画
从上往下动画

通过gsap实现让div从上往下移动效果

gsap.to('.header', {duration: 1, y: 78})

gsap动画完成后回调

使用onComplete监听结束事件

gsap.to('.divBox', {
  duration: 1, x: 78, onComplete: () => {
    console.log('动画完成')
  }
})

gsap动画开始回调

使用onStart监听开始事件

gsap.to('.divBox', {
  duration: 1, x: 78,
  onStart: () => {
    console.log('动画开始')
  }
})

设置gsap动画次数

使用repeat控制重复次数,使用-1就是一直循环。

gsap.to('.divBox', {
  duration: 1, x: 78, repeat: 2
})

设置gsap动画往返

通过yoyo来实现往返运动

gsap.to('.divBox', {
  duration: 1, x: 78, repeat: 2, yoyo: true,
})

设置gsap动画延迟

通过delay来设置延迟执行比如延迟2秒delay:2

gsap.to('.divBox', {
  duration: 1, x: 78, repeat: 2, delay: 2
})

暂停gsap动画

通过pause来控制gsap的动画暂停

var animate1 = gsap.to('.divBox', {
  duration: 1, x: 78, repeat: -1, delay: 2, yoyo: true, onComplete: () => {
    console.log('动画完成')
  },
  onStart: () => {
    console.log('动画开始')
  }
})
window.addEventListener('dblclick', () => {
  animate1.pause()
})

恢复gsap动画

通过isActive来监听动画是否执行,通过resume来控制动画恢复

var animate1 = gsap.to('.divBox', {
  duration: 1, x: 78, repeat: -1, delay: 2, yoyo: true, onComplete: () => {
    console.log('动画完成')
  },
  onStart: () => {
    console.log('动画开始')
  }
})
window.addEventListener('dblclick', () => {
  if (animate1.isActive()) {
    animate1.pause()
  } else {
    animate1.resume()
  }
})

gsap.to(targets, vars)

从初始位置(或状态)到目标位置(或状态)的动画
targets: 产生动画的对象
vars: 目标状态参数
当前的位置移动到100的位置

gsap.to("div", {
  duration: 5,
  x: 100
});

gsap.from(targets, vars)

从设置位置(或状态)到初始位置(或状态)的动画
targets: 产生动画的对象
vars: 设置状态参数
从100的位置移动到初始位置

gsap.from("div", {
  duration: 5,
  x: 100
});

gsap.fromTo(targets, vars, vars)

从开始位置(或状态)到结束位置(或状态)的动画
targets: 产生动画的对象
vars(第1个): 开始状态参数
vars(第2个): 结束状态参数

gsap.fromTo("div", {
  x: 100
},{
  duration: 5,
  x: 300
});

targets

设置动画的对象,可以是“.class”、“id”等选择器文本(GSAP内使用document.querySelectorAll(), 具体可参考该用法),也可以是对元素、泛型对象甚至对象数组。

vars

包含要设置动画的所有属性/值的对象,以及任何特殊属性,如ease、duration、delay或onComplete(如下所列)。

callbackScope

用于所有回调(onStart、onUpdate、onComplete等)的范围(this句柄)。
在所有回调中this默认指向该tween。若设置callbackScope ,this则指向该设置对象。

data

将任意数据赋给该属性(字符串或对象引用等),以便可以在任何地方tween.data访问该数据。

delay

动画开始前的延迟量(秒)。

duration

动画持续的时间(秒)。默认值:0.5。

ease

动画的运动方式。比如“elastic”(弹性), “strong.inOut”(强烈的先快后慢)等,默认值:“power1.out”(渐缓)

id

为tween实例分配id(可选),以便之后使用gsap.getById()来获取该tween。

gsap.to("div", {
  id: "myTween",
  duration: 2,
  x: 100
})

gsap.getById("myTween")

immediateRender

通常在不设置delay(延迟)的情况下,tween会在下一帧进行渲染,如果设置为true, 将会强制它在实例化时立即呈现。默认值:false。
由于gsap.from和gsap.fromTo 他们需要从一个状态开始运动,初始状态需要在实例化时立即渲染呈现。所以在它们的fromvars 中immediateRender是默认为true, 而在gsap.to的vars中默认为false。
当immediateRender为false时,不立即渲染到起始位置,而等到2秒延迟后,才从起始位置开始运动。 而设置true时,则在实例化时就立即渲染到起始位置。

gsap.from("div", {
  delay: 2,
  x: 500,
  immediateRender: false
})

inherit

通常tween的属性从其所属timeline的defaults继承而来,但是可以通过设置inherit:false来禁止继承, 具体可参考gsap.defaults详解

lazy

当tween第一次渲染并读取其初始值时,GSAP将尝试延迟值的写入,直到当前的tick(更新循环)的最后再进行写入,这样可以提高性能。因为它避免了浏览器读/写/读/写的频繁操作,这种频繁的操作会极大的消耗性能并造成布局抖动。设置lazy:false便禁用这种延迟渲染,但是不建议禁用。默认值:true。

onCompleteParams

传递给onComplete函数的参数数组

gsap.to("div", {
  x: 500,
  onComplete: complete,
  onCompleteParams: [2, "str"]
})

function complete(i, str){
  //i = 2, str = "str"
}

onRepeat

当动画重复时调用的函数。需要设置repeat(大于0)才会有效。

onRepeatParams

传递给onRepeat 函数的参数数组。

onReverseComplete

当动画从反方向再次达到开始位置时要调用的函数。需要设置reversed: true

onReverseCompleteParams

传递给onReverseComplete函数的参数数组。

onStart

动画开始时要调用的函数。

onStartParams

传递给onStartParams函数的参数数组。

onUpdate

每次动画更新时(每帧)调用的函数。

onUpdateParams

传递给onUpdate函数的参数数组。

overWrite

如果设置true, 该对象的其他动画(任何属性)就会被停止;如果设置auto,只会停止其他动画的相关属性动画;如果false,则不停止任何动画,最后呈现的动画效果是各个动画相互作用的结果。 默认值:false

gsap.to("div", {
  x: 500,
  y: 500
})

gsap.to("div", {
  x: 300,
  overwrite: false,
})

如果设置false(或不设置),2个动画都正常运行,div的x值是2个动画相互作用的结果。
如果设置true, 直接会停止第一个动画(x,y的动画都会被停止),最终呈现的是x运动到300,而y没有变化(不会运动到500)。
如果设置auto, 只会停止第一个动画的x动画,对于y的动画不受影响,最终呈现的是x运动到300,y运动到500。

paused

如果设置true,动画将在创建时立即暂停。默认值:false

let tween = gsap.to("div", {
  x: 500,
  paused: true
});
tween.play();

repeat

设置动画重复的次数。 设置1为重复两次, 默认值:0。设置-1为无限重复。

repeatDelay

每次动画重复之间等待的时间(秒)。默认值:0

repeatRefresh

设置true 会导致重复的动画失效,因为每次完成一次后,会重新更新其开始和结束值。如果属性使用的动态值(随机或函数),会得到特别的动画效果。默认值:false。
从0位置向右运动500,重复5次

gsap.to("div", {
  x: 500,
  repeat: 5
});

如果设置repeatRefresh:true后则看起来只会重复一次。因为每次重复都会重新更新开始和结束值,第2次重复时起始值更新为500,结束值也是500。所以第2次到第5次位置未发生任何变化。

gsap.to("div", {
  x: 500,
  repeat: 5,
  repeatRefresh: true
});

reversed

如果设置true,动画将调转方向超其开始方向移动。由于开始已经是初始位置,设置true后动画将显示为暂停。默认值:false。

gsap.to("div", {
  delay: 2,
  duration: 2,
  x: 500,
  onComplete: function(){
    this.reversed(true);
  }
});

runBackwards

如果设置true, 动画将翻转其起始值和结束值,但对于ease不会反转。可以通过设置true将gsap.to 转换为gsap.from。默认值:false。

gsap.to("div", {
  x: 500,
  runBackwards: true,
});

stagger

如果是多个动画目标,可以通过设置类似stagger:0.1(每个目标动画开始之间间隔0.1秒)来错开每个动画。或可以设置参数对象来实现更高级的动画效果,具体参考staggers详解。

所有的div都向右移动500,每个div间隔0.2秒开始移动。

gsap.to("div", {
  x: 500,
  stagger: 0.2
});

startAt

定义任何属性的起始值(即便它们没有设置动画)。

gsap.to("div", {
  x: 500,
  startAt: {
    y: 500,
    alpha: 0.5
  }
});

yoyo

如果设置true,则每隔一次的重复都将以反方向的方向运动,动画呈现来回运动的效果。单次运动无效,需要配合repeat使用。默认值:false。

gsap.to("div", {
  x: 500,
  repeat: 5,
  yoyo: true
});

yoyoEase

允许你改变yoyo过程中的ease。可以指定特定的ease(例如:“power2.in”),可以设置true来翻转原本的ease。默认值:false。 另外:启动了该属性后,yoyo会自动设置true。

如果不设置yoyoEase:true,yoyo过程应该是逐渐加快,设置后原本的ease进行了翻转,变为逐渐减慢。

gsap.to("div", {
  x: 500,
  repeat: -1,
  yoyoEase: true
});

yoyo过程设置了一个弹性的ease

gsap.to("div", {
  x: 500,
  repeat: -1,
  yoyoEase: "elastic"
});

keyframes

对同一对象的一连串的动画(关键帧动画)。和一连串的gsap.to等效。使用帧动画实现环绕效果
沿x轴向右运动100,停顿1秒,再沿x轴向右运动到200的位置,同时y轴运动到200。

gsap.to("div", {
  keyframes: [
    {
      x: 100
    },
    {
      delay: 1,
      x: 200,
      y: 200
    }
  ]
});

Function类型

通过使用function类型参数来实现更复杂的动画效果。

每个div的运动的y值不同,按顺序依次多100。第一个div运动到{x:100, y:0}的位置,第2个div运动到{x:100,y:100}的位置,第3个div运动到{x:100,y:200}的位置,依次类推。

gsap.to("div", {
  x: 100,
  y: function(index, target, targets){
    return index * 100;
  }
});

偶数索引的div沿y轴运动100,其他div则y保持不变。

index: 当前运动对象的索引
target:当前运动对象
targets: 全部运动对象的数组

gsap.to("div", {
  x: 100,
  y: function(index, target, targets){
    return index % 2 === 0 ? 100 : 0;
  }
});

当前内容为观看threejs视频教程 Three.js可视化企业实战WEBGL课 课程-Gsap动画库基本使用与原理-学习并自行扩展笔记

补间动画实现效果

gsap 补间动画4个角向中间汇聚的效果

gsap补间动画环绕运行效果

gsap 补间动画列表环绕旋转动画效果

vue3 线条延伸效果动画

vue 使用补间动画实现switch开关

gsap 实现水罐页面上升效果实例

vue3 数据可视化大屏弹窗组件效果实例

喜欢 (0)