浅谈前端实现动画效果的一些方式(包括但不限于)。
以下内容是我16年3月份在公司做内部分享时的一些内容,虽然时间有点远,但是我觉得还是比较适用的。
1. Flash,很久以前都会使用的一个方式,在十年以前甚至有很多用纯flash做的网站,我自己还做过一个,还是比较有意思的。到了中期,用flash来做动画效果后再引到html内,在html5 video之前也基本用flash的音视频播放器。现在基本已经弃用。
2. GIF图片
定时器:实现上就是通过一个定时器setInterval 每隔一定时间来改变元素的样式,动画结束时clearInterval即可。早期的类库包括 jquery、prototype等等都是这种方式。在CSS3之前,最初的前端动画大多都是JS来实现。
4. css3动画
transition过渡:顾名思议,可以实现一些简单的不需要太多的控制与步骤的过渡动画。
animation动画:与transition不同的是,animation属性可以像FLASH制作动画一样,通过关键帧控制动画的每一步,实现更为复杂的效果。并且功能更强大。
css3动画相比与JS动画更轻量,性能更好,更易于实现。animation相比 transtion 使用起来更为复杂,但也提供了更多的控制。
css3动画缺点:不同的动画无法实现同步,多个动画彼此无法堆叠,复杂的动画编辑麻烦,低版本兼容性不好。
关于CSS3动画,网上案例太多,就不细说了。
5.SVG实现动画
svg动画能够实现的:
前面的三条CSS3都是可以有所担当的,最后这一条,呵呵。
示例1:
<svg width="120" height="420" > <rect x="10" y="10" width="100" height="100"> <animate attributeType="XML" attributeName="y" from="-100" to="120" dur="5s" repeatCount="1" fill="remove"/> </rect> </svg>
attributeType:CSS|XML|auto,变化的是属性还是CSS还是自动匹配,可以省
attributeName:要变化的元素属性名称,也可以是CSS名称
from:开始值
to:结束值
repeatCount:表示动画执行次数,可以是合法数值或者无限“indefinite”
dur:动画时间,常见单位有 "h"|"min"|"s"|"ms"
fill:表示动画结束状态。支持参数有:freeze | remove. 其中remove是默认值,表示动画结束直接回到开始的地方。freeze“冻结”表示动画元素保持了动画结束之后的状态。
不写form to的情况下,可以写values="300;200;300"
示例2:多个变化一起
<svg width="800" height="300" > <g transform="translate(100,100)" > <text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden" > It's alive! <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="6s" fill="freeze" /> <animateMotion path="M 0 0 L 100 100" begin="1s" dur="6s" fill="freeze" /> <animate attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="1s" dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="6s" fill="freeze" /> </text> </g> </svg>
set:是animate的简化,主要用来改变非数值属性的属性值。
begin:延时开始
animateMotion:沿某运动路线移动SVG元素。
additive控制动画是否附加。支持参数有:replace | sum. 默认值是replace.
示例3:延着某一路径
<body> <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg> <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg> <svg width="5cm" height="3cm" viewBox="0 0 500 300"> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animateMotion> </path> </svg> </body>
通过将 rotate="auto" ,用来控制是否自动旋转
示例4:SVG结合CSS3做点有意思的事情:
<style> * { margin: 0; padding: 0; } path { stroke-dasharray:44;animation: dash 5s linear infinite; } @keyframes dash { to { stroke-dashoffset: 1000; } } </style> </head> <body> <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg> </body>
和
<style> * { margin: 0; padding: 0; } path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear infinite; } @keyframes dash { to { stroke-dashoffset: 0; } } </style> </head> <body> <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg> </body>
svg动画总结
html5 的canvas、webgl,只是增加了绘画方式的选择,与动画的怎么变化无关,没有实现动画的API,你必须依靠定时器和其他事件来更新画布。所以与本次说的主题动画无关。但是html5也提供了一个新的动画接口....
6.RAF
性能更好的js动画实现方式——requestAnimationFrame。
前面说过,JS定时器有着严重的性能问题,虽然某些现代浏览器对这两函个数进行了一些优化,但还是无法跟css3的动画性能相提并论。但是css3动画还是有不少局限性,比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。这个时候,就该requestAnimationFrame出马了。
这专门为实现高性能的帧动画而设计的一个API,目前已在多个浏览器得到了支持,包括IE10+,Firefox,Chrome,Safari,Opera等,在移动设备上,ios6以上版本以及IE mobile 10以上也支持requestAnimationFrame,唯一比较遗憾的是目前低版本安卓上并不支持,不过未来全面支持这已经是大势所趋。
<body> <div id="box" style="width:1px;height:100px; background:red"></div> <script> var oBox=document.getElementById('box'); var w=1,id; function render(t){ console.log(t);//返回的间隔时间 w++; oBox.style.width=w+'px'; if(w<500)id=requestAnimationFrame( render ); console.log(id); }; id=requestAnimationFrame( render ); oBox.onclick=function(){ cancelAnimationFrame(id); //通过id停止 }; </script> </body>
是不是看起来很简单就可以实现。
* 总结:
无论何种需求,首选RAF
轻量级简单动画用css3
复杂动画效果CSS3不能满足的情况下用JS定时器
以上都无法满足的情况下还是网上找相应的动画库吧(js库、css3库、svg动画库) *
我来评几句
登录后评论已发表评论数()