前端制作动画的⼏种⽅式（css3，js）
制作动态的⽹页是是前端⼯程师必备的技能，很好的实现动画能够极⼤的提⾼⽤户体验，增强交互效果，那么动画有多少实现⽅式，⼀直对此有选择恐惧症的我就总结⼀下，以便在开发的时候选择最好的实现⽅式。
1.css的transition。
语法：
transition: property duration timing-function delay;
property：填写需要变化的css属性如：width,line-height,font-size,color等;
duration：完成过渡效果需要的时间（2s 或者2000ms）
timing-function：完成效果的速度曲线（linear,ease,ease-in,ease-out等等）
值描述
linear匀速（等于 cubic-bezier(0,0,1,1)）。
ease从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in慢慢变快（等于 cubic-bezier(0.42,0,1,1)）。
ease-out慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。渐显渐隐效果
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义⾃⼰的值。可能的值是 0 ⾄ 1 之间的数值。
timing-delay：动画效果的延迟触发时间（2s 或者2000ms）。
默认值分别为：all 0 ease 0
transition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。
这种动画⽅式是css3的，因此ie9以下是不⽀持的，其他的浏览器需要加前缀，并且只有两态，不⽀持⾃定义中间的状态。
例⼦：
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
<div></div>
tips：transform是⼀种变化属性，该属性允许我们对元素进⾏旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。
前缀：
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
2.css3的animation属性
语法：
animation: name duration timing-function delay iteration-count direction;
name:keyframe的名称，也就是定义了关键帧的动画的名称，这个名称⽤来区别不同的动画。
duration：完成动画所需要的时间（2s 或者 2000ms）
timing-function：完成动画的速度曲线
delay：动画开始之前的延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画（normal：正常顺序播放，alternate下⼀次反向播放）如果把动画设置为只播放⼀次，则该属性没有效果。
使⽤animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的⽐例。
animation是设置总的动画效果，⽽keyframe中设置上相应的动画名字，然后在keyframe中设置具体的动画效果。当然由于是css3的属性，仍然需要注意它的兼容性，加上必须的前缀。
例⼦：
<style>
divrotate属性
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}
</style>
<div></div>
3.Jquery的animate函数
语法：
$(selector).animate(styles,options)
styles：产⽣动画的css样式和值；
options={
speed：动画的速度（可选参数：slow,normal,fase）
easing：动画的速度函数（可选参数：swing，linear）
callback：动画完成之后要执⾏的函数；
queue：是否放置在效果队列中，是布尔值，为false则⽴即开始
specialEasing:styles参数的⼀个或多个属性映射及对应的easing函数。}
$(myElement).animate({
left: 500,
top: 200
}, {
duration:'3000',
specialEasing: {
left: 'swing',
top: 'linear'
}
});
该⽅法通过CSS样式将元素从⼀个状态改变为另⼀个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（⽐如 "margin:30px"）。字符串值⽆法创建动画（⽐如 "background-color:red"）。
可以使⽤的属性有：（使⽤⽐如 "fontSize"来设置，⽽⾮ CSS 名称（⽐如 "font-size"））
backgroundPosition，borderWidth，borderBottomWidth，borderLeftWidth
borderRightWidth，borderTopWidth，borderSpacing
margin，marginBottom，marginLeft，marginRight，marginTop
outlineWidth
padding，paddingBottom，paddingLeft，paddingRight，paddingTop
height，width
maxHeight，maxWidth，minHeight，minWidth
font，fontSize
bottom，left，right，top
letterSpacing，wordSpacing，lineHeight，textIndent
可见通过jquery的animation⽣成动画的过程中可同时使⽤多个属性，也可以定义相对值（该值相对于元素的当前值）。需要在值的前⾯加上 += 或 -=，如（height:'+=150px'），还可以使⽤队列机制进⾏步骤式的动画如：
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
动画就会按照顺序⼀步⼀步实现，并且不⽤考虑兼容性，因为⼏乎都兼容。
但是，animate函数只能够实现⼀些数值属性，能够实现的变化⾮常有限制，⽽且使⽤这个函数时还要配合stop来使⽤，在达到某条件时终⽌动画，设置⽐较复杂。
4.原⽣js动画
原⽣js动画利⽤js代码，将动画⼀步以函数的⽅式写出来，可以实现多种动画样式，⽽且可以⾃⼰做兼容性处理，⾃⼰设⽴每⼀步的动画效果，并且能够完成⽐较复杂的效果，但是代码量很⼤。如下⾯的例⼦：需要⾃⼰定义所有的动态函数，并进⾏计算、判断和处理
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv">
</div>
</div>
<script language="javascript">
var odiv = ElementById('odiv');
startMover(0);
}
startMover(-200);
}
}
var timer = null;
function startMover(a){//速度和⽬标值
clearInterval(timer);//执⾏当前动画同时清除之前的动画
var odiv = ElementById('odiv');
timer = setInterval(function(){
var speed = (a-odiv.offsetLeft)/10;//缓冲动画的速度参数变化值
//如果速度是⼤于0，说明是向右⾛，那么就向上取整
speed = speed>il(speed):Math.floor(speed);
//Math.floor()；向下取整
if(odiv.offsetLeft == a){
clearInterval(timer);
}
else{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},30);
}
</script>
5.插件
⽹上可以搜到很多封装好的动画插件，这些插件可以直接引⼊到页⾯中，通过初试话和配置的⽅式进⾏设定，直接在页⾯中展⽰动画。
如：waves，textillate.js等等。
6.使⽤canvas制作动画
我们还可以使⽤canvas在浏览器上画图，并且利⽤其api，制作动画。canvas使⽤的地⽅⾮常多，尤其是在制作h5⼩游戏上。
同样都是使⽤编码的⽅式由前端开发⼯程师完成动画效果，canvas要⽐原⽣js效率⾼的多，流畅的多。通过画笔的⽅式，能够轻松的实现更多的动画效果。
⾄于canvas如何使⽤，请看我博客中正在连载的教程--html5 canvas常⽤api总结。
7.引⽤gif图⽚
如果在需求特别紧急，⽽且动画⼜特别复杂的情况下，⾃⼰没有把握按时实现效果，或者代价太⼤，真的，别犹豫，上gif图⽚吧，不要在技术上纠结了，虽然在⼯程师的⾓度上这样做很low，但是，⽤户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！
内容原创，转载请注明出处：
作者：Jess_喵
来源：wwwblogs/zhangwenjiajessy/p/6154703.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论