Anime.js，一款灵活强大的 JavaScript 动画库

最新推荐文章于 2024-06-05 10:20:14 发布

繁华落尽Owenlee

最新推荐文章于 2024-06-05 10:20:14 发布

阅读量466

点赞数 4

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_41381554/article/details/134670163

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

嗨，大家好，我是镇长，lee。

又到了与大家见面的时间，今天分享 Anime.js 一款简单易用、灵活强大而备受欢迎的 JavaScript 动画库。本文将向小伙伴介绍Anime.js的基本概念、使用方法和一些令人惊叹的功能。

Anime.js简介

Anime.js是一款轻量级的JavaScript动画库，专注于为Web开发者提供简单直观的动画解决方案。与其他动画库相比，Anime.js具有出色的性能和强大的功能，同时提供了友好的API，使得即便是初学者也能轻松上手。

安装Anime.js

在开始使用Anime.js之前，我们需要先将其引入项目。你可以通过以下方式安装：

使用CDN

<script src="https://cdn.jsdelivr.net/npm/animejs"></script>

使用npm

npm install animejs

基本用法

一旦安装完成，我们就可以开始使用Anime.js创建动画了。以下是一个简单的例子，演示如何使用Anime.js移动一个元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/animejs"></script>
    <title>Anime.js入门</title>
</head>
<body>

    <div id="box" 
      style="width: 100px; height: 100px; background-color: #3498db;">
    </div>

    <script>
        // 使用Anime.js创建动画
        anime({
            targets: '#box',
            translateX: 250, // 在X轴上移动250个单位
            easing: 'easeInOutQuad', // 缓动函数
            duration: 1000 // 动画持续时间
        });
    </script>

</body>
</html>

这段代码将会使一个id为"box"的元素在X轴上移动250个单位，使用了缓动函数easeInOutQuad，动画持续时间为1秒。

进阶功能

1. 多属性动画

Anime.js支持同时对多个属性进行动画操作。例如，你可以让元素同时改变大小和颜色：

anime({
    targets: '#box',
    width: '200px',
    height: '200px',
    backgroundColor: '#e74c3c', 
    duration: 1000,
    loop: true, // 无限循环
});

2. 循环和反向动画

你可以通过设置loop属性实现动画的循环播放，而direction属性可以让动画反向播放：

anime({
    targets: '#box',
    translateX: 250,
    easing: 'easeInOutQuad',
    duration: 1000,
    loop: true, // 无限循环
    direction: 'alternate' // 反向播放
});

3. 回调函数

Anime.js允许你在动画完成时执行回调函数，这为你提供了更多控制的可能性：

anime({
    targets: '#box',
    translateX: 250,
    easing: 'easeInOutQuad',
    duration: 1000,
    complete: function(anim) {
        console.log('动画完成！');
    },
    begin: function(anim) {
        console.log('开始动画')
     },
    update: function(anim) {
      console.log('更新是，实时监测动画状态')
    }
});