chi

chito

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

Showing:

Popularity

Downloads/wk

63

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

BSD-2-Clause

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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. 例子

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 许可协议

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial