前言

一、动画效果实现过程

结构搭建

解析部分

效果部分：

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

结构搭建（其实一样）

解析部分

细节部分：

效果部分：

三、结束语

前言

在小糖上一篇文章中，小糖提到了制作动画效果中至关重要的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);                    //保证只有一个计时器 避免出现bugobj.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);})

效果部分：

三、结束语

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

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

前端-js网页特效（一）倒计时效果及原理
目录一.原理二.代码解析(内有注释) css部分 HTML部分: script部分: 三.实际效果图四.结束语一.原理说到倒计时效果,基本面实现的话离不开 setInterval()这个方法 ...
html5点击效果文字跳转,JS网页特效代码，点击跳出爱心和文字特效
鼠标左键点击网页会跳出爱心,相信不少站长见过这种JS网页特效,有些点击还会跳出文字.橘子君也是觉得挺好奇的,然后也给网站加了一段时间这种特效,后来由于种种原因的考虑,博主又将该代码删除了.如果你对这种 ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
html盒子移动动画代码,js实现盒子移动动画效果
本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 content="width=device-width, user-scalable=no, initial ...
babylon.js小人快跑动画效果
babylon.js小人快跑动画效果 var createScene = function () {// This creates a basic Babylon Scene object (non- ...
html5行星环绕,Two.js实现星球环绕动画效果
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁.本文主要介绍了基于Two ...
JS网页特效实例：禁止网页放入框架
在网络上,为了防止网页被随意地引入到别人的框架里,可以通过判断网页是否为最顶层网页来禁止网页被放入框架. 补充下面代码,禁止网页放入框架. ```html <!DOCTYPE HTML> ...
网页版时钟动画效果 html模板
即时时间展示,HTML模板,网页版时钟动画首先看图:在线演示然后看>>> <!doctype html> <html> <head> < ...
html动画的原理,HTML5 Canvas动画效果实现原理
在线演示使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, ...
前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

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

前言

一、动画效果实现过程

结构搭建

解析部分

效果部分：

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

结构搭建（其实一样）

解析部分

细节部分：

效果部分：

三、结束语

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

最新文章

热门文章