switch-animation

封装的一个动画类。用于做动画 切换，保证中间切换 按照原动画逻辑进行过度。
支持typescript。
支持动画曲线（贝塞尔曲线）目前已内置了部分。
分为两种模式：整段动画、阶段动画
插件例子：menu动画 input提示动画 整段动画 分段动画

css问题：
0-1000ms（left: 0-1000px ) 100-200ms (background-color: red->green )
当你走到 200ms，需要让他恢复到初始状态。此时单靠 css 是无法实现的。
transtion: 无法保证 100-200ms 做background切换，保持left同步运行。
animation：直接增加新animation类，会导致 动画从初始化开始运行。不会出现动画效果。

安装

npm i switch-animation
    /
yarn add switch-animation

基本使用

（整段动画）
html:
<div style="border: 1px solid red; width: 100px; height: 100px; " ></div>
js:
import {wholeAnimation} from 'switch-animation'
...
const {switchAnimation} = wholeAnimation({
    element: document.querySelector('div'),
    duration: 500,
    easing: 'easeInOutBack', // 可不传，默认 linear 曲线。
    animation: {
        translateX: {
            startValue: '0',
            endValue: '100',
            unit: 'px'
        },
        'border-color': {
            startValue: 'red',
            endValue: '#373D49',
            unit: ''
        }
    }
})
switchAnimation()
...

(分段动画)
html:
<div style='width:100px; height:100px; background-color:red;'></div>
js:
import {segmentedAnimation} from 'switch-animation'
...
const {switchAnimation} = segmentedAnimation({
    element: document.querySelector('div'),
    duration: 800,
    easing: 'linear', // 默认linear，可不传递。将应用于每个时间段 动画曲线
    animation: {
        '0-800': {
            easing: 'easeOutBack', // 每个时间段可以单独设置，做到覆盖全局 动画曲线
            translateX: {
                startValue: '0',
                endValue: '500',
                unit: 'px'
            },
            width: {
                startValue: '100',
                endValue: '150',
                unit: 'px'
            }
        },
        '0-200': {
            'background-color': {
                startValue: 'red',
                endValue: 'rgba(0,0,0,1)',
                unit: ''
            }
        },
        '200-600': {
            rotate: {
                startValue: '0',
                endValue: '360',
                unit: 'deg'
            } 
        }
    }
})
switchAnimation()
...

cssName支持情况

不支持：
transform：我这边拆分为 单个变换，如 translateX、translateY、rotate、scaleX...
translate: 可以通过 translateX + translateY 代替
scale: 可以通过 scaleX + scaleY 代替
border: 可以通过 border-color + border-width 代替，需要预先设置 element border样式 border 例子
支持，但有限制：
box-shadow: 支持，但有格式限制（详情见下方） 阴影例子
border-radius: 如果要设置单边 请通过 border-top-left-radius、border-top-right-radius... 等来设置。border-radius例子 支持： 'margin' | 'margin-top' | 'margin-bottom' | 'margin-left' | 'margin-right'
'border-width' | 'border-color'
'border-radius' | 'border-top-left-radius' | 'border-top-right-radius' | 'border-bottom-right-radius' | 'border-bottom-left-radius'
'padding' | 'padding-top' | 'padding-bottom' | 'padding-left' | 'padding-right'
'width' | 'height'
'left' | 'right' | 'top' | 'bottom'
'color' | 'background-color'
'rotate' | 'rotateX' | 'rotateY' | 'rotateZ'
'translateX' | 'translateY' | 'translateZ'
'scaleX' | 'scaleY' | 'scaleZ'
'skewX' | 'skewY'
'perspective' | 'font-size' | 'opacity'

基本参数

wholeAnimation 和 segmentedAnimation 基本参数

    {
        element: 必传，dom元素 --- element
        duration：必传，动画时间 --- number
        easing：非必传，默认 linear，作用于全局动画的曲线 --- [number, number, number, number] | string（详情下方 动画曲线）
        onStart: 非必传，默认 null，动画开始运行时 触发 --- (element)=>void
        onAnimation: 非必传, 默认null，动画进行更改element.style时 (不建议使用，会频繁调用) 触发 --- (element)=>void
        onEnd: 非必传，默认null，动画结束时 触发 --- (element)=>void
        animation: ...
    }

wholeAnimation: 整段动画

import {wholeAnimation} from 'switch-animation'
const animationEvent = wholeAnimation({
    ... (基本参数)
    animation: {
         cssName: { // 必传，设置的cssName （例： left | translateX | 'background-color' ）
            startValue: 必传, 开始cssValue值 --- string
            endValue: 必传，结束cssValue值 --- string
            unit: 必传，单位 --- string （例：'px' | '%' | 'deg' | '' ）
        }
        cssName...
    }
})

segmentedAnimation: 分段动画

import {segmentedAnimation} from 'switch-animation'
const animationEvemt = segmentedAnimation({
    ...(基本参数)
    animation: {
        // 必传开始运行 和 结束运行的时间。例: ( '0-1000' | '300-700' )
        'startDuration-endDuration': { 
            easing: 非必传，默认以 全局动画曲线为主。可单独设置分段动画曲线
            onStart: 非必传，开始运行分段动画触发。
            onAnimation：...
            onEnd:...
            cssName: {
                startValue: string,
                endValue: string,
                unit: string
            },
            cssName...
        }
        'startDuration-endDuration'...
    }
})

返回事件

animationEvemt {
    // isAnimationShow方法，调用后返回 boolean。true: 动画在显示中 / 已经显示， false：动画在关闭中 / 已关闭
    isAnimationShow:()=>boolean
    // startAnimation方法，需要动画重新开始使用（大概率少用）
    startAnimation: ()=>void 
    // switchAnimation方法，通过他调用动画 切换（开始 -> 结束、结束 -> 开始、中间切换）
    switchAnimation: ()=>void 
}

特殊cssName 设置

颜色 --- color、'background-color'、'border-color'

    startValue、endValue: rgb(x,x,x)、rgba(x,x,x,x)、##373D49、hsl(360, 100%, 50%)、hwb(60, 3%, 60%)、red(color-name)...
    例：
        color: {
            startValue: 'green',
            endValue: 'rgba(255, 0, 0, 0.5)',
            unit: ''
        }

box-shadow

    startValue、endValue： "0 0 0 0 black"(x偏移、y偏移、阴影模糊半径、阴影扩散半径、阴影颜色)
                        "inset 0 0 0 0 balck"(阴影在框内)
                        "0 0 5 5 black, 2 2 0 0 red"（多个阴影以 逗号， 进行分割）
    unit: 单位 --- 'px' | 'em' ...
    例:
        'box-shadow': {
            startValue: '0 0 0 0 black',
            endValue: '0 0 30 2 white',
            unit: 'px'
        }

border-radius

    border-radius 只支持设置4角的值  
    例:
        'border-radius': {
            startValue: '0',
            endValue: '10',
            unit: 'px'
        }
    单独 设置两个角
    例:
        'border-top-left-radius': {
            startValue: '0',
            endValue: '10',
            unit: 'px'
        },
        'border-bottom-right-radius': {
            startValue: '0',
            endValue: '10',
            unit: 'px'
        }

动画曲线

easing: [number, number, number, number] | string (代表内置的动画曲线)

(内置动画曲线 效果查看 --- https://easings.net/cn )
string 支持参数
'linear' | 'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' |
'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' |
'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo'|
'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack'

自定义动画曲线
easing: [.42, -0.54, .42, .99]
(可以通过该网站预设效果 --- https://cubic-bezier.com/ )