JavaScript 运动 02 —— animate 函数增强

2017-05-22 本文已影响7人柏丘君

上文我们实现了匀速运动，本文在上文的基础上进行一些改进，最终目标是：

多值同时运动
链式运动
使用 async/await 和 Promise 解决链式运动回调嵌套问题

多值运动

解决多值运动，我们需要之前的单一属性参数替换为对象字面量，以容纳更多的属性值。
对 animate 函数进行修改：

function animate(ele = null,config = {
    speed:10,
    attrs:{
        
    }
}){
    // 清除定时器
    clearInterval(ele.timer);
    const attrs = config.attrs;
    ele.timer = setInterval(()=>{
        for(const attr in attrs){
            let speed = config.speed;
            // 设置目标距离
            let target = Number.parseInt(attrs[attr]);
            // 获取当前的样式
            let currentStyle = (attr === "opacity")?(Number.parseInt(Number.parseFloat(getCurrentStyle(ele,attr))*100)):Number.parseInt(getCurrentStyle(ele,attr));

            // 如果改变的样式是 opacity，target乘以100
            if(attr === "opacity"){
                target = Number.parseInt(Number.parseFloat(attrs[attr])*100);
            }

            // 根据当前样式值和目标位置的差值判断速度方向
            if(currentStyle - target > 0){
                speed = -Math.abs(speed);
            }

            // 运动到目标点后清除定时器
            if(Math.abs(target - currentStyle) < Math.abs(speed)){
                ele.style[attr] = (attr === "opacity")? target / 100 : target + "px";
                // clearInterval(ele.timer);
            }else{
                // 根据当前样式动态改变物体的样式
                ele.style[attr] = (attr === "opacity")?( currentStyle + speed)/100:(currentStyle + speed) + "px";
                currentStyle += speed;
            }
        }

    },30);
}

调用运动函数：

...
const ele = document.getElementById("inner");
const par = document.getElementById("par");
function start(){
    animate(ele,{
        speed:10,
        attrs:{
            left:"500px",
            top:par.offsetHeight - ele.offsetHeight*0.5 - 2,
            opacity:1,
        }
    });
}
...

效果图：

多值同时运动-1.gif

这里我们将 speed 也一并打包放入 config 对象中，已解决参数过多的问题。
可以看到，在此次运动中，三个属性（left，top，opacity）同时进行了变化，适用性更加广泛了。

清除定时器

也许你已经注意到了，上面的 animate 函数中，我们将 clearInterval 清除定时器注释掉了。这是因为在多值运动的时候，并不保证所有的属性都能同时完成，因此当一个运动完成后，如果清除定时器，那么后序没有完成的运动也将一并停止。效果就不演示了，大家可以自己把注释去掉试一试。
可是定时器总是要清除的呀，不然它将会一直在后台浪费资源，那么应该怎么做呢？
定义一个标志变量 flag，用来决定是否关闭定时器，当有运动还没有完成时，flag 为 false，当运动全都完成后，flag 变为 true，同时关闭定时器。
修改 animate 函数：

function animate(ele = null,config = {
    speed:10,
    attrs:{

    }
}){
    // 清除定时器
    clearInterval(ele.timer);
    const attrs = config.attrs;
    ele.timer = setInterval(()=>{
        let flag = true;
        for(const attr in attrs){
            let speed = config.speed;
            // 设置目标距离
            let target = Number.parseInt(attrs[attr]);
            // 获取当前的样式
            let currentStyle = (attr === "opacity")?(Number.parseInt(Number.parseFloat(getCurrentStyle(ele,attr))*100)):Number.parseInt(getCurrentStyle(ele,attr));

            // 如果改变的样式是 opacity，target乘以100
            if(attr === "opacity"){
                target = Number.parseInt(Number.parseFloat(attrs[attr])*100);
            }

            // 根据当前样式值和目标位置的差值判断速度方向
            if(currentStyle - target > 0){
                speed = -Math.abs(speed);
            }

            // 根据运动是否完成来设定 flag
            if(currentStyle !== target){
                flag = false;
            }

            // 运动到目标点后清除定时器
            if(Math.abs(target - currentStyle) < Math.abs(speed)){
                ele.style[attr] = (attr === "opacity")? target / 100 : target + "px";
            }else{
                // 根据当前样式动态改变物体的样式
                ele.style[attr] = (attr === "opacity")?( currentStyle + speed)/100:(currentStyle + speed) + "px";
                currentStyle += speed;
            }
        }

        if(flag){
            clearInterval(ele.timer);
        }

    },30);
}

此时，当多个属性的运动都完成后，定时器就会关闭。

链式运动

链式运动，就是在前一次运动完成后，再进行下一次运动。这样一来，我们只需在前一次运动完成并清除定时器之后，进行下一次运动，我们可以在 config 中定义一个回调函数，用来在运动完成后调用：
修改 animate 函数：

