动画无非两类:帧动画frame和变形动画tween,以及3d动画。不论web还是安卓苹果app,动画原理都是这些。
web app 动画实现的途径,无非这几种:
1 gif动画---这就是帧动画,把若干图片按时间顺序串起来。gif不能为程序控制,主要应用在固定的重复动画效果。2 flash动画---可做复杂绚丽的动画,并可使用脚本。曾几何时flash在2000年左右火的一塌糊涂。随着html5的发展,相信flash市场份额会继续下滑。3 css动画---一般的动画效果配合,css3+html5可做很多动画效果,但是也容易消耗内存,使浏览器出现卡顿现象。4 脚本动画---也是这篇主要研究的jquery效果总结,可以通过程序控制动画,画质比gif要好很多。5 html5动画---html5+非常强大,也是webapp的未来。真有一统江湖的感觉。jQuery动画效果,在w3school.com.cn学习课程中是这几项
jQuery 隐藏/显示---hide() show()
jQuery 淡入淡出---fadeIn()从隐藏到可见, fadeOut()从可见到隐藏 ,fadeTo()把被选元素逐渐改变至给定的不透明度jQuery 滑动---slideDown()slideUp()slideToggle()jQuery 动画---animate() 方法用于创建自定义动画 语法: $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 animate() - 使用相对值,需要在值的前面加上 += 或 -= animate() - 使用预定义的值,可以把属性的动画值设置为 "show"、"hide" 或 "toggle" animate() - 使用队列功能,彼此之后编写多个 animate() 调用,逐一运行这些 animate 调用jQuery stop()---stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。 语法: $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此,默认地,stop() 会清除在被选元素上指定的当前动画。jQuery Callback---当动画 100% 完成后,即调用 Callback 函数。 典型的语法:$(selector).hide(speed,callback) callback 参数是一个在 hide 操作完成后被执行的函数。jQuery Chaining---Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。这样的话,浏览器就不必多次查找相同的元素。语法上也简洁优雅。 例如:$("#p1").css("color","red").slideUp(2000).slideDown(2000);在参考手册中jQuery 效果函数
方法 描述animate() 对被选元素应用“自定义”的动画clearQueue() 对被选元素移除所有排队的函数(仍未运行的)delay() 对被选元素的所有排队函数(仍未运行)设置延迟dequeue() 运行被选元素的下一个排队函数fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏fadeTo() 把被选元素逐渐改变至给定的不透明度hide() 隐藏被选的元素queue() 显示被选元素的排队函数show() 显示被选的元素slideDown() 通过调整高度来滑动显示被选元素slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换slideUp() 通过调整高度来滑动隐藏被选元素stop() 停止在被选元素上运行动画toggle() 对被选元素进行隐藏和显示的切换行胜于言!学习方法都需要实践演练才能掌握。马上示例Demo:Demo实现了领取奖励(红包)时的一个简单的动画,先是从小到大,然后抖动,最好显示红包金额。
有图胜万言。1、---先说html div---
<div class="a44 "> <div class="a441 vpbg "></div></div><div class="a45"> <div class="a451 vpbg "> <div class="a4513"> <span id="num"> </span>元 </div> </div></div>2、---再说样式---
/* 领取奖励 */.a44 { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }.a441 { position:relative; margin-top:222px; width:470px; height:282px; background-image:url('../img/act2/a6/redbag1.png'); }.a45 { position:absolute; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }.a451 { position:relative; margin-top:0px; width:653px; height:592px; background-image:url('../img/act2/a6/redbag2.png'); }.a4513 { width:100%; padding-top:200px; color:#fff799; font-size:2rem; text-align:center; }.a4513 span{ font-size:4rem; font-weight:bold; }/* 复用 邀请透明层 */.a91 { position:fixed; top:0%; left:0%; width:100%; height:200%; background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0!important; filter:Alpha(opacity=80); background:#000000; z-index:1000; display:none; }.a92 { position:fixed; top:0%; left:0%; width:100%; height:100%; z-index:1010; display:none; }.a921 { width:800px; height:600px; background-image:url('../img/user/invite.png'); }3、---jquery动画---
//备注说明:1、$(selector).animate({params},speed,callback);动画的callback没有试验成功,一个动画完结,下个动画并没有开始,而是两个动画一并执行了。为什么是这样,我还没弄明白。留待以后研究吧。2、抖动动画,结合了css样式shake shake-slow shake-constant3、关于时间方面,有两个函数可用。 setTimeout(function() {动画;},ms); //setTimeout函数是执行ms时长后结束,ms是毫秒。 setInterval(动画, 1500);//以1.5秒的频率,反复执行动画。 //动画效果--左右晃动 var changeDivPosition = function(){ $('.a12 img').animate({'left': '1.5%'}, 600).animate({'left': '0%'}, 600); }; changeDivPosition(); objSetInter = setInterval(changeDivPosition, 1500);
分享即学习,分享即成长。通过学习大牛们的博文,我也学会了以最大的诚意分享自己所学。一个人思路难免狭隘,对出现的错误,欢迎读过的朋友拍砖纠正一二。