js -- 实现一个平滑过渡函数

为什么要写平滑过渡函数呢，主要是可以运用于动画里面，比如进度条的动画，不管是canvas还是dom都可以直接运用。

比如3运动到2

或者2-3，或者1-8

那么我们参数基本需要如下几个参数： 开始, 结束, 时间, 变化。 然后就是扩展参数，扩展参数我们实现一个流向控制，也就是控制只能大到小，或者只能小到大，这样可以避免去过渡不需要过渡的地方，等下有实例。

/**
 * 过渡函数
 * @param {Objct} param0 a: 开始数字；b：过渡最后的数字；time：毫秒；change：过渡回调；type：【可选】（clockwise）只过渡顺时针、（anticlockwise）只过渡逆时针，默认全过渡
 */
function transition({ a, b, time, change, type }){
    var c = a - b
    // 频率
    var p = 10
    // 执行次数(毫秒)， 常量
    var n = time / p
    
    // 执行次数变量
    var n_i = 0
    var loop = (n_i) => {
        // 进度
        var r = 1 / n * n_i
        var next_value = a - (c * (1 - r))
        change(next_value)
        if(n_i < n) setTimeout(() => {
            loop(n_i + 1)
        }, p)
    }
    if((type === 'clockwise' && c < 0) || (type === 'anticlockwise' && c > 0)){
        change(a)
        return
    }
    loop(n_i)
}

上面代码核心是获取执行次数和递归进度，然后加进度和回调实现基本代码，再加控制流向，就完成了。

使用

上面没有添加流向控制，现在我们实现在倒计时的时候过渡，在恢复倒计时初始时间的时候不执行过渡。

效果例子

只弄了一个倒计时的例子，其实可以运用很多的进去

其他

Tips： 小知识点
你使用的是vscode，。【自定义路径】引入的时候没有函数注释提醒。

那么，在项目跟目录添加jsconfig.json文件

添加如下

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

重启即可。

--完--