Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Can I use easing functions on a sprite animation?
Started by sizeoverload Jul 07 2018 07:44 AM

3 replies to this topic
sprites animation easing frames
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

sizeoverload

[GLOBAL: userInfoPane.html]
sizeoverload
  • Observer

  • 9 posts
  • Corona SDK

Hello!

 

I have the following code:

bonusScatter.sequence = {
    {
        name = "1",
        sheet = bonusScatter.sheet1,
        frames = {5, 5, 5, 5, 6, 7, 8, 9, 10, 11, 2, 3, 4},
        -- ??? 
        -- transition = easing.inCubic,
        time = 800,
        loopCount = 1},
}

Having tested the above code - with "transition = easing.inCubic" uncommented - I'm pretty sure the easing functions won't work in the same way they work inside transition.to().

 

I'd like to figure out a way to use the easing functions to influence time spent on each frame. Is there a way to use easing to affect the sprite's frame?



[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 6,981 posts
  • Corona SDK

Not the way you want.  I don't think animations support easings of any kind.

 

If you absolutely need it,  you can hack it together:

  • set a user defined (you are the user in this case) field via the transition: transition.to( obj, { _myFrame = 10 } )
  • track that field via enterFrame and then use it to setFrame() on the object based on rules you define.


[TOPIC: post.html]
#3

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 6,981 posts
  • Corona SDK

Download this to run example: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/07/sprites_w_transition.zip

 

 

(Click on right character to run transition and update frames via transition)

 

This is essentially what I'm saying:


-- ANIMATION via transtion.to()
local tmp = display.newSprite( pinkySheet, pinkySeqData )
tmp.x = display.contentCenterX  + 150
tmp.y = display.contentCenterY
tmp:setSequence( "rightwalk" )
tmp._dummyAnimationFrame = 1

function tmp.enterFrame( self )
   local frameNum = math.floor(self._dummyAnimationFrame)
   --print(frameNum)

   local frames = pinkySeqData[3].frames
   if( frameNum > #frames ) then
      frameNum = #frames
   end
   self:setFrame( frameNum )

end; Runtime:addEventListener("enterFrame", tmp)

function tmp.touch( self, event  )
   if( event.phase == "ended" ) then
      transition.cancel( self )
      self._dummyAnimationFrame = 1
      transition.to( self, { _dummyAnimationFrame = #pinkySeqData[3].frames, time = 1500, transition = easing.outBack } )
   end
end; tmp:addEventListener("touch")

display.newText(  "rightwalk", tmp.x, tmp.y + 70, native.systemFontBold, 30 )
display.newText(  "transition animation", tmp.x, tmp.y + 100, native.systemFontBold, 20 )



[TOPIC: post.html]
#4

sizeoverload

[GLOBAL: userInfoPane.html]
sizeoverload
  • Observer

  • 9 posts
  • Corona SDK

Great! thank you for the response roaminggamer




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: sprites, animation, easing, frames