简介
animation-scene 是一个基于 jQuery 的动画库，它可以帮助我们更加方便地创建和管理场景动画。它提供了一些常用的动画场景元素，比如：文字、图片、音视频等，并且可以方便地扩展，实现自定义的动画场景元素。
安装与引入
使用 npm 安装：
npm install animation-scene --save
引入：
import $ from 'jquery'; import animationScene from 'animation-scene';
基本用法
创建动画场景
/* 创建动画场景 */
var scene = animationScene.create('.scene-container');添加元素
-- -------------------- ---- -------
--- ----------- - ---------------
----- ------- --------
-- ---- -- ----
--------- -------
----------- -------
----- ------
---
--- ------------ - ----------------
--------- --------------------------------
-- ---- -- ----
------ ---- ------- ----
---
--- ------------ - ----------------
--------- ---------------------------------------------
-- ---- -- ----
------ ---- ------- ----
--------- -----
---
--- ------------ - ----------------
--------- -------------------------------------------
--------- ------
---动画控制
-- -------------------- ---- ------- -- ------- -- -------------- --------------- -- ---- -- ------------- -- -------- -- ----------------- -- ------- -- --- ----------- - -----------------------
高级用法
自定义元素
animation-scene 支持自定义元素的创建和管理，只需要实现以下接口：
-- -------------------- ---- ------- --- - ------- - ------ -------- ------- ------ - ------- -------- ---- -- -------- --------------- -- --- - ---------- - ------ -------- ------- ---- - ------ -------- ------- ------ -- -------- --------------- -------- -- --- - ------- - ------ -------- ------- ---- -- -------- --------------- --
动画事件
animation-scene 支持动画开始、暂停、恢复、停止等事件的监听，例如：
-- -------------------- ---- -------
----------------- ---------- -
--------------------
---
----------------- ---------- -
--------------------
---
------------------ ---------- -
--------------------
---
---------------- ---------- -
--------------------
---示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
---- ------------------------------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------
--------
-- ------ --
--- ----- - ------------------------------------------
-- ---- --
--- ----------- - ---------------
----- ------- --------
-- ---- -- ----
--------- -------
----------- -------
----- ------
---
--- ------------ - ----------------
--------- --------------------------------
-- ---- -- ----
------ ---- ------- ----
---
--- ------------ - ----------------
--------- ---------------------------------------------
-- ---- -- ----
------ ---- ------- ----
--------- -----
---
--- ------------ - ----------------
--------- -------------------------------------------
--------- ------
---
-- ---- --
--------------
---------------
-------------
-----------------
--- ----------- - -----------------------
-- ----- --
--- ------------- - -
------- ----------------- - -- ---- -- --
------- ----------------- -------- - -- ---- -- --
------- ----------------- - -- ---- -- --
--
------------------------------- ---------------
-- ---- --
----------------- ---------- - -------------------- ---
----------------- ---------- - -------------------- ---
------------------ ---------- - -------------------- ---
---------------- ---------- - -------------------- ---
---------
-------
-------以上就是 animation-scene 的使用教程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be881e8991b448e5a2d