function animate(ele = null,config = {
    speed:10,
    attrs:{},
    done:null,
}){
    // 清除定时器
    clearInterval(ele.timer);
    const attrs = config.attrs;
    ele.timer = setInterval(()=>{
        let flag = true;
        for(const attr in attrs){
            let speed = config.speed;
            // 设置目标距离
            let target = Number.parseInt(attrs[attr]);
            // 获取当前的样式
            let currentStyle = (attr === "opacity")?(Number.parseInt(Number.parseFloat(getCurrentStyle(ele,attr))*100)):Number.parseInt(getCurrentStyle(ele,attr));

            // 如果改变的样式是 opacity，target乘以100
            if(attr === "opacity"){
                target = Number.parseInt(Number.parseFloat(attrs[attr])*100);
            }

            // 根据当前样式值和目标位置的差值判断速度方向
            if(currentStyle - target > 0){
                speed = -speed;
            }

            // 根据运动是否完成来设定 flag
            if(currentStyle !== target){
                flag = false;
            }

            // 运动到目标点后清除定时器
            if(Math.abs(target - currentStyle) < Math.abs(speed)){
                ele.style[attr] = (attr === "opacity")? target / 100 : target + "px";
            }else{
                // 根据当前样式动态改变物体的样式
                ele.style[attr] = (attr === "opacity")?( currentStyle + speed)/100:(currentStyle + speed) + "px";
                currentStyle += speed;
            }
        }

        if(flag){
            clearInterval(ele.timer);
            config.done && config.done();
        }

    },30);
}

调用运动函数：

...
const ele = document.getElementById("inner");
const par = document.getElementById("par");
function start(){
    const target = 0;
    animate(ele,{
        speed:10,
        attrs:{
            left:"500px",
            top:par.offsetHeight - ele.offsetHeight*0.5 - 2,
            opacity:1,
        },
        done(){
            animate(ele,
                {
                    speed:20,
                    attrs:{
                        left:0,
                        top:ele.offsetHeight*0.5
                    }
                }
            );
        }
    });
}
...

是不是很简单呢？我们来看一下效果：

链式运动.gif

解决回调函数嵌套

链式运动的一个缺陷在于：如果需要进行多次链式运动，那么会陷入层层的回调函数中，为了解决这个问题，我们引入 async/await 和 Promise。修改 animate 函数：

function animate(ele = null,config = {
    speed:10,
    attrs:{},
}){
    // 清除定时器
    clearInterval(ele.timer);
    const attrs = config.attrs;
    return new Promise((resolve)=>{
        ele.timer = setInterval(()=>{
            let flag = true;
            for(const attr in attrs){
                let speed = config.speed;
                // 设置目标距离
                let target = Number.parseInt(attrs[attr]);

                // 获取当前的样式
                let currentStyle = (attr === "opacity")?(Number.parseInt(Number.parseFloat(getCurrentStyle(ele,attr))*100)):Number.parseInt(getCurrentStyle(ele,attr));

                // 如果改变的样式是 opacity，target乘以100
                if(attr === "opacity"){
                    target = Number.parseInt(Number.parseFloat(attrs[attr])*100);
                }

                // 根据当前样式值和目标位置的差值判断速度方向
                if(currentStyle - target > 0){
                    speed = -speed;
                }

                // 根据运动是否完成来设定 flag
                if(currentStyle !== target){
                    flag = false;
                }

                // 运动到目标点后清除定时器
                if(Math.abs(target - currentStyle) < Math.abs(speed)){
                    ele.style[attr] = (attr === "opacity")? target / 100 : target + "px";
                }else{
                    // 根据当前样式动态改变物体的样式
                    ele.style[attr] = (attr === "opacity")?( currentStyle + speed)/100:(currentStyle + speed) + "px";
                    currentStyle += speed;
                }
            }

            if(flag){
                clearInterval(ele.timer);
                resolve();
            }
        },30);
    });
}

调用运动函数：

...
const ele = document.getElementById("inner");
const par = document.getElementById("par");
async function start(){
    await animate(ele,{
        speed:10,
        attrs:{
            left:"500px",
            top:par.offsetHeight - ele.offsetHeight*0.5 - 2,
            opacity:1,
        }
    });

    await animate(ele,{
        speed:10,
        attrs:{
            left:"0",
            top:ele.offsetHeight*0.5,
            opacity:0.3,
        }
    });
}
...

查看效果：

链式运动 Promise 版.gif

我们去掉了 config 中的 done 方法，改为 Promise 实现，这样一来，就可以避免回调函数地狱了。

总结

本文我们对 animate 进行了以下改进：

支持多值运动
多值运动时停止定时器的问题
支持链式运动
将链式运动由回调形式改为 Promise 形式

至此，animate 函数基本上已经完善了，当然还有一些需要优化的地方：

我们的单位 "px" 是硬编码，为了适应移动端，可以将 "em" 等作为参数传入
在修改 style 时，还可以对 config 中的属性进行判断，以确认 style 有该属性
其他可能的优化

完。

JavaScript 运动 02 —— animate 函数增强

多值运动

清除定时器

链式运动

解决回调函数嵌套

总结

猜你喜欢

热点阅读