JavaScript运动框架——同时运动

本文探讨了如何在动画过程中实现多个属性(如宽度和高度)的同步变化,避免因不同步导致的动画提前终止问题。通过引入布尔变量进行状态判断,确保所有属性都达到目标值后才停止动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

同时运动
含义:可以同时改变物体的值(比如:宽度、高度)
这里变成了一个对象,需要改为对象obj,现在的obj就是第二个参数(对象)

做一个遍历,那么打印obj [k],会弹出500、400,
在这里插入图片描述

说明:   target ==>目标值 其实就是这里的obj[k]
              attr   ==>属性名称 其实就是k

虽然盒子的宽高已经改变了,但检查发现宽没到500px(高已400px)就停止了。
在这里插入图片描述       在这里插入图片描述

因为:在执行animate后,就要执行函数,再选取得到它的属性值,再缓冲运动
而这里有两个目标值,如果400和400相等则就停止定时器,但500还没执行完
在这里插入图片描述

因此,上面这种写法是不对的,可以采用非等的思维
首先先给一个变量
在这里插入图片描述

然后再判断:如果运动值没有到达了obj的K(比如,400px到达了,500px还没到达),那就让bool为false。
在这里插入图片描述
如果运动值到达了目标值,那么若到达了就不会执行61行的判断了

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值