Hi all,
This month I have been studied and explored many different ways to animate in Corona. However, I always stuck on the logic of using events and listeners.
The most main question is how to replay a whole set of animation with timeline object**?**
Assume this is the whole animation when entering this page, and then pause for a while(about 3 seconds) before replay.
{ startTime=0, tween={ square, { x=400 }, { time=800 } } }, { startTime=1000, tween={ square, { y=400, rotation=120 }, { time=2000, easing=easing.outCubic } } }, { startTime=1000, tween={ ballObject, { x=100, y=800}, { time=2000, easing=easing.outCubic}}},
Here is my first try:
I put key word “QQQuestion” in code comments to show my questions.
(Somehow I never be able to see my code line number when Preview Post, I wish they will show up later.)
----------------------------------------------------------------------------------------- -- trying to make looping animation, I -- reminder: setting plugins in build.settings file ["plugin.animation"] = { publisherId = "com.coronalabs" }, -- I will attach pic files later ----------------------------------------------------------------------------------------- display.setStatusBar( display.HiddenStatusBar ) local animation = require("plugin.animation") local BG = display.newImageRect("100x100px\_BG.png", 640, 960) -- 100x100 pixels BG for visual aid BG.x = display.contentCenterX BG.y = display.contentCenterY local ballObject = display.newImageRect("ball.png", 256, 256) -- a ball pic pleaced on top-right of the screen ballObject.x = 550 ballObject.y = 100 local square = display.newRect( 50, 50, 100, 100 ) square:setFillColor( 0.8, 0, 0.8, 0.5 ) -- make the square looks purple -- Create a timeline object local timelineParams13 = { tweens = { { startTime=0, tween={ square, { x=400 }, { time=800 } } }, { startTime=1000, tween={ square, { y=400, rotation=120 }, { time=2000, easing=easing.outCubic } } }, { startTime=1000, tween={ ballObject, { x=100, y=800}, { time=2000, easing=easing.outCubic}}}, { startTime=7000, tween={ square, { x=50, y=50 }, { time=5 } } }, -- reset square transformation { startTime=7000, tween={ ballObject, { x=550, y=100, rotation=0 }, { time=5 } } } -- reset ball, QQQuestion: somehow the rotation is not reset, why? }, markers = { { name="marker\_0", time=0 }, { name="markerOn4", time=4000}, -- planed to make the aniamtion hanging on here for a while before replay { name="markerOn7", time=7000} -- QQQuestion: I wonder when/how to use the params table of markers? }, autoPlay =true, onMarkerPass = function() print("with onMarkerPass") end -- QQQuestion: I wonder when/how to use the params table of markers? } local newTimeline13 = animation.newTimeline( timelineParams13 ) -- -- Set the timeline playing -- newTimeline13:resume() -- I set autoPlay = true, so I don't need this. -- QQQuestion: I planed to make the first round of animation pause on time=4000 for a while, and then running the following code to replay entire animation. -- However, I don't know how to do it with onMarkerPass. -- QQQuestion: The following lines are set for replay the entire animation again, but I don't understand why they print out right away as soon as I relaunch the simulator? -- I found this post, and felt it might be the soultion. However, still don't know how to do. -- https://forums.coronalabs.com/topic/66368-timerperformwithdelay-not-working/ newTimeline13:setPosition("markerOn4") newTimeline13:pause() -- Check the timeline position local currentPosition = newTimeline13:getPosition() print( "pause time position:", currentPosition ) newTimeline13:setPosition("marker\_0") newTimeline13:resume() -- Check the timeline position local currentPosition2 = newTimeline13:getPosition() print( "2nd time position:", currentPosition2 )
I put key word “QQQuestion” in code comments to show my questions. For your convenience, I integrate them below:
QQQuestion: I wonder when/how to use the params table of markers? May some examples of how to use this, please?
QQQuestion: somehow the rotation is not reset, why?
QQQuestion: I planed to make the first round of animation pause on time=4000 for a while, and then running the following code to replay entire animation.
However, I don’t know how to do it with onMarkerPass.
QQQuestion: The following codes are set for replay the entire animation again, but I don’t understand why they print out right away as soon as I relaunch the simulator?
– I found this post, and felt it might be the solution. However, still don’t know how to do.
– https://forums.coronalabs.com/topic/66368-timerperformwithdelay-not-working/
==================== This is a dividing line. ==========================
Since it never works as I wish, below is another one of my try with the solution of this post:
https://forums.coronalabs.com/topic/62337-transition-loop-problem/
I modified the answer code and it works. Therefore, I tried to apply it on my situation.
However, the console shows " WARNING: Animation Timeline: ‘onComplete’ parameter must be a function". The simulator has no error message. The animation is not run. I really want to know why?
----------------------------------------------------------------------------------------- -- trying to make looping animation, II -- reminder: setting plugins in build.settings file ["plugin.animation"] = { publisherId = "com.coronalabs" }, -- I will attach pic files later ----------------------------------------------------------------------------------------- display.setStatusBar( display.HiddenStatusBar ) local animation = require("plugin.animation") local BG = display.newImageRect("100x100px\_BG.png", 640, 960) -- 100x100 pixels BG for visual aid BG.x = display.contentCenterX BG.y = display.contentCenterY local ballObject = display.newImageRect("ball.png", 256, 256) -- a ball pic pleaced on top-right of the screen ballObject.x = 550 ballObject.y = 100 local square = display.newRect( 50, 50, 100, 100 ) square:setFillColor( 0.8, 0, 0.8, 0.5 ) -- make the square looks purple function ballObject.onComplete(self) if( self.removeSelf == nil ) then return end -- reset ballObject and square position self.x = 550 self.y = 100 square.x = 50 square.y = 50 -- Create a timeline object local timelineParams13 = { tweens = { { startTime=0, tween={ square, { x=400 }, { time=800 } } }, { startTime=1000, tween={ square, { y=400, rotation=120 }, { time=2000, easing=easing.outCubic } } }, { startTime=1000, tween={ ballObject, { x=100, y=800}, { time=2000, easing=easing.outCubic}}} }, markers = { { name="marker\_0", time=0 }, { name="markerOn4", time=4000}, { name="markerOn7", time=7000} -- QQQuestion: I wonder when/how to use the params table of markers? }, -- onComplete = function() print( "I cannot do newTimeline13:resume, pausing on certain marker, or setPosition here, because timeline object is not made yet.") end \<==QQQuestions onComplete = self } local newTimeline13 = animation.newTimeline( timelineParams13 ) -- make the timeline object end ballObject:onComplete() -- ===== Some other way I tried, really not work T\_T ==== -- local loopAnim = function() -- newTimeline13:setPosition("markerOn4") -- newTimeline13:pause() -- -- Check the timeline position -- local currentPosition = newTimeline13:getPosition() -- print( currentPosition ) -- newTimeline13:setPosition("marker\_0") -- newTimeline13:resume() -- -- Check the timeline position -- local currentPosition2 = newTimeline13:getPosition() -- print( "2nd time position:" ..currentPosition2 ) -- end -- loopAnim()
So, questions arrangement here:
- Why this way works with the onComplete of transition, not here? I checked both APIs of transition and timeline, and I think they are … similar (?) I might lack of some concept or don’t understand correctly, so that I cannot tell the different? help, please.
onComplete on transition page:
Listener function to be called after the transition completes. This function will receive a reference to the associated object as its sole argument.
onComplete on Animation — Tweens and Timelines page:
Listener function to be called after all tweens in the timeline complete or after the final marker in the timeline, whichever occurs first.
- I often encounter a situation which I need to call a function before the object is made, I think today these timeline questions expressed my confusion. Any way to correct my logic thoughts?
QQQuestion: onComplete = function() print( “I cannot do newTimeline13:resume, pausing on certain marker, or setPosition here, because timeline object is not made yet.”) end
Thank you in advance for reading this long question post. :) I tried my best to organized them because I have shucked for days and event don’t know how to ask properly.
Olina