Can I use easing functions on a sprite animation?

Audio and Graphics
#1

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?

#2

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.
#3

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 )
#4

Great! thank you for the response roaminggamer

#5

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.
#6

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 )
#7

Great! thank you for the response roaminggamer