Easing functions

Magnusviri

I'm trying to rank the easing functions by rate of acceleration. Does this order look right to you guys? I didn't want to figure out the math so I was just eyeballing it...

local ball = Bitmap.new(Texture.new("ball.png")) local clip = { {1, 100, ball, {x = 50, y = {50, 150, "linear"}}}, {101, 200, ball, {x = 50, y = {50, 150, "inOutSine"}}}, {201, 300, ball, {x = 50, y = {50, 150, "inOutQuadratic"}}}, {301, 400, ball, {x = 50, y = {50, 150, "inOutCubic"}}}, {401, 500, ball, {x = 50, y = {50, 150, "inOutQuartic"}}}, {501, 600, ball, {x = 50, y = {50, 150, "inOutQuintic"}}}, {601, 700, ball, {x = 50, y = {50, 150, "inOutExponential"}}}, {701, 800, ball, {x = 50, y = {50, 150, "inOutCircular"}}}, } local mc = MovieClip.new(clip) stage:addChild(mc)

Magnusviri

Never fails, I ask a question and immediately figure out how to figure it out.

I was right except circular doesn't really fit with the rest.

local t = Texture.new("ball.png") local mc1 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 20, y = {50, 150, "linear"}}}}) stage:addChild(mc1) local mc2 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 60, y = {50, 150, "inOutSine"}}}}) stage:addChild(mc2) local mc3 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 100, y = {50, 150, "inOutQuadratic"}}}}) stage:addChild(mc3) local mc4 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 140, y = {50, 150, "inOutCubic"}}}}) stage:addChild(mc4) local mc5 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 180, y = {50, 150, "inOutQuartic"}}}}) stage:addChild(mc5) local mc6 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 220, y = {50, 150, "inOutQuintic"}}}}) stage:addChild(mc6) local mc7 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 260, y = {50, 150, "inOutExponential"}}}}) stage:addChild(mc7) local mc8 = MovieClip.new({{1, 1000, Bitmap.new(t), {x = 300, y = {50, 150, "inOutCircular"}}}}) stage:addChild(mc8)

avo

Hey at least it's here now for anyone else

I was actually wondering about this yesterday since there's a bunch of different transitions but I don't really know the difference besides just testing them (or looking at the math).

Magnusviri

Here's a better example then.

local t = { "linear", "inOutSine", "inOutQuadratic", "inOutCubic", "inOutQuartic", "inOutQuintic", "inOutExponential", "inOutCircular", "inOutBack", "inOutElastic", "inOutBounce", } for i,v in ipairs(t) do local textfield = TextField.new(nil, v) textfield:setTextColor(0xff00ff) local mc = MovieClip.new({{1, 120, textfield, { y = i*25, x = {50, 150, v}, rotation = {0, 360, v}, redMultiplier = {1, 0, v}, blueMultiplier = {0, 1, v}, }}}) mc:setGotoAction(120,1) stage:addChild(mc) end

evs

@Magnusviri - amazing! With so few lines of code needed


cheers

evs

petec

I tend to refer to this: http://hosted.zeh.com.br/tweener/docs/en-us/
Choose 'Transition Types' from the left hand panel and you get visuals of various easing functions. Seems to suit the way my brain works.

techdojo

@Magnusviri - that is a seriously impressive demo for such a few lines of code, it really shows off the difference between the various tweens and is a great demo for movie clips to boot!

To really appreciate the difference I changed the number of frames from 120 to about 750 and also spaced out the y values a bit more, but kudos to you all the same!

Magnusviri

Thanks! I was impressed with it too.

The only thing I can think of doing to improve it is to use the easing.lua file in the GTween example that comes with Gideros Studio and actually plotting the points. Turns out I actually had something that with a little modification prints out all of the graphs.

require "easing"   Graph = Core.class(Sprite)   function Graph:init(width, height, bounds) self.width = width self.height = height self.bounds = bounds self.range_x = bounds[3]-bounds[1] self.range_y = bounds[4]-bounds[2] self.scale_x = self.width / self.range_x self.scale_y = self.height / self.range_y self.sprite_start_x = self.scale_x * self.bounds[1] self.sprite_start_y = self.scale_y * self.bounds[2] end   function Graph:drawLine(color, fy) local line = Shape.new() self:addChild(line) line:setLineStyle(1,color) line:beginPath(Shape.NON_ZERO) local graph_x local graph_y local sprite_y for sprite_x = 0,self.width,4 do graph_x = (sprite_x + self.sprite_start_x) / self.scale_x graph_y = fy( graph_x ) sprite_y = self.height + self.sprite_start_y - graph_y * self.scale_y line:lineTo( sprite_x, sprite_y ) end line:endPath() end   local width = 260 local height = 260 local bounds = {0,0 ,1,1} local graph = Graph.new(width, height, bounds) graph:setPosition(30,30) stage:addChild(graph)   graph:drawLine( 0xcccccc, function(xx) return easing.linear(xx) end ) graph:drawLine( 0xaaaaaa, function(xx) return easing.inOutSine(xx) end ) graph:drawLine( 0x888888, function(xx) return easing.inOutQuadratic(xx) end ) graph:drawLine( 0x666666, function(xx) return easing.inOutCubic(xx) end ) graph:drawLine( 0x444444, function(xx) return easing.inOutQuartic(xx) end ) graph:drawLine( 0x222222, function(xx) return easing.inOutQuintic(xx) end ) graph:drawLine( 0x000000, function(xx) return easing.inOutExponential(xx) end ) graph:drawLine( 0xffff00, function(xx) return easing.inOutCircular(xx) end ) graph:drawLine( 0x0000ff, function(xx) return easing.inOutBack(xx) end ) graph:drawLine( 0x00ff00, function(xx) return easing.inOutElastic(xx) end ) graph:drawLine( 0xff0000, function(xx) return easing.inOutBounce(xx) end )