https://github.com/datav-team/transition
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
https://github.com/datav-team/transition
Last synced: 2 months ago
JSON representation
基于贝塞尔曲线的动效插件，提供常用缓动曲线，支持自定义缓动曲线
- Host: GitHub
- URL: https://github.com/datav-team/transition
- Owner: DataV-Team
- License: mit
- Created: 2019-01-16T10:09:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T18:51:19.000Z (over 2 years ago)
- Last Synced: 2025-03-18T03:50:05.894Z (3 months ago)
- Language: JavaScript
- Homepage: http://transition.jiaminghi.com
- Size: 4.84 MB
- Stars: 23
- Watchers: 1
- Forks: 9
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[ENGLISH](./README_EN.md)
Transition
### Transition 是什么?
- 它是一个基于**贝塞尔曲线**的动效插件。
- 它提供常用的**缓动曲线**。
- 支持**自定义**缓动曲线。
### 动画是如何产生的?
- 获取一帧动画数据
- 根据动画数据渲染图像
- 重复...
我们可以使用三组数据去描述一段动画（**动画起始状态**、**动画结束状态**、**缓动曲线**），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**_Transition_**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。
### npm 安装
```shell
$ npm install @jiaminghi/transition
```
### 使用
```javascript
import { transition, injectNewCurve } from '@jiaminghi/transition'
// do something
```
### 快速体验
```html
const { transition, extendCurves, createAnimator } = window.transition
// do something
```
详细文档及示例请移步[HomePage](http://transition.jiaminghi.com).
- [注解](#注解)
- [示例](#示例)
- [扩展新曲线](#扩展新曲线)
- [缓动曲线表](#缓动曲线表)
---
注解
```typescript
/**
* @description 基于缓动曲线及起止状态获取若干帧动画状态
* @param {EaseCurve} easeCurve 缓动曲线名或数据
* @param {T} startState 动画起始状态
* @param {T} endState 动画结束状态
* @param {Number} frameNum 动画过渡帧数
* @param {Boolean} deep 是否启用递归模式
* @return {T[]} 过渡帧数据
*/
type transition = (
easeCurve: EaseCurve,
startState: T,
endState: T,
frameNum = 30,
deep = false
) => T[]
```
示例
**Transition** 支持三种数据类型以描述动画状态.
- [Number](#Number)
- [Array](#Array)
- [Object](#Annotation)
- [Recursive](#Recursive)
#### Number
```typescript
import transition from '@jiaminghi/transition'
const start = 0
const end = 100
const frameNum = 10
const easeCurve = 'linear'
transition(easeCurve, start, end, frameNum)
/**
* [
* 0, 11.111111111111112, 22.222222222222225,
* 33.333333333333336, 44.44444444444445, 55.55555555555556,
* 66.66666666666667, 77.77777777777779, 88.8888888888889, 100
* ]
*/
```
#### Array
```typescript
import transition from '@jiaminghi/transition'
const start = [10, 20, 30]
const end = [100, 200, 300]
const frameNum = 3
const easeCurve = 'linear'
transition(easeCurve, start, end, frameNum)
/**
* [
* [10, 20, 30],
* [55, 110, 165],
* [100, 200, 300]
* ]
*/
```
#### Object
```typescript
import transition from '@jiaminghi/transition'
const start = { x: 0, y: 20 }
const end = { x: 100, y: 200 }
const frameNum = 3
const easeCurve = 'linear'
transition(easeCurve, start, end, frameNum)
/**
* [
* { x: 0, y: 20 },
* { x: 50, y: 110 },
* { x: 100, y: 200 }
* ]
*/
```
#### Deep
启用递归模式以计算`Array`或`Object`中的深层数据.
```typescript
import transition from '@jiaminghi/transition'
const start = { x: 0, y: 20, radius: [10, 20, { z: 30 }] }
const end = { x: 100, y: 200, radius: [50, 90, { z: 10 }] }
const frameNum = 3
const easeCurve = 'linear'
const deep = true
transition(easeCurve, start, end, frameNum, deep)
/**
* [
* { x: 0, y: 20, radius: [10, 20, { z: 30 }] },
* { x: 50, y: 110, radius: [30, 55, { z: 20 }] },
* { x: 100, y: 200, radius: [50, 90, { z: 10 }] },
* ]
*/
```
**Notice**
- 非数值的属性或元素不参与计算过程.
- 起始状态与结束状态的数据类型（包括属性及元素的数量）必须保持一致.
扩展新曲线
如果你想扩展新的缓动曲线，你可以使用`Transition`提供的`extendCurves`方法去扩展。
```javascript
import { extendCurves } from '@jiaminghi/transition'
const curveName = 'linear'
// 可以使用绘制工具获得
const bezierCurve = [[[0, 1]], [[1, 0]]]
extendCurves(curveName, bezierCurve)
```
[缓动曲线绘制工具](http://transition.jiaminghi.com/draw/)
缓动曲线表
- [linear](#linear)
- [easeInSine](#easeInSine)
- [easeOutSine](#easeOutSine)
- [easeInOutSine](#easeInOutSine)
- [easeInQuad](#easeInQuad)
- [easeOutQuad](#easeOutQuad)
- [easeInOutQuad](#easeInOutQuad)
- [easeInCubic](#easeInCubic)
- [easeOutCubic](#easeOutCubic)
- [easeInOutCubic](#easeInOutCubic)
- [easeInQuart](#easeInQuart)
- [easeOutQuart](#easeOutQuart)
- [easeInOutQuart](#easeInOutQuart)
- [easeInQuint](#easeInQuint)
- [easeOutQuint](#easeOutQuint)
- [easeInOutQuint](#easeInOutQuint)
- [easeInBack](#easeInBack)
- [easeOutBack](#easeOutBack)
- [easeInOutBack](#easeInOutBack)
- [easeInElastic](#easeInElastic)
- [easeOutElastic](#easeOutElastic)
- [easeInOutElastic](#easeInOutElastic)
- [easeInBounce](#easeInBounce)
- [easeOutBounce](#easeOutBounce)
- [easeInOutBounce](#easeInOutBounce)
#### linear
#### easeInSine
#### easeOutSine
#### easeInOutSine
#### easeInQuad
#### easeOutQuad
#### easeInOutQuad
#### easeInCubic
#### easeOutCubic
#### easeInOutCubic
#### easeInQuart
#### easeOutQuart
#### easeInOutQuart
#### easeInQuint
#### easeOutQuint
#### easeInOutQuint
#### easeInBack
#### easeOutBack
#### easeInOutBack
#### easeInElastic
#### easeOutElastic
#### easeInOutElastic
#### easeInBounce
#### easeOutBounce
#### easeInOutBounce
