javascript原生态写动画

长期用css写惯了的动画的我来说，用js写动画有些困难，不过有些地方必须要用JS才能做的出来，例如动画要替换字体内容，CSS就不可能做出来吧！今天就用原生态的JS写一个动画效果并替换字内容，话不多说。

首先思考效果，如图：

那么要实现这个，我首先想到了用闭包和计时器来实现，代码如下：

(function() {

    function someAnimation(args, obj) {
        obj.style.opacity = args / 5;
        obj.getElementsByTagName('h1')[0].style.right = args + "%";

    }

    //显示时间
    var time = 100;
    var a_time = 10000;
    var curIndex = 0;
    var banner_div = document.getElementById('heading');
    var xDiv = document.createElement('div');
    xDiv.id = 'xifan_content';
    xDiv.innerHTML = '内容';
    banner_div.appendChild(xDiv);

    for (var i = 0; i < time; i++) {
        setTimeout((function(pos) {
            return function() {
                someAnimation(pos, xDiv);
            }
        })(i / 10), i * 100)
    }
}

setInterval(run, a_time);
})()

　　

这里要给一些不明白的人解释下:

    //定义一个for循环，时间为time
　　for (var i = 0; i < time; i++) {
        setTimeout((function(pos) {
            return function() {
　　　　　　　　　　//这里的pos就是funtion的参数i/10,不懂的可以百度下JS闭包
                someAnimation(pos, xDiv);
            }
        })(i / 10), i * 100)
    }

效果基本出来了，我们要实现更换字母，需要定义数组，结合以上代码，完整如下：

 

<!DOCTYPE html>
<html lang="en" ng-app="app">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width" /> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <title></title> 
  <style type="text/css">
			#xifan_content{
				position:absolute;
                left:50%;
                top:50%;
			}
		</style> 
 </head>
 <body ontouchstart=""> 
  <div id="heading"> 
  </div>  
  <script language="javascript" type="text/javascript">
		(function(){

					
					function someAnimation(args,obj){
						console.log(args);
						obj.style.opacity=args/5;
						obj.getElementsByTagName('h1')[0].style.right=args+"%";
						
					}
					

					
					//显示时间
					var time=100;
					var a_time=10000;
					var curIndex=0;
					var banner_div = document.getElementById('heading');
					var xDiv = document.createElement('div');
						xDiv.id = 'xifan_content';
						banner_div.appendChild(xDiv);
					
					
					var arr=new Array(); 
						arr[0]="后勤是我家，服务靠大家"; 
						arr[1]="后勤后保,诚信可亲";
						arr[2]="脚踏实地,认真做事";						
						arr[3]="心随你动,服务大家";
						arr[4]="务实创新,全心服务";
						
						
					function run(){
						if (curIndex==arr.length-1) 
						{ 
							curIndex=0;
	
						} 
						else 
						{ 
							curIndex+=1;
							
						} 
						xDiv.innerHTML ='<h1>'+arr[curIndex]+'</h1>';
						for(var i=0;i<time;i++){
							setTimeout((function(pos){
								return function(){
									someAnimation(pos,xDiv);
								}
							})(i/10),i*100)
						}
					}
						
					run();
						
					setInterval(run,a_time);
				})()
		</script>   
 </body>
</html>

　　

posted @ 2017-11-08 14:05  一碗范特西  阅读(81)  评论(0)    收藏  举报