animater

Animater

一个支持计算颜色变化的动画库。

1. 安装

您可以通过npm安装

npm i animater --save

或者直接下载库文件，通过script标签引用

<script src="js/animater.js"></script>

2. 模块引入

Animater采用 UMD 的模块引用方式，因此可以考虑一下方式引用。

By ES6

import { Animation, ShaderClip } from 'animater';

By AMD

let Animater = require('animater');
let { Animation, ShaderClip } = Animater;

By global

let { Animation, ShaderClip } = window.Animater;

3. 使用

// 创建 Animation 实例，控制动画主进程
let ani = new Animation()
 
// 创建 ShaderClip 实例，控制具体动画片段
let clip = new ShaderClip({
    duration: 10000,
    repeat: 10
}, {
    x: [ 0, 10 ],
    y: [ 10, 0 ],
    color: [ '#ff0000', '#0000ff' ]
})
 
// 增加 Clip 的 Update 事件
clip.on(Clip.Event.UPDATE, (progress, frame) => {
    // frame 中包含了当前时刻下的数据
    // frame.x
    // frame.y
    // frame.color
    // 根据数据绘制 UI
})
 
clip.start()
 
// 将 clip 添加至动画主进程
ani.addClip(clip)
 
// 启动动画
ani.start()
 

4. 文档

API

5. 代码修改及本地调试

源码使用ES6语法开发，具体语法规则请参考babelrc文件

# 1. 安装依赖 
npm i
 
# 2. 运行本地开发环境 
npm run dev
 
# 3. 打开浏览器调试 (或者自行打开浏览器，使用以下url) 
open http://localhost:8082
 

许可

本软件 (Animater) 实施 BSD 许可协议