Text transition filters

I’ll be honest I’m not really sure where to even start on this one but I wanted to implement something similar to what the numbers are doing it the link: https://www.google.com/design/spec/animation/delightful-details.html

For now I was just trying to use transition.to on a text object using “filter.linearWipe” I’ve poured over old forums and the like but can’t really seem to find the answer I was looking for. I was wondering if you could point me in the right direction. 

Are you looking to do this? (processing still as I post this)

https://www.youtube.com/watch?v=SSacYXtyzE0&feature=youtu.be

If so, get this code:

http://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2015/07/linearSwipeTransition.zip

local logo = display.newImageRect( "coronaLogo.png", 100, 100 ) logo.x = 150 logo.y = 150 logo.fill.effect = "filter.linearWipe" logo.fill.effect.direction = { 1, 1 } logo.fill.effect.smoothness = 1 logo.fill.effect.progress = 0.0 local smile = display.newImageRect( "yellow\_round.png", 100, 100 ) smile.x = 350 smile.y = 150 smile.fill.effect = "filter.linearWipe" smile.fill.effect.direction = { -1, -1 } smile.fill.effect.smoothness = 1 smile.fill.effect.progress = 0.0 transition.to( logo.fill.effect, { progress = 1, time = 5000 }) transition.to( smile.fill.effect, { progress = 1, time = 5000 })

Thank you, I don’t know what I was missing but I had tried doing this on my text earlier and it wasn’t working. This code works perfectly however!

Btw how would you go about it if you wanted to “wipe away” your object, as in its already there and I want to use a linear wipe to make it disappear?

  • start at progress = 1
  • transition to progress = 0
  • and change the direction to suit

Are you looking to do this? (processing still as I post this)

https://www.youtube.com/watch?v=SSacYXtyzE0&feature=youtu.be

If so, get this code:

http://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2015/07/linearSwipeTransition.zip

local logo = display.newImageRect( "coronaLogo.png", 100, 100 ) logo.x = 150 logo.y = 150 logo.fill.effect = "filter.linearWipe" logo.fill.effect.direction = { 1, 1 } logo.fill.effect.smoothness = 1 logo.fill.effect.progress = 0.0 local smile = display.newImageRect( "yellow\_round.png", 100, 100 ) smile.x = 350 smile.y = 150 smile.fill.effect = "filter.linearWipe" smile.fill.effect.direction = { -1, -1 } smile.fill.effect.smoothness = 1 smile.fill.effect.progress = 0.0 transition.to( logo.fill.effect, { progress = 1, time = 5000 }) transition.to( smile.fill.effect, { progress = 1, time = 5000 })

Thank you, I don’t know what I was missing but I had tried doing this on my text earlier and it wasn’t working. This code works perfectly however!

Btw how would you go about it if you wanted to “wipe away” your object, as in its already there and I want to use a linear wipe to make it disappear?

  • start at progress = 1
  • transition to progress = 0
  • and change the direction to suit