使用GSAP创建惊艳的动画效果(一)

目录

  • GSAP简介
  • GSAP的语法
    • 方法
    • 目标
    • 变量
      • transform(变换)
      • 其它属性
  • vue中使用GSAP
    • 安装GSAP
    • 引用GSAP
    • 使用GSAP

GSAP简介

  1. GSAP是一个非常流行的js动画库,被广泛用于创建跨浏览器和跨平台的高性能动画。它的主要特点包括:
  • 提供丰富的属性和方法,可用于创建复杂的动画效果。
  • 兼容各种浏览器和设备,确保动画在不同环境下保持一致性。
  • 提供流畅的动画效果,避免了常见的卡顿和闪烁问题。
  • 具有强大的可定制性,可以根据项目需求进行个性化的动画设计。

GSAP的语法

GSAP语法由三部分组成,分别是方法、目标和变量,其调用格式为gsap.to( “.box” ,{ x:200 })各部分含义如下图所示:
使用GSAP创建惊艳的动画效果(一)_第1张图片

方法

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

使用GSAP创建惊艳的动画效果(一)_第2张图片
2. gsap.from():与gsap.to()类似,但是它从指定的属性值开始过渡到当前属性值。

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

使用GSAP创建惊艳的动画效果(一)_第3张图片
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创建惊艳的动画效果(一)_第4张图片

目标

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

  1. 使用类或ID选择器指定目标
gsap.to(".box", { x: 200 });
  1. 使用复杂的css选择器指定目标
gsap.to("section > .box", { x: 200 });
  1. 使用变量指定目标
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })
  1. 使用数组指定目标
let square = document.querySelector(".square");
let circle = document.querySelector(".circle"); 
gsap.to([square, circle], { x: 200 })

变量

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

transform(变换)

在CSS中,如果我们需要实现transform效果,需要这样写:
transform: rotate(360deg) translateX(10px) translateY(50%);
但是,在GSAP中使用transform非常简单,上面的CSS代码在GSAP中我们只需要这样写就可以了
{ rotation: 360, x: 10, yPercent: 50 }

GSAP CSS 说明
x:100 transform: translateX(100px) 水平移动(以像素或SVG单位)
y:100 transform: translateY(100px) 垂直移动(以像素或SVG单位)
xPercent: -50 transform: translateX(-50%) 水平移动(元素宽度的百分比)
yPercent: -50 transform: translateY(-50%) 垂直移动(元素宽度的百分比)
rotation: 360 transform:rotate(360deg) 旋转(角度)
scale: 2 transform: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度
使用GSAP创建惊艳的动画效果(一)_第5张图片

其它属性

属性 说明
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,
});

使用GSAP创建惊艳的动画效果(一)_第6张图片

vue中使用GSAP

安装GSAP

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

npm install gsap
或者
yarn add gsap

引用GSAP

使用import引入GSAP
import { gsap } from 'gsap'

使用GSAP

  1. 首先在模板中定义一个div
  2. style中设置样式
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
  1. 在script中调用GSAP方法
 gsap.to('.box', { 
      x: 200,
      y: 200,
      opacity: 0.5,
      rotation: 180, // 旋转角度 
});

运行代码,刷新浏览器,可以看到动画已经实现了
使用GSAP创建惊艳的动画效果(一)_第7张图片
好了,关于GSAP库的应用今天就先到这里,小伙伴们有疑问可以评论区留言,咱们下次聊

你可能感兴趣的:(JavaScript,javascript,vue.js,动画)