Vue 3 + GSAP:解锁高性能动画的神奇组合

news2024/12/23 0:01:45

在一个偶然的场景使用了 GSAP(GreenSock Animation Platform),感觉挺好玩的,在此浅浅记录一下。

GSAP 是一个功能强大的 JS 动画库,常用于创建高性能、流畅的动画。它不仅支持基本的动画,还提供了时间轴控制、缓动效果等高级功能。将其与 Vue 3 结合,可以轻松给 Vue 组件添加复杂的动画效果。

1. 安装 GSAP

首先,需要在 Vue 3 项目中安装 GSAP。

npm install gsap

注意📢,在 VSCode 中安装,如果当前项目的终端下载失败的话,那就使用全局终端下载执行。  

2. 在 Vue 3 中使用 GSAP

2.1 基本动画

在 Vue 3 组件中,可以通过 onMounted 钩子进行元素的动画初始化。

举个 🌰:对一个简单的方块元素,应用移动和缩放动画。

<template>
  <div ref="box" class="box"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const box = ref(null);
    onMounted(() => {
      gsap.to(box.value, { x: 300, scale: 1.5, duration: 5 });
    });
    return { box };
  },
};
</script>
<style>
.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  border-radius: 4px;
}
</style>

在这个例子中,gsap.to 方法将 box 元素移动 300px 并放大了1.5 倍,动画持续 5 秒。

2.2 结合 Vue 的生命周期

在 Vue 3 中,GSAP 可以与组件的生命周期钩子紧密结合。

举个 🌰:在 onMounted 钩子中初始化动画,在 onBeforeUnmount 钩子中清理动画。

<template>
  <div ref="box" class="box"></div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const box = ref(null);
    let animation = null;
    onMounted(() => {
      animation = gsap.to(box.value, { x: 300, rotation: 360, duration: 2 });
    });
    onBeforeUnmount(() => {
      if (animation) {
        animation.kill(); // 在组件销毁前终止动画
      }
    });
    return { box };
  },
};
</script>

效果如下:小方块向右移动的同时旋转 360 度,整个过程持续 2 秒。 

 2.3 使用时间轴动画

GSAP 的时间轴功能,允许我们将多个动画组合在一起,并精确控制它们的执行顺序。时间轴是动画的一个容器,可以更加有条理的组织动画。

举个 🌰

<template>
  <div class="container">
    <div ref="box1" class="box"></div>
    <div ref="box2" class="box"></div>
    <div ref="box3" class="box"></div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';

export default {
  setup() {
    const box1 = ref(null);
    const box2 = ref(null);
    const box3 = ref(null);
    onMounted(() => {
      const timeline = gsap.timeline({ repeat: -1, yoyo: true });
      timeline
        .to(box1.value, { x: 300, duration: 1 })
        .to(box2.value, { x: 300, duration: 1 })
        .to(box3.value, { x: 300, duration: 1 });
    });
    return { box1, box2, box3 };
  },
};
</script>

解释一下属性:

1、repeat:-1,表示时间线将无限循环执行。如果设置 repeat:2,表示动画将重复 2 次(注意📢:重复 2 次,一共执行 3 次)。

2、yoyo:true:表示动画完成一遍后会反向播放(从结束状态回到初始状态),再继续循环。这种效果通常用于实现来回摆动或反复变化的动画。

在这个例子中,三个小方块会依次向右移动 300px,动画完成后,会反向移动到初始位置,并且该过程无限循环。

也可以让某一个小方块额外进行某一个操作,比如说,第一个方块移动完成后,旋转 360 度,第二个小方块再继续执行。

import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';

export default {
  setup() {
    const box1 = ref(null);
    const box2 = ref(null);
    const box3 = ref(null);
    onMounted(() => {
      const timeline = gsap.timeline({ repeat: -1, yoyo: true });
      timeline
        .to(box1.value, { x: 300, duration: 1 })
        .to(box1.value, { rotation: 360, duration: 1 })
        .to(box2.value, { x: 300, duration: 1 })
        .to(box3.value, { x: 300, duration: 1 });
    });
    return { box1, box2, box3 };
  },
};

2.4 动态控制动画

GSAP 允许我们在运行时,动态控制动画,比如暂停、恢复、反转等。可以通过引用动画实例进行控制。

举个 🌰

<template>
  <div ref="box" class="box"></div>
  <button @click="toggleAnimation" class="btn">Toggle Animation</button>
</template>
<script>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const box = ref(null);
    let animation = null;
    let isPaused = false;
    onMounted(() => {
      animation = gsap.to(box.value, { x: 300, rotation: 360, duration: 2 });
    });
    const toggleAnimation = () => {
      if (isPaused) {
        animation.resume();
      } else {
        animation.pause();
      }
      isPaused = !isPaused;
    };
    return { box, toggleAnimation };
  },
};
</script>

