animation动画

小案例：

html布局：

<div class="wrap">
    <ul>
        <li class="go">
            <img src="imgs/0.png" alt="" class="up"/>
            <img src="imgs/0.png" alt="" class="down"/>
        </li>
        <li class="go">
            <img src="imgs/0.png" alt="" class="up"/>
            <img src="imgs/0.png" alt="" class="down"/>
        </li>
        <li>
            <img src="imgs/d.png" alt="" />
            <img src="imgs/d.png" alt="" />
        </li>

　　　　...

    </ul>
</div>

 

CSS样式：

.wrap{
    width: 355px;
    height: 60px;
    padding: 0 10px;
    margin: 50px auto;
    border: 1px dashed #c1c1c1;
    border-radius: 4px;
    overflow: hidden;
}
.wrap ul{
    margin: 0 auto;
    width: 100%;
    height: 60px;
}
.wrap ul li{
    display: inline-block;
    position: relative;
    width: 40px;
    height: 60px;
}
.wrap ul li img{
    position: absolute;
}
.wrap ul li .up{
    top: 0;
}
.wrap ul li .down{
    top: 60px;
}

 

JS：

var aUp = document.getElementsByClassName('up');
var aDown = document.getElementsByClassName('down');
var timer;
var timeStr;

//设置时间
function time(){
    
    var time = new Date();
    var hours = time.getHours();
    var min = time.getMinutes();
    var sec = time.getSeconds();
    timeStr = add(hours) + add(min) + add(sec);
    
}
time();

//设置图片为当前时间
for(var i=0;i<aUp.length;i++){
    
    aUp[i].src = 'imgs/' + timeStr[i] + '.png';
    aUp[i].num = aDown[i].num = timeStr[i]; //记录
}

//间歇调用设置时间
timer = setInterval(function(){
    
    time();

    //判断哪位数字发生改变
    for(var i=0;i<aUp.length;i++){
        
        if(aDown[i].num !== timeStr[i]){
            aDown[i].num = aUp[i].num = timeStr[i];
            change(aUp[i]);
            change(aDown[i]);
        }
        
    }
    
},500);

//图片切换
function change(obj){
    
    var topValue = parseFloat(getStyle(obj,'top'));
    
    if(topValue == 0){
        
        animation(obj,{top:-imgHeight},500,function(){
            obj.style.top = imgHeight + 'px';
        });
        
    }else if(topValue == imgHeight){
        
        obj.src = 'imgs/' + obj.num + '.png';
        animation(obj,{top:0},500);
    }
    
}

//各位数字补零
function add(num){
    return num<=9 ? '0' + num : num .toString(); 
}

 

 

animation动画函数封装：

这里动画函数作为一个js文件引入

<script src='js/animation.js'></script>

 

//动画函数
 function animation(obj,json,dura,callback){
     
    var init = {}; //预设初始值; //{left:0;height:100;width:100};
    var target = {};//预设目标值;
    
    for (attr in json) {
        
        //console.log(attr,json[attr]);
        init[attr] = parseFloat( getStyle(obj,attr)  );//存初始值 且转数字；
        
        target[attr] = parseFloat(json[attr]);//转数字
        
    }
    
    var init_t = new Date();//初始时间
    var run_t;
    var run_val;
    var a;
    
    (function reAniamtion(){
        
        run_t = new Date()-init_t;//动画运行时长
        
        if(run_t>=dura){//到达目标
            
            run_t=dura;
            
        }else{//未到达目标
            
            requestAnimationFrame(reAniamtion);
            
        }
        
        for (attr in json) {
            
            a = (target[attr] - init[attr])*2/Math.pow(dura,2);
            
            run_val = a*Math.pow(run_t,2)/2;
            
            obj.style[attr]= init[attr]+run_val+(attr !=='opacity'?'px':'');
            
            
        }
        
        run_t>=dura ?callback&&callback():'';
        
    })();
}

//获取属性
function getStyle(obj,attr){
    
    return window.getComputedStyle?window.getComputedStyle(obj)[attr]:obj.currentStyle[attr];
    
}