如何使用一个连续循环动画animate
?在这个例子中,我想做的就是无休止地旋转一个白色方块。
myBall = new Layer
x: 100
y: 100
width: 200
height: 200
borderRadius: "20px"
backgroundColor: "#FFF"
myBall.animate
properties:
rotationZ: 360
time: 1
myBall.on Events.AnimationEnd, ->
this.animate
properties:
rotationZ: 360
time: 1
this.backgroundColor = "#666"
第一次 360° z 旋转后,背景颜色将更改为 #666,但动画将停止。我认为如果repeat: -1
指示连续,无需聆听AnimationEnd
.
第一个动画将图层旋转到 360° 后,您尝试旋转它again到 360°,以视觉上不存在的动画形式返回。
解决方案是设置myBall.rotationZ = 0
就在您再次开始旋转之前。在你的代码中:
myBall.on Events.AnimationEnd, ->
this.rotationZ = 0 # reset to back to zero
this.animate
properties:
rotationZ: 360
time: 1
其他解决方案使用new Animation
您可以使用状态或动画函数来完成此操作,从而生成更清晰的代码:
rotateAnim = new Animation
layer: myBall
properties:
rotationZ: 360
time: 1
rotateAnim.start() # kick if off once
rotateAnim.on "end", ->
myBall.rotationZ = 0 # need to reset to zero so we can animate to 360 again
rotateAnim.start()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)