前端动画库 Anime.js 的V4 版本,兼容 Vue、React

最新推荐文章于 2025-05-20 11:57:34 发布

东锋17

最新推荐文章于 2025-05-20 11:57:34 发布

阅读量740

点赞数 9

分类专栏： vue.js 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_73376107/article/details/148031545

版权

vue.js 专栏收录该内容

31 篇文章

订阅专栏

前端动画库 Anime.js 更新了 V4 版本，并对其官网进行了全面更新，增加了许多令人惊艳的效果，尤其是时间轴动画效果，让开发者可以更精确地控制动画节奏。

这一版本的发布不仅带来了全新的模块化 API 和显著的性能提升，还增强了与主流前端框架（如 Vue）的兼容性。

Anime.js 简介

Anime.js 是一款轻量级、高性能的 JavaScript 动画库，凭借其简洁的 API 和强大的功能，成为前端开发者实现复杂动画的首选工具，目前在 Github 上已经获得 53.3K 的 Star✨。

它支持 CSS 属性、SVG、DOM 属性和 JavaScript 对象的动画效果，适用于从简单过渡到复杂交互动画的各类场景。

在 V4 版本中，Anime.js 引入了以下亮点：

模块化 API：每个功能都作为 ES 模块提供，使得 tree shaking 更有效，库的体积保持轻量级。
高性能：优化了动画引擎，即使在处理大量 DOM 元素时也能保持 60fps 的流畅度。
时间轴控制：改进了时间轴功能，允许开发者更精确地管理动画节奏。
新增特性：支持 CSS 变量、SVG 路径动画、滚动联动动画（Scroll-linked）以及 Additive 动画。

Anime.js 如何在 Vue 中使用

在 V4 版本中，Anime.js 已经显著优化了与 Vue 的兼容性，开发者可以直接在 Vue 项目中使用，而无需借助 Vue-Anime 插件。

安装与使用

安装 Anime.js：

   npm install animejs

在 Vue 项目中引入：

   // @ts-ignore
   import anime from 'animejs';

在 Vue 组件中使用：
- 在 mounted 生命周期中初始化动画，以确保 DOM 元素已经渲染完成。
- 示例代码：

     <template>
       <div ref="ball" class="ball"></div>
     </template>

     <script setup>
     import { ref, onMounted } from'vue';
     // @ts-ignore
     import anime from'animejs';

     const ball = ref(null);

     onMounted(() => {
       anime({
         targets: ball.value,
         translateX: 250,
         rotate: '1turn',
         backgroundColor: '#F00',
         duration: 800,
       });
     });
     </script>

     <style>
     .ball {
       width: 50px;
       height: 50px;
       background: blue;
     }
     </style>