前端制作动画的几种方式（css3，js）
|
副标题[/!--empirenews.page--]
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。 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等等）
值
描述
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> div { 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'），还可以使用队列机制进行步骤式的动画如： （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
