首页 技术设计 前端 threejs

为什么 选择 GSAP

  • GSAP 是一个老牌框架，但也在持续更新，兼容性很好
  • 与框架无关，比如 framer-motion，react spring 只能用于 react；这里有多个框架的 starter
  • 心智负担低，易于上手，它的核心理念就是以时间轴（Timeline）为维度的补间动画（Tween），在文章后面会聊一下，然后还有各种强大的插件，如 scrollTrigger
  • 经过时间的沉淀，在 react 中使用提供了简便的 react api，比如自带动画清理的useGSAP

GSAP简介

GSAP是一个非常流行的js动画库，被广泛用于创建跨浏览器和跨平台的高性能动画。它的主要特点包括：

  • 提供丰富的属性和方法，可用于创建复杂的动画效果。
  • 兼容各种浏览器和设备，确保动画在不同环境下保持一致性。
  • 提供流畅的动画效果，避免了常见的卡顿和闪烁问题。
  • 具有强大的可定制性，可以根据项目需求进行个性化的动画设计。

GSAP的语法

GSAP语法由三部分组成，分别是方法、目标和变量，其调用格式为gsap.to( “.box” ,{ x:200 })各部分含义如下图所示：

  • to: 方法
  • .box：目标
  • { x:200 }： 变量

一、方法

GSAP提供了四种类型的Tween方法，“Tween”（补间动画）是GSAP的核心概念。Tween是指在一段时间内逐渐改变元素的属性值，从而实现平滑的动画效果。

1.gsap.to()

这是GSAP中最常用的方法之一，用于从当前属性值过渡到目标属性值。可以指定动画的持续时间、延迟时间、缓动函数等参数。

gsap.to('.box', {
        x: 200,
        y: 100,
        duration: 1,
        repeat: 2,
        yoyo: true,
        delay: 0.5,
        ease: 'power1.out',
 });

2.gsap.from()

与gsap.to()类似，但是它从指定的属性值开始过渡到当前属性值。

  gsap.from('.box', {
        opacity: 0,
        duration: 1,
        delay: 0.5,
        ease: 'power2.inOut',
  });

3.gsap.set()

用于将元素的属性值设置为指定的值，没有动画效果。

4. gsap.fromTo()

结合gsap.from()和gsap.to()的功能，可以同时设置起始值和目标值，实现更复杂的动画效果。

  gsap.fromTo('.box',
        {
          opacity: 0,
          x: -100,
        },
        {
          opacity: 1,
          x: 100,
          duration: 1,
          delay: 0.5,
          ease: 'power3.inOut',
        }
);

二、目标

目标是我们想要赋予动画效果的元素，在使用GSAP动画库时，我们需要指定那个元素要实现动画效果；在GSAP的内部，它封装了document.querySelectorAll()方法，因此我们可以使用类似”.class”和”#id”选择器来指定目标。也可以传入一个变量，甚至是一个数组来指定目标。

1.使用类或ID选择器指定目标

gsap.to(".box", { x: 200 });

2.使用复杂的css选择器指定目标

gsap.to("section > .box", { x: 200 });

3.使用变量指定目标

let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

4.使用数组指定目标

let square = document.querySelector(".square");
let circle = document.querySelector(".circle"); 
gsap.to([square, circle], { x: 200 })

三、变量

变量于存储和操作动画的属性值，它是一个对象，包含了有关动画的所有信息；包括transform、repeat、yoyo、delay、ease、stagger等各种动画属性；

1.transform(变换)

在CSS中，如果我们需要实现transform效果，需要这样写：

transform: rotate(360deg) translateX(10px) translateY(50%);

但是，在GSAP中使用transform非常简单，上面的CSS代码在GSAP中我们只需要这样写就可以了

{ rotation: 360, x: 10, yPercent: 50 }
GSAPCSS说明
x:100transform: translateX(100px)水平移动（以像素或SVG单位）
y:100transform: translateY(100px)垂直移动（以像素或SVG单位）
xPercent: -50transform: translateX(-50%)水平移动（元素宽度的百分比）
yPercent: -50transform: translateY(-50%)垂直移动（元素宽度的百分比）
rotation: 360transform:rotate(360deg)旋转（角度）
scale: 2transform:scale(2, 2)缩放
transformOrigin: “0% 100%”transform-origin: 0% 100%;平移的中心点，这将围绕左下角旋转

示例：

 gsap.to(box.value, {
      duration: 1,
      x: 200,
      y: 200,
      opacity: 0.5,
      rotation: 180, // 旋转角度 
    });

上面的代码使box元素在x方向移动200px，y方向移动200px，同时改变透明度为0.5，旋转180度·。

2.其它属性

属性说明
duration动画的持续时间（秒）默认值：0.5
delay动画开始之前的延迟时间（秒）
repeat动画重复的次数
yoyo如果为true，则在每次重复时，Tween将以相反的方向运行（类似于摇摆效果）。默认值：false
stagger每个目标动画之间的时间间隔（以秒为单位）（如果提供了多个目标）
ease控制动画过程中的变化速率，默认值为”power1.out”
onComplete当动画完成时运行的函数。

示例

gsap.to(".box", { 
  rotation: 360,
  x: '100vw',
  xPercent: -100, 
  duration: 2,  
  repeat: 2, 
  yoyo: true,
});

vue中使用GSAP

安装GSAP

要在vue中使用GSAP，我们需要先安装GSAP包

npm install gsap
# 或者
yarn add gsap

引用GSAP

使用import引入GSAP

import { gsap } from 'gsap'

使用GSAP

1.首先在模板中定义一个div

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

2.style中设置样式

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

3.在script中调用GSAP方法

 gsap.to('.box', { 
      x: 200,
      y: 200,
      opacity: 0.5,
      rotation: 180, // 旋转角度 
});

运行代码，刷新浏览器，可以看到动画已经实现了