Easing functions

Magnusviri · June 2012

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 · June 2012

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 · June 2012

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 · June 2012

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 · June 2012

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

cheers

evs

petec · June 2012

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 · June 2012

@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 · June 2012

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 )

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Easing functions

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Easing functions

Comments