Transition

# 介绍

Transition是一个动效插件，用于在JS环境下的动效状态计算。

我们可以使用动画起始状态、动画结束状态、过渡动效、动画时长(帧数) 这四个参数去精确描述一段动画，Transition可以根据上述参数计算出动画每一帧的状态，这样按序绘制出每一帧，动画就产生了。

Transition内置了常用的基础动效(曲线表)，它们是基于 tween.js 封装的。与 tween.js不同的是Transition还支持自定义动效，扩展基础动效曲线(绘制动效曲线)。

# 实现

三次方贝塞尔曲线由四个点构成 P0、P1、P2、P3。P0 与 P3 分别为曲线起始点与结束点，P1 与 P2 分别为曲线的两个控制点，但曲线通常不会经过这两个点，曲线公式如下：

  • 三次方贝塞尔曲线

B(t) = P0(1 - t)3 + 3P1t(1 - t)2 + 3P2t2(1 - t) + P3t3

由公式可知，我们可以获取范围内任意时刻曲线上一点的点坐标 (t: [0 - 1]) 。将曲线起始点与终止点抽象成动画开始与结束，范围内任意时刻的点即对应该时刻动画过渡所属帧的状态位置。

# 安装

  • npm 安装
npm install @jiaminghi/transition
  • yarn 安装
yarn add @jiaminghi/transition

# 使用

import { transition, extendCurves, createAnimator } 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>

# API

Transition内置了 3 个 API：

  • transition是用于计算动画过渡帧状态

  • extendCurves扩展内置缓动曲线，便于复用

  • createAnimator简单的动画器支持

# transition

/**
 * @description 根据动效曲线、起始状态、结束状态、动画帧数获取动画每一帧的状态
 * 递归模式下将计算状态的深层属性
 * @param {EaseCurve} easeCurve 动效曲线或曲线数据
 * @param {Any} startState      动画起始状态
 * @param {Any} endState        动画结束状态
 * @param {Number} frameNum     动画帧数
 * @param {Boolean} deep        是否启用递归模式
 * @return {Array} 每一帧的动画的状态数据
 */
type transition = <T>(
  easeCurve: EaseCurve,
  startState: T,
  endState: T,
  frameNum = 30,
  deep = false
) => T[]

# 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

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 }] },
 * ]
 */

# entendCurves

/**
 * @description 扩展动效曲线
 * 可以将自定义的动效曲线扩展至基础动效曲线
 * @param {string} curveName      曲线名
 * @param {TransitionCurve} curve 曲线数据
 * @return {boolean} 扩展结果
 */
type extendCurves = (curveName: string, transitionCurve: TransitionCurve) => boolean

# createAnimator

/**
 * @description 绘制器
 * 根据传入的帧状态和帧索引绘制当前帧
 * @param {any} frameState    单帧动画状态
 * @param {number} frameIndex 当前帧索引
 * @return {false} 如果返回false 将结束动画
 */
type Render<T> = (frameState: T, frameIndex: number) => false

/**
 * @description 接受一个绘制器返回一个动画器
 * 传入动画状态队列将自动调用绘制器进行动画绘制
 * @param {Render} render 绘制器
 * @return {Function} 动画器
 */
type createAnimator = <T>(render: Render<T>) => (state: T[]) => Promise<void>

// 示例 渲染一个方块的位移动画
const square = document.querySelector('#square')

// 定义起止状态
type SquareState = { left: number; width: number }
const startState: SquareState = { left: 0, width: 10 }
const endState: SquareState = { left: 300, width: 30 }
// 定义缓动曲线
const easeCurve = 'easeOutBounce'
// 动画持续60帧
const frameNum = 60

const renderCircle = ({ left, width }: SquareState) => {
  square.style.left = `${left}px`
  square.style.width = `${width}px`
}

const animator = createAnimator(renderCircle)
const state = transition(easeCurve, startState, endState, frameNum)

// 开始动画
animator(state).then(_ => {
  // 动画结束后的callback
})