数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Anime.js 创建时间轴动画？
在本文中，我们将探索和学习时间轴动画。**Anime.js** 是一个轻量级的 JavaScript 库，它有一套精简但强大的 API。它作用于 DOM 属性、CSS 属性、SVG 和 JavaScript 对象。
我们可以使用 **Anime.js** 构建多个复杂的动画。Anime 内置的交错系统有助于简化复杂的后续和重叠动画。它也可以用于时间和属性。
如何使用 Anime.js？
我们可以通过以下两种方式在代码中导入或使用 Anime.js：
我们可以下载 anime.min.js 文件，并直接在项目中使用它。
我们可以使用一些开放页面网站上托管的 **anime.js CDN** 链接。使用此方法，我们无需将 Anime.js 添加到项目中，因此可以直接从外部源使用它。
Anime.js CDN 链接
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
Anime.js 中使用的一些基本属性
**targets** - 这些是用于定位或识别需要应用动画的 CSS 选择器。
**duration** - 这是动画持续时间的毫秒数。
**delay** - 这定义了动画开始之前的毫秒数。
**translateX** - 这将元素放置在 X 坐标上。
**translateY** - 这将元素放置在 Y 坐标上。
**offset** - 这给出了不同动画之间的延迟，即另一个动画在第一个动画之后开始的差异。
示例
在这个例子中，我们使用 Anime.js 提供的动画创建了一个简单的摆。
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Pendulum using Anime.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js">
</script>
<style>
#rod {
position: relative;
margin-top: 50px;
margin-left: 150px;
width: 2px;
height: 150px;
border-radius: 5px;
transform-origin: 50% 0%;
transform: rotate(60deg);
background-color: green;
}
#pivot {
position: absolute;
top: -5px;
left: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: black;
}
#ball {
position: absolute;
bottom: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
}
</style>
</head>
<body>
<div id="rod">
<div id="pivot"></div>
<div id="ball"></div>
</div>
<script>
let animation = anime({
targets: '#rod',
rotate: [60, -60],
duration: 3000,
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>输出
更新于：2022年4月26日
364 次查看
广告