ENGLISH

Transition

Transition 是什么?

• 它是一个基于贝塞尔曲线的动效插件。
• 它提供常用的缓动曲线。
• 支持自定义缓动曲线。

动画是如何产生的?

• 获取一帧动画数据
• 根据动画数据渲染图像
• 重复...

我们可以使用三组数据去描述一段动画（动画起始状态、动画结束状态、缓动曲线），根据这三组数据我们可以计算出动画过程中每一帧动画的状态。这就是**Transition**所提供的功能，根据每一帧动画的状态，我们不断的进行重绘，动画就产生了。

npm 安装

$ npm install @jiaminghi/transition

使用

import { transition, injectNewCurve } from '@jiaminghi/transition'

// do something

快速体验

<!--调试版-->
<script src="https://unpkg.com/@jiaminghi/transition/dist/index.js"></script>
<!--压缩版-->
<script src="https://unpkg.com/@jiaminghi/transition/dist/index.min.js"></script>
<script>
  const { transition, extendCurves, createAnimator } = window.transition
  // do something
</script>

详细文档及示例请移步HomePage.

• 注解
• 示例
• 扩展新曲线
• 缓动曲线表

---

注解

/**
 * @description 基于缓动曲线及起止状态获取若干帧动画状态
 * @param {EaseCurve} easeCurve 缓动曲线名或数据
 * @param {T} startState        动画起始状态
 * @param {T} endState          动画结束状态
 * @param {Number} frameNum     动画过渡帧数
 * @param {Boolean} deep        是否启用递归模式
 * @return {T[]} 过渡帧数据
 */
type transition = <T>(
  easeCurve: EaseCurve,
  startState: T,
  endState: T,
  frameNum = 30,
  deep = false
) => T[]

示例

Transition 支持三种数据类型以描述动画状态.

• Number
• Array
• Object
• Recursive

Number

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

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

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中的深层数据.

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方法去扩展。

import { extendCurves } from '@jiaminghi/transition'

const curveName = 'linear'

// 可以使用绘制工具获得
const bezierCurve = [[[0, 1]], [[1, 0]]]

extendCurves(curveName, bezierCurve)

缓动曲线绘制工具

缓动曲线表

• 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

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