PS:本文是很简单的JS动画示例,如您不是JS菜鸟,没有看下去的必要。
当我们把连贯性的动作画到手册上,然后快速的翻页,这样就会在视觉上形成动画,至少从感官上觉得那是动画。对于动画,这的确是很形象的说明,一页一张图片,而一张图片代表一帧,这样所有的帧连续运行起来就形成了视觉上的动画。用JS来表现也是这个原理。之前Google为了纪念埃德沃德-麦布里奇182周年诞辰,在主页上放置了运动的马Doodle,我没看过源代码,但想必也是这样的原理。
首先来看这张网上荡下来的图片:
上面是鸟开始煽动翅膀加速到结束的几个连贯动作,按照上面的原理,很容易想到,只要按顺序把1-6的动作不断地覆盖循环,就可以形成鸟煽动翅膀的完整动作了。JS如何实现呢?
首先先定义一个能够承放一只鸟的容器:
<div id="one" class="secondWay"></div>
<div id="two" class="secondWay"></div>
<div id="three" class="secondWay"></div>
<div id="four" class="secondWay"></div>
<div id="five" class="secondWay"></div>
上面定义了五只鸟,CSS如下:
body{
overflow:hidden;
}
.secondWay{
width:112px;
height:95px;
background:transparent url(../images/bird.png) no-repeat top left;
}
bird.png即为上面的图片。body的overflow设置为hidden,目的是防止鸟飞出页面时产生滚屏。
接下来第二步就是让图片上的鸟的动作,不断(1-6,6-1不断循环)地在容器(DIV)上更替出现,从而形成煽动翅膀的动画:
var birdOption = {
divid: document.getElementById(divid),//承载鸟图片的div
birdsCount: 6,//图片中鸟的个数
moveWidth:112,//图片移动的宽度
speed: 10, //飞行速度
timeMils: 120, //变换动作时间 毫秒
marginLeft: -document.getElementById(divid).clientWidth*(i%2 == 1 ? i : 2),//div的初始位置,通过其改变鸟的顺序
birdIndex: 0 //图片中鸟的索引,从0开始,0代表第一只
};
/**
* 相当于启动一个线程,用于不断更换鸟飞的动作图片,模拟鸟飞的形态
*/
(function(){
if(birdOption.birdIndex == birdOption.birdsCount) birdOption.birdIndex = 0;
birdOption.divid.style.backgroundPosition = "-" + (birdOption.birdIndex * birdOption.moveWidth) + "px 0px";
window.setTimeout(arguments.callee, birdOption.timeMils);
birdOption.birdIndex++;
})();
上面用到了一个立即执行的闭包,并按照设定的时间间隔不停地自调用,从而实现鸟动作的更替。
最后一步是让鸟真正的飞起来,上面只是煽动翅膀而已,可以通过改变DIV的左边距来实现:
/**
* 相当于启动一个线程,用于不断改变鸟的左边距,模拟鸟在向右飞行
*/
(function(){
if(birdOption.marginLeft > document.body.clientWidth) birdOption.marginLeft = -birdOption.divid.clientWidth;
birdOption.divid.style.marginLeft = birdOption.marginLeft;
window.setTimeout(arguments.callee,birdOption.timeMils);
birdOption.marginLeft = birdOption.marginLeft + birdOption.speed;
})()
也是通过闭包来实现,立即运行且不停地自调用,从而实现鸟在页面上从左向右的飞行。
这样就完成了整个过程。按照上面的原理,如果有更多连贯性的动作,那就完全可以模仿鸟在自然状态下的各种飞行状态,但前提是你能PS出这些图片,我觉得这个要比写Javascript难多了。。。。
- 大小: 20.4 KB
分享到:
相关推荐
一款简单的js动画插件
最简单 最完整 亲自手写 无缝滑动动画js脚本
micron.js是一个可生成炫酷CSS3动画的js动画库的插件。通过micron.js插件,你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。简单实用,欢迎下载!本...
使用激素实现的hover效果
某课网----------------JS动画效果的所有课程源代码,包括图片素材,都可直接运行。(含注释)
js动态弹出动画响应式模态框单击按钮激活模式。三个演示,代码都在简单易懂
简约的方式来创建JS动画!
这是一个使用JavaScript写的队列动画实现的简单实例,可供交流参考
HTML-JAVASCRIPT动画基础;包含“动画基础”“渲染技术”“矩阵数学基础”“3D动画”“高级动画”“碰撞检测”“物理运动学”等网页上动态动画以及高级动画的知识
textillate.js文本动画示例及JS插件资源,该插件简单易用,适用于现在浏览器
three.js制作简单动画,模拟月球绕地球公转。渲染器为CanvasRenderer
脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...
网上也有很多封装好的JS动画库,但大多因为功能过于完善,而至于代码量大动辄过千行,不宜在小项目中使用。这里自己封装了一个很轻量的动画库,主要功能都已实现。难免有疏漏之处,还请大家多多指教。 这里先说明...
一款很简单的JS冒泡动画效果文字云标签代码,一个个文字标签从下往上像气泡缓缓上升动画效果。
这是一款炫酷js鼠标跟随动画特效插件。该js插件提供了5种鼠标跟随的动画特效,使用非常简单,效果非常炫酷。
js 实现的动画库使用简单易懂欢迎大家下载使用
JavaScript js下拉刷新,不通过数据库刷新,不调用后台的一个效果,还有个下拉加载的动画,如果需要的可以用,最近写的关于交通出行的项目一个列表需要,整了这个,最后没用,就分享下。算是一个完整的页面吧,css+...
百度降雪动画 js+html,炫丽效果,简单实现
javascript简易动画类 宽度渐变 高度渐变 透明度渐变 边框渐变 综合渐变
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