阿超 > animejs简单示例

animejs简单示例

2025-02-27

前端

乖孩子的路，疯子的路，五彩的路，浪荡子的路，任何的路。——杰克·凯鲁亚克的《在路上》

GitHub - juliangarnier/anime: JavaScript animation engine

https://animejs.com/

使用Anime.js这个强大的JavaScript动画库来实现一个简单的动画效果。我们将通过一个示例代码来展示如何使用Anime.js使一个div元素从透明变为不透明，并且从左向右移动50像素。

示例代码

下面是我们的完整HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: black;
        }

        div {
            width: 100px;
            height: 100px;
            background: red;
            opacity: 0;
        }
    </style>
</head>
<body>
<div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<script>
    anime({
        targets: 'div',
        translateX: 50,
        loop: false,
        easing: 'easeInOutSine',
        opacity: 1,
    });
</script>
</body>
</html>

代码解析

  1. HTML结构：

    • 我们创建了一个基本的HTML文档，包含一个div元素。这个div元素将是我们应用动画的目标。

  2. CSS样式：

    • 我们将body的背景设置为黑色，这样可以更好地突出我们的动画效果。
    • div元素被设置为100x100像素的红色方块，初始的opacity（不透明度）被设为0，这意味着它在页面加载时是不可见的。

  3. 引入Anime.js：

    • 通过一个CDN链接，我们引入了Anime.js库。这使我们能够使用Anime.js提供的所有动画功能。

  4. JavaScript动画：

    • 在<script>标签内，我们调用anime函数来创建一个动画效果。
    • targets属性指定了我们要应用动画的元素，这里是div。
    • translateX属性设置了元素在X轴上移动的距离，这里是50像素。
    • loop属性设置为false，表示动画不会循环播放。
    • easing属性定义了动画的过渡效果，这里我们使用了easeInOutSine，它提供了一个平滑的开始和结束。
    • opacity属性被设置为1，这意味着动画结束时div将完全可见。

运行效果

当你在浏览器中打开这个HTML文件时，你会看到一个红色方块从左向右移动50像素，并且从完全透明变为完全可见。这个简单的示例展示了Anime.js的基本用法，但它可以实现的动画远不止这些。

结论

Anime.js是一个非常强大的动画库，使用它可以轻松地创建各种复杂的动画效果。在这篇博客中，我们仅仅展示了一个简单的示例，希望能够帮助你入门。如果你对Anime.js感兴趣，不妨访问它的官方文档了解更多高级用法。