ES6 package deformation classes, complete a continuous animation

According to international practice, first put renderings
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .ball{
            background:linear-gradient(pink 50%,lightblue 50%);/*css3线性渐变*/
            width:150px;
            height:150px;
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div class="ball"></div>

    <script>
        //形变类
        class Transform{
            constructor(selector){
                this.el=document.querySelector(selector);
                this.defaultTime=Transform.config.defaultTime;//设置默认动画时长
                this.el.style.transition=`all ${ this.defaultTime }s`;//Transition animation will have provided 
                the this ._queue = []; // queue, storing each animation 
                // every time animation, animations of different types of results previously reserved (the same type of animation until covering) 
                the this ._transform = { 
                    Rotate: "" , 
                    Translate: "" , 
                    scale: "" 
                } 
            } 

            // displacement 
            Translate (value, Time) {
                 return  the this ._add ( " Translate " , value, Time); 
            } 

            // scaling
            Scale (value, Time) {
                 return  the this ._add ( " Scale " , value, Time); 
            } 

            // rotation 
            Rotate (value, Time) {
                 return  the this ._add ( " Rotate " , value, Time); 
            } 

            // Add animation 
            _add (of the type, value, Time = the this .defaultTime) {
                 the this ._queue.push ({of the type, value, Time});
                 return  the this ; // facilitate chained calls 
            } 

            // sports queue addition was complete, officially animation
            DONE () {
                 IF ( ! the this ._queue.length) return ; 

                // the animation out from the queue, FIFO 
                // timer can sometimes resolve the situation without the animation because the browser rendering mechanism caused by 
                setTimeout (( ) => { 
                    const info = the this ._queue.shift (); // pop a first queue 
                    the this .el.style.transition = `$ {info.time All / 1000} s`; 
                    the this .el.style. Transform = the this ._getTransform (info); 

                    the setTimeout (() => {
                         the this.done();
                    },info.time);
                },0)
            }

            //获取具体的transform动画
            _getTransform({time,value,type}){
                const _tsf=this._transform;

                switch(type){
                    case "translate":
                        _tsf.translate=`translate(${ value })`;
                        break;
                    case "scale":
                        _tsf.scale=Scale `($ {value})`;
                         BREAK ;
                     Case  " Rotate " : 
                        _tsf.rotate = `Rotate ($ {value} deg)`;
                         BREAK ; 
                } 
                return `$ {$ _tsf.translate} {} $ _tsf.scale _tsf.rotate} `{;                 
            } 
        } 

        // static properties 
        Transform.config = { 
            defaultTime: 300 // long default animation 
        } 

        // modify the default duration 
        Transform.config.defaultTime = 1000; 

        // inherited 
        class MultiTransform the extends the Transform {
             // complex animation 
            Multi (value, Time) {
                 return  the this ._add ( " Multi " , value, Time); 
            } 

            // wait 
            SLEEP (value) {
                 return  the this ._add ( " SLEEP " , " " , value); 
            } 

            // override method of the same name as the parent class 
            _getTransform ({Time, value, type}) { 
                const _tsf = the this ._transform; 

                Switch(type){
                    case "translate":
                        _tsf.translate=`translate(${ value })`;
                        break;
                    case "scale":
                        _tsf.scale=`scale(${ value })`;
                        break;
                    case "rotate":
                        _tsf.rotate=`rotate(${ value }deg)`;
                        break;
                    case "multi":
                        value.forEach(item=>{
                            this._getTransform(item);
                        })
                        break;
                    case "sleep":
                        break;
                }
                return `${ _tsf.translate } ${ _tsf.scale } ${ _tsf.rotate }`;                
            }
        }

        //实例化
        const tf=new MultiTransform(".ball");
        tf
        .translate("100px,100px")
        .scale(2)
        .sleep(500)
        .rotate(180,1000)
        .multi([
            {
                type:"translate",
                value:"0,0"
            },
            {
                type:"scale",
                value:2
            }
        ])
        .done();

        console.log(tf);
    </script>
</body>
</html>
To facilitate the presentation, I put the code are written to a file, and we want to use, you can put strain isolated into separate classes js file
ES6 package deformation classes, complete a continuous animation

Guess you like
