# 补间动画库

• 关键帧动画
• 视频转场动画
• 音频淡入淡出

### 思路

0______________________9____10
(90%)

``````// 设常量确定两点start、end：
const start = 0
const end = 10

// 设变量current
let current = 9
``````

### 线性动画函数

``````/**
* 线性动画函数
* @param {number} t 当前时间
* @param {number} b 初始值
* @param {number} c 变化值
* @param {number} d 动画时长
*/
const linear = (t, b, c, d) => {
return c * t / d + b
}

var start = 0
var end = 10
var current = 9
var time = current - start
var duration = end - start
linear(time, 0, 100 - 0, duration)
// => 90

var x1 = 50
var x2 = 100
var change = x2 - x1
var start = 10
var end = 20
var current = 10
var time = current - start
var duration = end - start
linear(time, x1, change, duration)
// => 50
``````

### 封装动画库

``````/**
* 动画函数
* @param {object} options
*/
const animation = (options) => {
options = options || {}

let result = {}
let current = options.current
let start = options.start
let end = options.end
let easeFn = options.easeFn
let form = options.form
let to = options.to

if (start > end) {
throw Error(`Start cannot be greater than the end`)
}
if (start < 0 || end < 0) {
throw Error(`Start or end value cannot be less than 0`)
}

let time = (current - start)
let duration = (end - start)

easeFn = easeFn || linear

// 处理undefined
if (isUndefined(form) || isUndefined(to)) {
let num = easeFn(time, 0, 1, duration)
if (num > 1) {
num = 1
}
return num
}

// 处理不是对象
if (!isPlainObject(form) || !isPlainObject(to)) {
throw Error('form and to is not object')
}

// 处理对象
for (const key in to) {
if (to.hasOwnProperty(key)) {
const formValue = Number(form[key])
const toValue = Number(to[key])

if (isNaN(formValue) || isNaN(toValue)) {
throw Error('value is not number')
}

const change = toValue - formValue

result[key] = easeFn(time, formValue, change, duration)
}
}

return result
}
``````

### 使用

``````npm install transition-animation -S
``````
``````import ANIMATION from 'transition-animation'

const current = 9
const start = 0
const end = 10

const result = ANIMATION.animation({
current,
start,
end,
form: {
x: 0,
y: 0
},
to: {
x: 100,
y: 200
}
});

// result -> { x: 90, y: 180}
``````