旋转 vue_Vue + GSAP 实战

最新推荐文章于 2024-08-27 19:24:41 发布

Energetic Hydra

最新推荐文章于 2024-08-27 19:24:41 发布

阅读量694

点赞数

文章标签：旋转 vue

本文链接：https://blog.csdn.net/weixin_32302013/article/details/112616407

版权

本文介绍了如何在Vue项目中结合GSAP库创建SVG动画，特别是矩形旋转效果。通过安装GSAP，了解如何在Vue组件中使用它，并探讨了如何在项目中使用GSAP的付费功能，包括从CDN获取资源和引入DrawSVGPlugin。同时，文章警告了在公开项目中使用付费插件的版权问题，并提供了CodeSandBox的演示链接。

摘要由CSDN通过智能技术生成

? Vue + GSAP 实战

在学习过基础 SVG 动画原理后，如果结合我们熟悉的技术栈使用岂不是更爽。GSAP 提供了 npm 安装包，下面我们来在 Vue 项目中集成 GSAP。

安装 GSAP

yarn add gsap -S
// or
npm i gsap -S

在 Vue 组件中使用 GSAP

假设我们让一个矩形旋转 240 度，无限循环。

<template>
  <div id="app" class="app">
    <div class="box">div>
  div>
template>

<script>import { gsap } from 'gsap'export default {
     name: 'App',
  mounted() {