点击按钮可以暂停和恢复动画,这个功能对于用户交互时控制动画非常有帮助。

3. 结合 Vue 3 的 Transition 组件

Vue 3 自带的 Transition 组件可以与 GSAP 结合使用,它能够在元素进入和离开时应用动画效果。

举个 🌰

<template>
  <button @click="show = !show">Toggle Box</button>
  <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="show" class="box"></div>
  </transition>
</template>

<script>
import { ref } from 'vue';
import { gsap } from 'gsap';
export default {
  setup() {
    const show = ref(false);
    // 在元素进入动画开始之前执行
    const beforeEnter = (el) => {
      // 设置元素的初始状态,透明度为 0,y 轴位置上移 100px,这样在动画开始前,元素是不可见并且在最终位置的上方
      gsap.set(el, { opacity: 0, y: -100 });
    };
    // 在元素进入时执行
    const enter = (el, done) => {
      // onComplete: done,表示动画已经结束
      gsap.to(el, { opacity: 1, y: 0, duration: 0.5, onComplete: done });
    };
    // 在元素离开时执行
    const leave = (el, done) => {
      gsap.to(el, { opacity: 0, y: 100, duration: 0.5, onComplete: done });
    };
    return { show, beforeEnter, enter, leave };
  },
};
</script>

在这个示例中,beforeEnter、enter 和 leave 钩子用于在元素进入和离开时应用 GSAP 动画,Vue 3 的 Transition 组件用于包裹需要动画效果的元素。

4. 总结

GSAP 在 Vue 3 中的使用非常灵活且强大。通过与 Vue 3 的组合,可以在实际应用中实现复杂且高效的动画效果。

若是大家感兴趣的话,可以动手复制代码随意改动尝试一下,非常好玩!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2080239.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot日常:集成代码覆盖率测试工具JaCoCo

文章目录 简介开始集成1、pom添加依赖2、pom添加插件3、业务代码4、单元测试代码5、开始测试6、查看结果 如何排除不需要的路径&#xff1f;设置覆盖率目标并验证JACOCO的不足JACOCO改进版super-Jacoco代码覆盖率的知识扩展 简介 JaCoCo&#xff08;Java Code Coverage&#x…

一把手告诉你联盟营销白帽电商广告借力NewsBreak头条优势

揭秘美国NewsBreak头条新闻推广联盟营销白帽电商广告优势 在当今数字化浪潮中&#xff0c;电商行业竞争日益激烈&#xff0c;各大平台纷纷寻求创新的推广方式以吸引更多商家入驻并提升用户购物体验。NewsBreak&#xff0c;作为美国一款领先的新闻聚合平台&#xff0c;凭借其庞…

静态代理与动态代理的区别与选择

在当今软件开发领域&#xff0c;代理模式作为一种重要的设计模式&#xff0c;广泛应用于增强现有对象功能、控制访问权限以及实现远程调用等场景。本文旨在深入探讨静态代理与动态代理之间的核心区别&#xff0c;帮助开发者理解两者在实现机制、灵活性、性能表现及适用场景上的…

