Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Animation Plugin - Timeline replay?
Started by OlinaChang Oct 30 2019 07:52 AM

No replies to this topic
animation plugin replay timeline object listener function
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

OlinaChang

[GLOBAL: userInfoPane.html]
OlinaChang
  • Observer

  • 22 posts
  • Corona SDK

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.

 

==================== 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:
1. 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.


2. 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




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: animation plugin, replay timeline object, listener function