Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 57x 23x 23x 52x 46x 20x 20x 20x 20x 20x 20x 20x 20x 23x 20x 20x 187x 187x 187x 3x 3x | import { Animation, AnimationState, KeyframeOptions } from "../types"
import { interpolate } from "../../utils/interpolate"
import { Easing } from "../../easing/types"
import { easeInOut } from "../../easing"
export function defaultEasing(values: any[], easing?: Easing): Easing[] {
return values.map(() => easing || easeInOut).splice(0, values.length - 1)
}
export function defaultOffset(values: any[]): number[] {
const numValues = values.length
return values.map((_value: number, i: number): number =>
i !== 0 ? i / (numValues - 1) : 0
)
}
export function convertOffsetToTimes(offset: number[], duration: number) {
return offset.map((o) => o * duration)
}
export function keyframes<V>({
from = 0,
to = 1,
ease,
offset,
duration = 300,
}: KeyframeOptions): Animation<number | string> {
/**
* This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
* to reduce GC during animation.
*/
const state: AnimationState<typeof from> = { done: false, value: from }
/**
* Convert values to an array if they've been given as from/to options
*/
const values = Array.isArray(to) ? to : [from, to]
/**
* Create a times array based on the provided 0-1 offsets
*/
const times = convertOffsetToTimes(
offset ?? defaultOffset(values),
duration
)
function createInterpolator() {
return interpolate(times, values, {
ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),
})
}
let interpolator = createInterpolator()
return {
next: (t: number) => {
state.value = interpolator(t)
state.done = t >= duration
return state
},
flipTarget: () => {
values.reverse()
interpolator = createInterpolator()
},
}
}
|