项目动画处理

Posted 2020-08-26 Flying bird

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（）