Chito (原 Animater)

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

1. 安装

您可以通过npm安装

npm i chito --save

或者直接下载完整版或核心板(不含颜色变化插件)库文件，通过script标签引用

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

2. 模块引入

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

By AMD + ES6

import { Animation, Clip } from 'chito';

By global

let { Animation, Clip } = window.Chito;

3. 使用

HTML

<div id="p1">
</div>

Javascript in ES6

// 创建 Animation 实例，控制动画主进程
let ani = new Animation()

// 创建 Clip 实例，控制具体动画片段
let clip = new Clip({
	duration: 10000,
	repeat: 10
}, {
	x: [ 0, 10 ],
	y: [ 10, 0 ],
	color: [ '#ff0000', '#0000ff' ]
})

// 增加 Clip 的 Update 事件
clip.on('update', (event) => {
    let { progress, keyframe } = event
	// frame 中包含了当前时刻下的数据
	// 根据数据绘制 UI
	let $el = document.getElementById('p1')

	$el.style.left = keyframe.x + 'px'
	$el.style.top = keyframe.y + 'px'
	$el.style.backgroundColor = keyframe.color
})

// 将 clip 添加至动画主进程
ani.addClip(clip)

// 启动动画
ani.start()

// 暂停动画
ani.pause()

// 停止动画
ani.stop()

4. 文档

更详细的API参考: API文档

5. 例子

• HelloWorld
• Yoyo
• Delay & Interval
• StartAt
• Easing
• Chain

6. 代码修改及本地调试

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

# 代码下载
git clone https://github.com/redmed/chito

# 1. 安装依赖
npm i

# 2. 运行本地开发环境
npm run dev

# 3. 打开浏览器调试 (或者自行打开浏览器，使用以下url)
open http://localhost:8082

许可

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