利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画。练习例子
css3:
1、圆角
border-radius:100%;
border-top-left-radius:5px;
2、变形
2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针)。
3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0。
3D旋转:transform: rotateY(25deg);-----效果为div的宽度变小(左右border同时内缩),90deg时宽度为0。
缩放:transform:scale(1,0.5);或transform:scaleX(1);或transform:scaleY(0.5);
移动:transform:translate(20px,-10px);或transform:translateX(20px);或transform:translateY(-10px);
倾斜:transform:skew(10deg,20deg);或transform:skewX(10deg);或transform:skewY(20deg);
3、动画
animation使用方法:
3.1、利用@keyframes定义动画效果:
@keyframes animateName{ 0% {(多个)css规则;}------必备,表示动画开始时的效果 30% {;}------非必备,表示经过了整个动画时间(一个周期)的3/10后的效果 100% {;}------必备(当只有0%和100%是可以用from和to代替),表示动画结束时的效果 }
3.2、在某节点上使用动画,同时定义动画的下列属性,如
div{animation:animateName 2s linear 1s 3;}
其中:
动画的速度曲线animation-timing-function(默认值为ease,常用的为linear)
、
如果要无限次执行动画,则定义animation-iteration-count为"infinite"。
animation-direction的默认值为"normal"表示正常播放动画,
"alternate"则表示轮流反向播放动画,即动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
animation-play-state可控制动画暂停paused或(继续)执行:running。
在js中控制这些属性:
document.getElementById(‘id1‘).style.animationPlayState=‘paused‘; document.getElementById(‘id‘).style.WebkitAnimationPlayState=‘paused‘;
在style中定义:
<div style=‘animation-play-state: paused;-webkit-animation-play-state: paused;‘>
注意:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
queue:
queue主要用于给元素上的函数队列(默认名为fx)添加函数(动画效果),
这样dequeue就可以取出并执行函数队列中的第一个函数(即最先进入函数队列的函数),
delay则可以延迟元素上函数队列的执行。
jquery的动画效果,如animation()、show()、slideUp()、fadeIn()等在我看来它的效果就是用queue给fx队列添加一个函数,然后用dequeue调用了它。
queue相关用法:
.queue(queueName):元素上的函数队列
.queue(queueName,newQueue):用newQueue替换掉queueName,所以.queue(queueName,[])即为停止动画。
.queue(queueName,callback):queueName执行完后的回调函数,它会忽略后续queueName的动画函数
.clearQueue(queueName):清空(剩余)函数队列,正在执行的那个函数会继续
.dequeue(queueName):取出并执行函数队列中的第一个函数
.delay(time,queueName):过time(单位为毫妙)后才执行queueName中的函数
注:以上忽略queueName是即为默认的‘fx‘
.stop()或.stop(false):跳过正在执行的那个函数,立马运行下一个动画函数
.stop(true):立即停止动画
.stop(false,true):立即跳到当前函数的结束状态,开始执行下一个函数。
但是stop()只能清空动画队列,不能清空所有通过 .queue() 创建的队列(clearQueue可以)。
animation中也用到了queue:
.animation(params,options):
params::一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如常用的有:
duration/speed - 设置动画持续的时间;
easing - 规定要使用的 easing 函数,jquery只提供了swing(默认值)和linear,要用别的需要下载插件,
可在http://james.padolsey.com/demos/jquery/easing/查看各种效果;
callback - 规定动画完成之后要执行的函数;
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始(如果当前有正在执行的动画函数,则它会与之同时执行)
来看看实例练习:
参考jQuery动画高级用法(上)——详解animation中的.queue()函数
我们知道如果这样:
$(‘#id1‘).fadeOut(‘slow‘).fadeIn(‘slow‘);
结果是:id1会先消失,然后再出现。
若要达到先消失,然后再另一个div里出现的效果,如果这样写:
实例练习1:
$(‘#id1‘).fadeOut(‘slow‘).appendTo($(‘#rightC‘)).fadeIn(‘slow‘);
id1
结果是:id1先append,然后fadeOut,再fadeIn;
为什么没有按代码书写的顺序执行呢?
原因是元素上的非动画函数(如改变css或是append等)就是会自动先于动画函数执行。
为了改变这种情况,我们可以人为的把非动画函数也加入函数队列,然后执行它就可以了。
修改为:
实例练习2:
$(‘#id1‘).fadeOut(‘slow‘) .queue(function(){$(this).appendTo($(‘#rightC);}) .fadeIn(‘slow‘);
测试一下:
id1
结果id1消失了,通过查看源代码可以发现append也执行了,但是fadeIn却没有执行,为什么呢?看前面的“queue相关用法”就知道了。
怎样修改能达到预期效果呢?
试试下面这样:
实例练习3:
$(‘#id1‘).fadeOut(‘slow‘) .queue(function(){$(this).appendTo($(‘#rightC‘)).dequeue();}) .fadeIn(‘slow‘);
测试一下:
id1
结果是:变现正常。
如果这样呢:
实例练习4:
$(‘#id1‘).fadeOut(‘slow‘) .queue(function(){$(this).appendTo($(‘#rightC‘)).dequeue();}) .fadeIn(‘slow‘) .fadeOut(‘slow‘);
继续测试:
id1
结果也是与预期效果一致,fadeIn结束后即使没有.dequeue(),后一个动画函数也会自己执行。
再来看另一个实例:
实例:
同样来自jQuery动画高级用法(上)——详解animation中的.queue()函数
一个div样式为:
#object{position:absolute;width:200px;height:200px;top:100px;left:0;background:blue;}
现在要达到这样的效果:
在2s内top由默认的100px均匀变为60px,并且在那2s的后1s内opacity由默认的1慢慢变为0。
我首先想到的是:
实例练习5:
$(‘#object‘).animate({top:‘-=20‘},1000) .animate({top:‘-=20‘,opacity:0},1000);
object
结果:在第1s到第2s之间有明显的停顿,整体的向上移动并不是匀速的。
自然修改成下面这样:
实例练习6:
$(‘#object‘).animate({top:‘-=20‘},{duration: 1000, easing: ‘linear‘}) .animate({top:‘-=20‘,opacity:0},{duration: 1000, easing: ‘linear‘});
object
结果:正常了。
换一种方法:
top不拆成两部分,而是设置一秒以后同时运行opacity。
实例练习7:
$("#object") .delay(1000) .queue(function() { $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue(); }) .animate({top: "-=40"}, {duration: 2000});
object
结果是:1s以后同时开始了opacity和top,这不符合要求。
原因很容易理解:delay针对的是‘fx‘,queue是立马添加函数成员到‘fx’并运行,animate也是‘fx‘中的成员。所以为了仅仅delay变化透明度的动画效果,必须把它和‘fx‘区分开来。
实例练习8:
$("#object") .delay(1000,‘fade‘) .queue(‘fade‘,function() { $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue(); }) .animate({top: "-=40"}, {duration: 2000});
object
实例练习9:
复习css3的部分属性和jquery的queue方法