animejs简单示例

阿超

发布于 2025-02-28 10:08:01

580

文章被收录于专栏：快乐阿超快乐阿超

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

GitHub - juliangarnier/anime: JavaScript animation engine

https://animejs.com/

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

示例代码

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

<!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>

代码解析

HTML结构：
- 我们创建了一个基本的HTML文档，包含一个div元素。这个div元素将是我们应用动画的目标。
CSS样式：
- 我们将body的背景设置为黑色，这样可以更好地突出我们的动画效果。
- div元素被设置为100x100像素的红色方块，初始的opacity（不透明度）被设为0，这意味着它在页面加载时是不可见的。
引入Anime.js：
- 通过一个CDN链接，我们引入了Anime.js库。这使我们能够使用Anime.js提供的所有动画功能。
JavaScript动画：
- 在<script>标签内，我们调用anime函数来创建一个动画效果。
- targets属性指定了我们要应用动画的元素，这里是div。
- translateX属性设置了元素在X轴上移动的距离，这里是50像素。
- loop属性设置为false，表示动画不会循环播放。
- easing属性定义了动画的过渡效果，这里我们使用了easeInOutSine，它提供了一个平滑的开始和结束。
- opacity属性被设置为1，这意味着动画结束时div将完全可见。