可以任意排列组合的 easing 库来了

可以任意排列组合的 easing 库来了_第1张图片

具体做法就是将一些缓动表达式转成自定义的字符串表达式,通过内部方法组合这些表达式最后 toFunction() 转成 (process:number)=>number

现在有以下方法(可以任意链式组装。。这算不算是 easing 从1.0到了2.0 - -!):

{
    //得当前缓动的镜像缓动
    static mirror(ease: Easing | string) {
        return Easing.concat(Easing.easeReverse, ease, Easing.easeReverse);
    }
    //获得对称的缓动
    static symmetry(ease: Easing | string) {
        return Easing.split(0.5, ease);
    }
    //混合多个缓动
    static mix(...ease_list: Array) {
        return new Easing(
            ease_list.map(
                ease => `(${ease.toString()})/${ease_list.length}`
            ).join("+")
        );
    }
    //链接多个缓动
    static concat(...ease_list: Array) {
        return new Easing(
            ease_list.reduce(
                (wrap: string, ease) => wrap.replace(
                    /\$\{\S*?\$\S*?\}/g,
                    `(${ease.toString()})`
                ), Easing.easeLinear.expr)
        );
    }
    //从指定位置两侧插入两个缓动
    static split(lt: number, ease_l: Easing | string, ease_r = ease_l) {
        if(lt > 0 && lt < 1) {
        let lf = 1 / lt, rf = 1 / (1 - lt);
        return new Easing(`__t<${lt}?(__t*=${lf},(${
            ease_l.toString()
            })/${lf}):(__t=(1-__t)*${rf},1-(${
            ease_r.toString()
            })/${rf})`);
    } else {
        return lt <= 0 ? ease_r : ease_l;
    }
    }
}

你可能感兴趣的:(javascript,前端,css,typescript,html5)