链式动画

Posted 2020-11-23 fourteen-y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了链式动画相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式动画</title>
    <style>
        body,div{
            margin: 0;
            padding:0;
        }
        #div1{
            width:200px;
            height:100px;
            background-color:yellow;
            border:4px solid #000;
            opacity:0.3;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv =document.getElementById(‘div1‘);
            oDiv.onmouseover =function(){
                startMove(oDiv,‘width‘,400,function(){
                    startMove(oDiv,‘height‘,300,function(){
                        startMove(oDiv,‘opacity‘,100);
                    });
                });
            };
            oDiv.onmouseout = function(){
                startMove(oDiv,‘opacity‘,30,function(){
                    startMove(oDiv,‘height‘,100,function(){
                        startMove(oDiv,‘width‘,200);
                    })
                })
            }
        }

        function startMove(obj,attr,iTarget,fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){

                var icur = null;                // 1.属性值 变量
                if(attr == ‘opacity‘){
                    icur = Math.round(parseFloat(getStyle(obj,attr))*100);
                }else{
                    icur = parseInt(getStyle(obj,attr));
                }

                var speed = (iTarget - icur)/8;  // 2.速度 变速
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget){             // 3.判断是否暂停 变化过程
                    clearInterval(obj.timer);
                    if(fn){                      //链式
                        fn();
                    }
                }else{
                    if(attr == ‘opacity‘){
                        obj.style.opacity = (icur +speed)/100;
                    }else{
                        obj.style[attr] = icur + speed + ‘px‘;
                    }
                }
            },30)
        }

        function getStyle(obj,attr){             //获取任意属性
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

技术图片

以上是关于链式动画的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段7——CSS动画

js原生实现链式动画效果

使用嵌套片段和动画对象

链式变换动画没有动画

Android：将“ViewPager”动画从片段更改为片段