资讯专栏INFORMATION COLUMN

javascript 多物体运动

yanwei / 3198人阅读

摘要:前面我们都是用定时器实现单物体运动,在项目中我们往往不是做单物体运动,而是做多物体多个值变化。一个运动框架,可以改变物体的宽度高度边框字体大小透明度等等。所以,下例中的定时器都是放在元素上。

前面我们都是用定时器实现单物体运动,在项目中我们往往不是做单物体运动,而是做多物体多个值变化。
这里我们将通过改变参数实现多物体、任意值的运动。一个运动框架,可以改变物体的宽度、高度、边框、字体大小、透明度等等。

注意:上面章节中,我们都是用offsetWidth(offsetWidth包含边框和padding等)等设置、获取样式,因为使用方式简单,但是如果物体包含border和padding等样式的时候,就会报错,所以这里我们用更加严谨的方式currentStyle和getComputedStyle来获取样式。
注意:在电脑中我们并不能真正的存储一些具体的数值,我们存储的是一些近似值,比如0.07*100,最终结果并不是7,所以在下面我们会四舍五入转换为整数。
注意注意:在多物体运动时,定时器和一些参数一定不要共用,否则会到这这个运动没有完成就被清除然后触发了其他运动,一些参数也不可以共用,会导致一些参数没有达到固定值就被重新操作。所以,下例中的定时器都是放在元素上。

下面是我们做的一个例子




  运动改变宽度、高度、边框、字体、透明度
  
  



  
变宽
变高
文字变大
borderwidth
透明度

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97186.html

相关文章

  • JavaScript完美运动框架的进阶之旅

    摘要:运动框架动起来进行运动的节点定时器你没看错,就是那么简单。直接在定时器内部,判断到达目标值,清除定时器就行拉运动框架运动终止进行运动的节点运动终止条件。 转自个人博客三省吾身丶丶原来是JS动画效果,但是我会过头再看的时候,发现太粗略了,于是重新写了一篇。喜欢别只收藏啊,点个推荐,大兄弟^ ^! 运动框架的实现思路 运动,其实就是在一段时间内改变left、right、width、hei...

    Pines_Cheng 评论0 收藏0
  • 【30分钟学完】canvas动画|游戏基础(7):动量守恒与物体碰撞

    摘要:科普动量是守恒量。动量守恒定律表示为一个系统不受外力或者所受外力之和为零,这个系统中所有物体的总动量保持不变。动量守恒定律可由机械能对空间平移对称性推出。在可以忽略碰撞以外的因素时,动量是守恒的。 前言 一路沿着本系列教程学习的朋友可能会发现,前面教程中都尽量避免提及质量的概念,很多运动概念也时刻提醒大家这不是真实的物体运动。因为真实的物体运动其实跟质量都是密不可分的,而且质量的引入自...

    Dr_Noooo 评论0 收藏0
  • 【30分钟学完】canvas动画|游戏基础(7):动量守恒与物体碰撞

    摘要:科普动量是守恒量。动量守恒定律表示为一个系统不受外力或者所受外力之和为零,这个系统中所有物体的总动量保持不变。动量守恒定律可由机械能对空间平移对称性推出。在可以忽略碰撞以外的因素时,动量是守恒的。 前言 一路沿着本系列教程学习的朋友可能会发现,前面教程中都尽量避免提及质量的概念,很多运动概念也时刻提醒大家这不是真实的物体运动。因为真实的物体运动其实跟质量都是密不可分的,而且质量的引入自...

    scq000 评论0 收藏0
  • javascript链式运动框架

    摘要:我们可以在运动框架的基础上,在加上一个函数,当运动执行完成之后执行的操作。链式运动框架有可能会出现误差运动结束后,如果参数传递进去了就执行函数链式运动例子我们用上面的链式运动框架做一个先运动调整宽度,再运动调整高度,最后运动调整透明度。 前面介绍的运动都是一个物体运动之后就结束了,如果一个物体运动之后,还有其他的操作,比如一个div先变宽,然后变高、最后变透明度,我们前面的运动框架就不...

    booster 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<