首页 > 代码库 > 项目动画处理

项目动画处理

1,最少转一圈处理,设置两个全局变量记录最短翻转时间(翻转一圈的时间),另一个变量记录请求是否返回,两者均满足的时候停止动画就达到了控制动画最少翻转一圈的效果。

function getData(){// 获取数据函数
    window.isRes = false;//全局变量是否返回
     window.isEndSmallTime = false;//全局变量最小时间是否结束
    $.getAjax({
        url:‘‘,
        data:{},
        success:function(){
             window.isRes = true;
             if(window.isEndSmallTime && window.isRes){
                   doResult(); // 结果处理(停止动画)
               }
        }
    });
}


       /**
         * 停止翻转最小时间设定
         */
        setSmallRollTime:function(target){
            var me = this;
            var smallTimer = setTimeout(function(){//最短翻转时间 1秒
                window.isEndSmallTime = true;
                if(window.isEndSmallTime && window.isRes){
                    doResult(); // 结果处理(停止动画)
                }
            },1000);
            
        },

 2,光环缩放的效果

@-webkit-keyframes twinkling{   /*光环缩放*/
    0%,100%{
         -webkit-transform:scale(1); 
         transform-origin:center;
    }
    50%{
       -webkit-transform:scale(1.4); 
      transform-origin:center;
    }
}
.twinkling{
    -webkit-animation:twinkling 2s infinite 0.9s ease-in-out alternate;
    animation:twinkling 2s infinite 0.9s ease-in-out alternate;
}

3,border太粗的情况渐变划线

(1)横向划线

background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.4)), to(rgba(255,255,255,0.4))) left bottom;
    background-size: 100% 0.01rem;
    background-repeat: repeat-x;

(2)竖向划线

background: -webkit-gradient(linear, right top, right bottom, from(rgba(67,31,152,0.4)), to(rgba(67,31,152,0.4))) right bottom;
    background-size:0.01rem 100%;
    background-repeat: repeat-y;

 4,设置节点本身颜色(背景色,透明度,字体色等)相关的变量(避免影响子元素)使用rgba()

项目动画处理