ES6封装形变类，完成连续动画

发布时间：2020-12-16 04:21:42 所属栏目：百科来源：网络整理

导读：按照国际惯例，先放效果图 index.html ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title index / style .ball { background : linear-gradient(pink 50%,lightblue 50%) ; /* css3线性渐变 */ width 150px height border-radius 50% ; } bo

按照国际惯例，先放效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</style>
        .ball{
            background:linear-gradient(pink 50%,lightblue 50%);/*css3线性渐变*/
            width150px
            height
            border-radius50%;
        }
    bodydiv class="ball"></div>

    script>
        //形变类
        class Transform{
            constructor(selector){
                this.el=document.querySelector(selector);
                .defaultTimeTransform.config.defaultTime;设置默认动画时长
                .el.style.transition`all ${ .defaultTime }s`;设置transition才会有动画效果
                ._queue[];队列，存放每一条动画
                每次动画时，保留之前的不同类型的动画结果（直到被同类型的动画覆盖）
                ._transform{
                    rotate:"",translate:
                }
            }

            位移
            translate(value,time){
                return ._add("translate缩放
            scale(value,1)">scale旋转
            rotate(value,1)">rotate添加动画
            _add(type,time.defaultTime){
                ._queue.push({type,time});
                方便链式调用
            }

            运动队列添加完成，开始正式动画
            done(){
                if(!._queue.length) return;

                把动画从队列里拿出来，先进先出
                定时器能够解决因为浏览器渲染机制造成的动画时有时无的情况
                setTimeout(()=>{
                    const info._queue.shift();弹出队列里第一个
                    `all ${ info.time/1000 }s`;
                    .el.style.transform._getTransform(info);

                    setTimeout((){
                        .done();
                    },info.time);
                },0)
            }

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

                switch(type){
                    case :
                        _tsf.translate`translate(${ value })`;
                        break;
                    :
                        _tsf.scale`scale(${ value })`;
                        :
                        _tsf.rotate`rotate(${ value }deg)`;
                        ;
                }
                 `${ _tsf.translate } ${ _tsf.scale } ${ _tsf.rotate }`;                
            }
        }

        静态属性
        Transform.config{
            defaultTime:300默认动画时长
        }

        修改默认时长
        Transform.config.defaultTime1000;

        继承
        class MultiTransform extends Transform{
            复合动画
            multi(value,1)">multi等待
            sleep(value){
                sleep重写父类中的同名方法
:
                        value.forEach(item{
                            ._getTransform(item);
                        })
                        :
                        实例化
        const tfnew MultiTransform(.ball);
        tf
        .translate(100px,100px)
        .scale(2)
        .sleep(500)
        .rotate(180)
        .multi([
            {
                type:0,0
            },{
                type:
            }
        ])
        .done();

        console.log(tf);
    html>

为了演示方便，我把代码都写到一个文件里了，大家要用的话，可以把形变类分离到单独的js文件中

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!