Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Easing functions — Gideros Forum

Easing functions

MagnusviriMagnusviri Member
edited June 2012 in General questions
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)

Likes: david3pabon, KoStein

Dislikes: Mells

+1 -1 (+2 / -1 )Share on Facebook

Comments

  • 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)
  • avoavo Member
    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).
  • 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
    +1 -1 (+4 / -0 )Share on Facebook
  • evsevs Member
    @Magnusviri - amazing! With so few lines of code needed :D


    cheers

    evs
  • petecpetec Member
    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.
    +1 -1 (+3 / -0 )Share on Facebook
  • @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!

    :)
    WhiteTree Games - Home, home on the web, where the bits and bytes they do play!
    #MakeABetterGame! "Never give up, Never NEVER give up!" - Winston Churchill
  • 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 )

    Likes: atilim, Cesar

    +1 -1 (+2 / -0 )Share on Facebook
Sign In or Register to comment.