首页 > 代码库 > web 动画实现方式

web 动画实现方式

这这里,总结了一些 我知道的不用框架来实现动画的方式,总的来说有两种,第一种是用css的transition或keyframes+animation,第二种用js来实现

首先看基本结构

<style>
  div {
    position: relative;
    background: #999;
    width: 50px;
    height: 50px;
  }

    .ani {

    }

</style>

<body>
  <div class="ani"></div>
</body>

  

一   css

1)  transition

 transition是渐变的意思,就是某个属性 从一个值逐渐变成另一个值,比如width:从50px,到200px

 基本表达式 transition: transition-property  transition-duration transition-timing-function transition-delay

  • transition-property :需要做缓动的属性,默认值为all,就表示所有可以缓动的属性都做缓动动画
  • transition-duration : 整个缓动动画的持续时间,比如1s 就是1秒
  • transition-timing-function : 缓动动画的呈现速度方式,默认值为ease,即 先慢再快再慢,还有linear(匀速)等其他方式
  • transition-delay : 延迟执行动画时间

举例:

.ani {
  transition: width 1s .4s linear;
}
		
.ani:hover {
  width: 200px;
}

  

这个动画呈现效果是:当鼠标移动到div上的时候,执行width 改变动画

很多其他的一些属性也可以,比如left,opacity 等等,这里就不详述了,感兴趣的可以自己试试

 

2)keyframes

包含两部分,第一个是使用animation属性,第二部分是:用@keyframes定义动画,

animation:

  • animation-name :  动画名字,就是 @keyframes 定义的动画名
  • animation-duration: 动画持续时间
  • animation-timing-function: 动画呈现的速度
  • animation-delay: 延迟时间
  • animation-iteration-count:动画播放次数,默认值:1,值是一个数字或infinite(表示无限次,其他的就是直接用数字表示)
  • animation-direction:当动画播放到100%的时候,是否需要反向播放,默认值:normal,如果需要方向播放则alternat
.ani {
    animation: testAni 2s infinite alternate;
}

注:播放完一次的会后,你会发现动画停留最开始的状态,但是你想停止在100%时候的状态,那怎么办呢? 你可以使用nimation-fill-mode:forwards 的方式到达目的

 

keyframes 

@keyframes testAni {
	0% {
	    width:50px;
	}

       30% {
           width:80px;
       }  
			
	100% {
	  width: 200px;
	}
}    

  

0% 表示最开始,30%,表示整个动画时间的30%,  100% 表示结束, 

中括号里面就是需要呈现动画的属性

 

注:动画优化:1)因为动画改变的太频繁,所以我们最好用position:absolute或fixed的方式把元素脱离文档流,避免频繁重绘

                2) 如果是定位属性:比如left,top等等,可以用transform:translate()的方式来替代,这样性能更好

 

注:transition适合于一次性的呈现动画,animation适合多次 或者需要控制中间过程的动画

二   javascript

1)  setTimeout

表达式:setTimeout(funcName,delayTime)

funcName:函数名字

delayTime: 延迟执行时间

window.onload = function(){
   var divDom = document.querySelector(".ani");
   var nowWidth = divDom.offsetWidth;
   var speed = 2;

function showAni(){ nowWidth += speed; if(nowWidth > 200){ nowWidth = 200; speed *= -1; } else if(nowWidth < 50){ nowWidth = 50; speed *= -1; } divDom.style.width = nowWidth + "px"; setTimeout(showAni, 20);   } showAni(); }

   

停止方法:使用clearTimeout(id)

 

2) setInterval

表达式:setInterval(funcName,delayTime)

表示程序间隔多少时间就执行一次func,是持续的,如果不使用clearInterval的话就一直执行,不像setTimeout是执行一次

具体的动画实现和setTimeout 的实现一样,只是调用方式不一样,

showAni改为:setInterval(showAni,40),然后showAni里面 删除 setTimeout那条语句

 

停止方法:使用clearInterval(id)

 

3) window.requestAnimationFrame()

window.onload = function(){
		   
   var divDom = document.querySelector(".ani");
   var nowWidth = divDom.offsetWidth;
   var speed = 4;
   var lastTime = 0;
   function showAni(nowTime){
		 
	 if(nowTime-lastTime > 20){
			 
		lastTime = nowTime;
		nowWidth += speed;
				
		if(nowWidth > 200 || nowWidth < 50){
					
			speed *= -1;
		}
				
	    divDom.style.width = nowWidth + "px";
     }
    window.requestAnimationFrame(showAni)
  }
		   
  window.requestAnimationFrame(showAni);
}

 

这个实现看起来 和setTimeout的方式差不多,但是因为浏览器针对requestAnimationFrame接口专门做了优化,简而言之就是把所有更新集中到

渲染期的最后一起集中渲染,所以效率更高

停止方法:cancelAnimationFrame(id)

 

注:1)nowTime-lastTime > 20 这个表达式只是为了设置间隔时间,因为一般情况下,执行这个方法的间隔时间是16.7秒的样子(60帧),

  用这个表达式可以来控制真正的逻辑执行的间隔时间

  2)用requestAnimationFrame加上canvas 可以实现一个动画引擎,当然这个只是核心,还包括其他的一些技术,才能实现,而且一般

     是在游戏中才会用到那么复杂的,所以这里就不去详述相关的东西

 

注:上面的所有停止方法里面的id 都是调用相关方法的返回值,比如 id = setTimeout(showAni,20);

 

这里只是列举 实现动画的方式,所有对每种方式没去深究,拿requestAnimationFrame来说,就可以说一整篇幅,如果感兴趣的,可以针对

每种方式再去深入研究,这篇就到此结束,欢迎拍砖

 

web 动画实现方式