欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  1、javascript直接实现
 
  主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。
 
  
 
  <divid="rect"></div>
 
  <script>
 
  letelem=document.getElementById('rect');
 
  letleft=0;
 
  lettimer=setInterval(function(){
 
  if(left<window.innerWidth-200){
 
  elem.style.marginLeft=left+'px';
 
  left++;
 
  }else{
 
  clearInterval(timer);
 
  }
 
  },16);
 
  </script>
 
  缺点:javascript实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。
 
  2、SVG(可伸缩矢量图形);
 
  3、CSS3transition;
 
  4、CSS3animation;
 
  5、Canvas动画;
 
  6、requestAnimationFrame;
 
  requestAnimationFrame是另一种WebAPI,原理与setTimeout和setInterval类似,都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi,在性能上比另两者要好。
 
  
 
  
 
  <divid="rect"></div>
 
  <scripttype="text/javascript">
 
  window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
 
  letelem=document.getElementById("rect");
 
  letleft=0;
 
  //自动执行持续性回调
 
  requestAnimationFrame(step);
 
  //持续该改变元素位置
 
  functionstep(){
 
  if(left<window.innerWidth-200){
 
  left+=1;
 
  elem.style.marginLeft=left+"px";
 
  requestAnimationFrame(step);
 
  }
 
  }
 
  </script>
 
  7、jq动画
 
  1)显示隐藏:
 
  .show(ms).hide(ms).toggle(ms)不带参数时默认瞬间显示隐藏,不带动画,原理:display属性实现的,带毫秒数参数:会有动画效果。
 
  toggle显示被隐藏的元素,并隐藏已显示的元素
 
  2)上滑下滑:.slideUp(ms).slideDown(ms).slideToggle(ms)
 
  3)淡入淡出:.fadeIn(ms).fadeOut(ms).fadeToggle(ms)
 
  2.万能动画:
 
  $(…).animate(params,speed,callback)
 
  params:一个包含样式属性及值的映射
 
  speed:速度参数[可选]
 
  callback:在动画完成时执行的函数[可选],回调函数中的this,指正在播放动画的当前DOM元素
 
  8、总结
 
  桌面端浏览器推荐使用javascript直接实现动画或SVG方式;
 
  移动端可以考虑使用CSS3transition、CSS3animation、Canvas或requestAnimationFrame方式







本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56859.shtml