前端-js网页特效（三）动画效果及原理

 

目录

 前言

一、动画效果实现过程

结构搭建

解析部分

效果部分：

二、缓动动画效果实现过程

结构搭建（其实一样）

解析部分

细节部分：

效果部分：

三、结束语

---

前言

       在小糖上一篇文章中，小糖提到了制作动画效果中至关重要的offsetLeft对象，还没看的小伙伴可以先补补课，（链接）
那么，本文主要讲解动画效果的实现过程及应该注意的细节。

一、动画效果实现过程

结构搭建

我们先书写一个跳绳的小狗

     css    

 * {
            padding: 0;
        }
        .box {
            background-color: #fff;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
        }
        img {
            width: 100%;
            height: 100%;
        }

        

    html

<button>移动</button>
<div class="box">
    <img src="./img/jumping dog.gif" alt="">
</div>

解析部分

js动画部分，我们选择书写成一个函数 animate(obj,target)

1、声明一个形参是对象和目标位置的函数 animate(obj,target)

2、获取元素的当前位置，与目标值作比较，小于目标值则开启计时器向右加5px

3、关闭定时器的条件：元素的当前位置大于目标值

4、利用按钮点击调用该函数

最后还要注意给元素添加css定位，不然小狗可不动哦！

这样小狗就可以移动啦，代码如下
    

var box = document.querySelector('.box');
            var btn = document.querySelector('button');
    function animate(obj,target){
                var timer = setInterval(function(){
                if( obj.offsetLeft >= target){    //结束条件
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 10 +'px';
              },20);
            };
            btn.addEventListener('click',function(){
                    animate(box,200);
            })

效果部分：

 

上面的小狗是匀速移动的，但网页移动图片常常不是匀速移动，而是一种看起来更为舒服的缓动效果，如何实现呢？

    这次我们换成小海豚~

二、缓动动画效果实现过程

结构搭建（其实一样）

 css

* {
            padding: 0;
        }
        .box {
            background-color: #fff;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
        }
        img {
            width: 100%;
            height: 100%;
        }

      html

<button>移动</button>
<div class="box">
    <img src="./img/hantun.gif" alt="">
</div>

解析部分

js动画部分，我们还是书写成一个函数 animate(obj,target)
1、声明一个形参是对象和目标位置的函数 animate(obj,target)

2、获取元素的当前位置，与目标值作比较，小于目标值则开启计时器

3、速度由匀速改为缓动，公式为：（目标位置 - 当前位置）/ 10，声明为一个变量

4、在定时器中，每40ms添加到元素的offsetLeft实现移动

5、关闭定时器的条件：元素的当前位置大于目标值

6、利用按钮点击调用该函数

细节部分：

（1）在每次开启计时器之前都要清除所有计时器，这样不会出现bug
（2）还要注意数据的取整，不然会造成偏差！

最后还要注意给元素添加css定位，不然小海豚也不动哦！

这样小海豚就可以移动啦，代码如下
      

 var box = document.querySelector('.box');
        var btn = document.querySelector('button');
        function animate(obj,target){
            clearInterval(obj.timer);                    //保证只有一个计时器 避免出现bug
             obj.timer = setInterval(function(){
                //步数加在计时器里
                var step = (target - obj.offsetLeft)/10;            //公式声明为一个变量
                step = step > 0? Math.ceil(step) : Math.floor(step);//取整 防止实际效果偏差
            if( obj.offsetLeft >= target){  
                clearInterval(obj.timer);                           //关闭计时器
            }
            obj.style.left = obj.offsetLeft + step +'px';
        },40);
        };
        //按钮调用该函数
        btn.addEventListener('click',function(){
            animate(box,400);
        })

效果部分：

 

三、结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