赤兔
一个支持计算颜色变化的动画库。
您可以通过npm
安装
npm i chito --save
或者直接下载库文件,通过script
标签引用
<script src="js/chito.js"></script>
Chito
采用 UMD
的模块引用方式,因此可以考虑以下方式引用。
By AMD + ES6
import { Animation, ShaderClip } from 'chito';
By global
let { Animation, ShaderClip } = window.Chito;
HTML
<div id="p1">
</div>
Javascript
// 创建 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('update', (progress, frame) => {
// frame 中包含了当前时刻下的数据
// 根据数据绘制 UI
let $el = document.getElementById('p1');
$el.style.left = frame.x + 'px'
$el.style.top = frame.y + 'px'
$el.style.backgroundColor = frame.color
})
// 将 clip 添加至动画主进程
ani.addClip(clip)
// 启动动画
ani.start()
// 暂停动画
ani.pause()
// 停止动画
ani.stop()
API文档
源码使用ES6
语法开发,具体语法规则请参考babelrc文件
# 代码下载
git clone https://github.com/redmed/chito
# 1. 安装依赖
npm i
# 2. 运行本地开发环境
npm run dev
# 3. 打开浏览器调试 (或者自行打开浏览器,使用以下url)
open http://localhost:8082
本软件 (Chito) 实施 BSD 许可协议