简介
k8w-pixi-animate 是一个基于 PIXI.js 的动画库。它提供了方便的 API 以及强大的动画效果，是前端开发中非常实用的工具。
安装
使用 npm 可以快速的安装 k8w-pixi-animate：
npm install k8w-pixi-animate --save
使用
首先要做的就是引入 k8w-pixi-animate：
import { Animator } from 'k8w-pixi-animate';初始化 Animator
Animator 初始化需要一个已经初始化的 PIXI.Application 的实例，以及需要进行动画的元素：
-- -------------------- ---- -------
----- --- - --- ------------------ ------ ---- ------- --- ---
----- ------- - --- ---------------
--------------------
------------ -- --- ---
-----------
----------------------------
----- -------- - --- ------------- ---------API
k8w-pixi-animate 提供了多个 API 以及动画实例：
Animator.play(animation, options)
播放指定的动画。
参数
- animation：Object，动画对象（必填）。
- options：Object，可选项。
- complete：Function，执行结束后的回调函数。
- repeat：Boolean，是否重复播放。
示例
-- -------------------- ---- ------- ----- -------- - --- ------------- --------- ----- --------- - - --------- ----- ------ ----- ----- - -- - -- --- - -- --- -- ------- --------------- -- -------------------------
Animator.clear()
清除当前 animator 所有动画。
示例
animator.clear();
示例代码
动画效果：水平移动
<div id="app"></div>
-- -------------------- ---- ------- ------ - -- ---- ---- ---------- ------ - -------- - ---- ------------------- ----- --- - --- ------------------ ------ ---- ------- --- --- ----- ------- - --- --------------- -------------------- ------------ -- --- --- ----------- ---------------------------- ----- -------- - --- ------------- --------- ----- --------- - - --------- ----- ------ ----- ----- - -- - -- --- - -- --- -- ------- --------------- -- ------------------------- -----------------------------------------------------
总结
k8w-pixi-animate 提供了非常强大的动画工具，可以帮助我们快速地实现各种复杂的动画效果。同时，它的 API 很简单易用，使用起来非常方便。希望本篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600579c381e8991b448eb367