anime

[!重要]

🎉 Anime.js V4 现已提供早期访问 🎉

经过多年的开发，Anime.js V4 终于可以通过我的 GitHub 赞助商 进行早期访问了！

<h1 align="center"> <a href="https://animejs.com"><img src="https://yellow-cdn.veclightyear.com/835a84d5/ffc69997-c777-4fc0-863e-39ec2077e949.gif" width="250"/></a> <br> anime.js </h1> <h4 align="center">JavaScript 动画引擎 | <a href="https://animejs.com" target="_blank">animejs.com</a></h4> <p align="center"> <img alt="NPM 下载量" src="https://img.shields.io/npm/dm/animejs?style=flat-square&logo=npm"> <img alt="jsDelivr 点击量（npm）" src="https://img.shields.io/jsdelivr/npm/hm/animejs?style=flat-square&logo=jsdeliver"> <img alt="GitHub 赞助商" src="https://img.shields.io/github/sponsors/juliangarnier?style=flat-square&logo=github"> </p> <blockquote align="center"> <em>Anime.js</em>（<code>/ˈæn.ə.meɪ/</code>）是一个轻量级的 JavaScript 动画库，具有简单而强大的 API。<br> 它可以处理 CSS 属性、SVG、DOM 属性和 JavaScript 对象。 </blockquote> <p align="center"> <a href="#开始使用">开始使用</a>&nbsp;|&nbsp;<a href="#文档">文档</a>&nbsp;|&nbsp;<a href="#演示和示例">演示和示例</a>&nbsp;|&nbsp;<a href="#浏览器支持">浏览器支持</a> </p>

技术支持

<table> <tr> <td> <a target="_blank" href="https://huly.io"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./documentation/assets/sponsors/huly-logomark.svg"> <img align="center" src="https://yellow-cdn.veclightyear.com/835a84d5/55752a12-3143-4439-965a-ce8ec3003ee3.svg" width="128"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./documentation/assets/sponsors/placeholder.svg"> <img align="center" src="https://yellow-cdn.veclightyear.com/835a84d5/4a295a8e-28f3-4bb5-b681-8874b4c73f8c.svg" width="128"> </picture> </a> </td> </tr> <tr> <td align="center"> <a target="_blank" href="https://huly.io">Huly</a> </td> <td align="center"> <a target="_blank" href="https://github.com/sponsors/juliangarnier">这里可以是您的标志</a> </td> </tr> </table>

开始使用

下载

通过 npm

$ npm install animejs --save

或者手动下载。

使用方法

ES6 模块

import anime from 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

文件引入

在 HTML 中链接 anime.min.js：

<script src="anime.min.js"></script>

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

文档

• 目标
• 属性
• 属性参数
• 动画参数
• 值
• 关键帧
• 错开动画
• 时间轴
• 控制
• 回调和 Promise
• SVG 动画
• 缓动函数
• 辅助函数

演示和示例

• CodePen 演示和示例
• juliangarnier.com
• animejs.com
• 移动字母 作者 @tobiasahlin
• 渐变地形动画 作者 @crnacura
• 有机形状动画 作者 @crnacura
• 碎片滑块 作者 @lmgonzalves
• 错开动画
• 缓动动画
• 球体动画
• 分层动画
• anime.js 标志动画

浏览器支持

Chrome	Safari	IE / Edge	Firefox	Opera
24+	8+	11+	32+	15+

<a href="https://animejs.com"><img src="https://yellow-cdn.veclightyear.com/835a84d5/c6a772c3-84fa-48a0-9965-7871926477db.gif" width="150" alt="anime-js-v3-logo"/></a>

网站 | 文档 | 演示和示例 | MIT 许可证 | © 2019 Julian Garnier。