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

本文介绍如何利用ES6的特性,封装变形类来创建并实现连续的动画效果。通过实例代码,详细讲解了动画的原理和实现步骤,帮助读者理解如何在JavaScript中运用ES6进行动态视觉效果的开发。
摘要由CSDN通过智能技术生成

在这里插入图片描述```

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

        //位移
        translate(value,time){
            return this._add("translate",value,time);
        }

        //缩放
        scale(value,time){
            return this._add("scale",value,time);
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值