js之pc端网页特效缓冲动画（2）

目录

一、缓冲动画原理

二、缓冲动画多个目标值之间移动

三、缓冲动画添加回调函数

四、动画函数的使用之问题反馈案例

 五、案例之品优购轮播图

六、节流阀以及逻辑中断应用

 七、筋斗云案例

一、缓冲动画原理

让元素的速度有所变化，最常见的是让速度慢慢停下。

原理：让盒子每次移动的距离越来越小，速度就会慢慢停下来，核心算法：（目标位置-当前位置）/10，作为每次移动的步长，比如目标位置是100，当前位置0，所以步长就会10...9、8、7...0，停止的条件，让当前盒子距离等于目标位置就停止计时器。

匀速动画就是盒子当前的位置+固定的值

缓冲动画就是盒子当前的位置+变化的值

step(每次移动的距离）=(target- obj.offsetLeft)/10，停止的条件是if(target==obj.offsetLeft){

clearInterval(obj.time)}，否则盒子距离左侧的位置（obj.style.left，style属性可以修改值）=obj.offsetLeft+step+'px'，因为上次我们已经对函数进行了封装，所以我们直接调用即可animation(span,500)。

点击夏雨荷才走
    
    

二、缓冲动画多个目标值之间移动

可以让元素移动到目标值800的位置，再往回移动。给一个元素添加两个动画。

step = step > 0 ? Math.ceil(step) : Math.floor(step);这一句是避免有小数。

三、缓冲动画添加回调函数

回调函数原理：

回调函数可以作为动画函数的一个参数，当那一个函数执行完毕之后，再执行传进去的这个函数，这个过程就叫回调。

比如我们想让元素走到800之后，颜色变为红色，就可以这样写。

 animation(span, 800, function() {
                span.style.backgroundColor = 'red';
                //加引号
            });

四、动画函数的使用之问题反馈案例

鼠标经过箭头反向，并且问题反馈出现

鼠标离开回到初始状态

问题分析：

需要准备一个大盒子，里面包含箭头的小盒子span，还有问题反馈的盒子con，con盒子设置为绝对定位，设置left值刚好看不见，设置z-index=-1，让这个盒子在父盒子的下面。给父盒子添加鼠标经过事件，con传入动画函数中，传入目标值，同时添加回调函数，改变span.innerHTML使箭头反向。给父盒子添加鼠标离开事件，传入con,目标值，回调函数，箭头恢复，同时父盒子颜色变为灰色。

代码

<