HTML静态网页成品作业(HTML+CSS)——西点蛋糕介绍(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有5个页面。 二、作品演示 三、代…

MyBatis缓存机制 ▎特殊符号处理

前言: MyBatis 的缓存机制通过一级缓存和二级缓存显著提升系统性能。一级缓存在 SQL 会话中减少重复查询&#xff0c;二级缓存跨会话共享查询结果&#xff0c;但引入了数据一致性和内存管理的挑战。开发者需平衡性能与数据准确性。此外&#xff0c;MyBatis 还提供了多种方法来…

力扣经典题目之->二叉树的前序遍历

一&#xff1a;题目 解释&#xff1a; 1&#xff1a; 题目的要求就是我们return 一个数组&#xff0c;该数组里面的元素及其顺序就是 前序遍历二叉树 的元素及其顺序 比如&#xff1a;示例1的树&#xff0c;前序遍历的顺序应该是1 2 3&#xff0c;那么return 的数组里面的元素…

Java面试题--JVM大厂篇之JVM大厂面试题及答案解析(8)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的博…

Linux开发环境搭建,虚拟机安装

开发环境搭建 一、VMware Workstation Pro软件简介 VMware Workstation Pro 是 VMware &#xff08;威睿公司&#xff09;发布的一代虚拟机软件&#xff0c;中文名称一般称 为 "VMware 工作站 ". 它的主要功能是可以给用户在单一的桌面上同时运行不同的操作系统…

安装WMware和Ubuntu并使用xShell连接

0、我的电脑配置 设备名称 hello 处理器 Intel(R) Core(TM) i7-10700K CPU 3.80GHz 3.79 GHz 机带 RAM 16.0 GB (15.9 GB 可用) 设备 ID 541EC230-9910-418C-9043-5FBBF8ED320C 产品 ID 00330-80000-00000-AA846 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可…

秃姐学AI系列之:残差网络 ResNet

目录 残差网络——ResNet 残差块思想 ResNet块细节 ResNet架构 总结 代码实现 残差块 两种 ResNet 块的情况 ResNet 模型 QA 由上图发现&#xff0c;只有当较复杂的函数类包含较小的函数类时&#xff0c;才能确保提高它们的性能。 对于深度神经网络&#xff0c;如果…

QGIS制图流程

在之前我们推送了QGIS的软件安装、插件安装、数据导入等基础操作&#xff0c;今天我们介绍一下QGIS的制图功能。QGIS的制图与ArcGIS Pro存在一定的区别&#xff0c;但是思路上相似。我们教程内容主要是参考QGIS官方文档&#xff1a; https://docs.qgis.org/3.34/en/docs/user_…

Android 中ebpf 的集成和调试

1. BPF 简介 BPF&#xff0c;是Berkeley Packet Filter的简称&#xff0c;最初构想提出于 1992 年。是一种网络分流器和数据包过滤器&#xff0c;允许早操作系统级别捕获和过滤计算机网络数据包。它为数据链路层提供了一个原始接口&#xff0c;允许发送和接收原始链路层数据包…

安卓中回调函数的使用

在Android开发中&#xff0c;回调函数是一种常见的编程模式&#xff0c;用于在某个任务完成时异步接收通知或数据。它们通常用于处理用户界面事件、完成网络请求、数据库操作或其他长时间运行的任务。回调&#xff08;Callback&#xff09;是一种允许某段代码通知另一段代码执行…

机器人学——机械臂轨迹规划-2

直线轨迹 线段转折点速度不连续 加速度状态讨论 double dot 多段直线轨迹&#xff0c;转折点利用二次方程转为圆弧 关键步骤 第一个线段处理 Vt V0 at , 此处的V0 0 , 利用函数连续性&#xff0c;左右速度相等&#xff0c;联立求解 sgn(x):符号函数 最后一个线段…

dubbo:dubbo服务负载均衡、集群容错、服务降级、服务直连配置详解(五)

文章目录 0. 引言1. dubbo负载均衡1.1 负载均衡算法1.2. dubbo负载均衡使用1.3 自定义负载均衡策略 2. dubbo服务容错2.1 8种服务容错策略2.2 自定义容错策略 3. dubbo服务降级&#xff08;mock&#xff09;4. dubbo服务直连5. 总结 0. 引言 之前我们讲解了dubbo的基本使用&am…

内部类java

内部类就是定义在一个类里面的类&#xff0c;里面的类可以理解成&#xff08;寄生&#xff09;&#xff0c;外部类可以理解成&#xff08;寄主&#xff09;。 //外部类 public class people{//内部类public class heart{} } 内部类的使用场景、作用 1.当一个事物的内部&…

STM32学习笔记3---ADC,DMA

目录 ADC模拟数字转换器 规则组的四种转换模式 AD单通道 AD多通道 常用代码函数相关 DMA直接存储器 存取&#xff08;访问&#xff09; 两个应用 DMA存储器到存储器的转运 ADCDMA ADC模拟数字转换器 stm32数字电路&#xff0c;只有高低电平&#xff0c;无几V电压的概念…

MySQL:常用函数

MySQL&#xff1a;常用函数 日期时间函数字符串函数数学函数加密函数 在MySQL中&#xff0c;存在许多现成的函数&#xff0c;可以简化部分操作&#xff0c;本博客讲解MySQL中的常用函数。 日期时间函数 current_date current_date函数用于输出当前的日期&#xff1a; curren…

一道关于php文件包含的CTF题

一、源码 这是index.php的页面。 点击login后会发现url里多了action的参数&#xff0c;那么我们就可以通过它来获取源码。 ?actionphp://filter/readconvert.base64-encode/resourcelogin.php 再通过base64的解码可以查看源码。 index.php源码&#xff1a; <?php erro…

【编码解码】CyberChef v10.18.9

下载地址 【编码解码神器】CyberChef v10.18.9 在线地址 CyberChef (gchq.github.io) 简介 CyberChef 是一个简单易用的网页应用&#xff0c;&#xff0c;包含了四百多种在线编解码工具。它在浏览器中执行各种“网络安全”操作。这些操作包括简单的 XOR 和 Base64 编码、复…