Needle-Pinpointing Machine

    switch-animation
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    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/ )

    Install

    npm i switch-animation

    DownloadsWeekly Downloads

    0

    Version

    1.2.2

    License

    ISC

    Unpacked Size

    92.8 kB

    Total Files

    25

    Last publish

    Collaborators

    • jianhao