Animation Library

[Jake]

Want nice looking UI elements with fancy animations? Use this animation library.

What this does is 'tween' a starting number to a destination number in a smooth transition. This can be used for scrolling text, sliding/fading images onto the screen, button rollover effects etc. Don't know what the hell I'm talking about? Check the attachments.

I wanted a quick and easy way of creating a transition without keeping track of any extra variables and be able to create destroy effects on the fly. This is what I came up with.

Function reference

Code: Select all

-- Sets the tween value of name to val only if it doesn't already exist. Use together with anim.simple
anim.start( string name, number val )

-- Starts the animation between the current value of name and dest in time seconds, using the equation function.
-- equation can be your own function or an ANIM_* function (check the top of anim.lua)
anim.simple( string name, number dest, number time, function equation, ... )

-- Similar to anim.simple but queues the animation after delay amount of seconds. Optional start value.
anim.queue( string name, number start, number dest, number time, number delay, function equation, ... )

-- Queues a function to run after delay amount of seconds. Passes ... to the function.
anim.callback( string name, number delay, function callback, ... )

-- Returns the current tween value of the animation or default if it doesn't exist.
anim.get( string name, number default )

anim.remove( string name )

anim.removeAll()

anim.exists( string name )

This is the basic usage example.

Code: Select all

love.filesystem.require("anim.lua")

function update()
    -- This is required
    anim.updateAll()
end

function mousepressed(x, y, btn)
    -- Transition the current value of 'box_x' to a random position in 2seconds
    -- If the 'box_x' animation doesn't exist yet, it will default to 0px.
    anim.simple("box_x", math.random(400), 2)
end

function draw()
    -- Get the value of 'box_x', if it doesn't exist yet (mousepressed hasn't been called) then 
    -- default to 0. We could change the default value to 200 and it would draw at 200px
    -- until the animation starts.
    local x = anim.get("box_x", 0)

    love.graphics.setColor(255,180,0,255)
    love.graphics.rectangle(love.draw_fill, x, 0, 20, 20)
end

I'll add some more code examples if they are needed because I'm not sure this is very clear. For now you can see the included Love files.

Now, this isn't finished. There are still a few things left to do and I'd like your opinion on a few things.

• I didn't realise there is an Animation object in love already, should I rename this to tween?
• If you need to alter the x and y values of something then you'll need two calls. Shall I use a table of values instead of a single number?
• Please reply asking if you can do ____. I'd like to help

Download
Download: Last Update: 2008-08-15 00:34:07 BST
This is more updated than the one in the demos.

anim_sidebar.love

Real-world example. A sliding-in sidebar with button rollovers.

(3.87 KiB) Downloaded 256 times

anim_example.love

Demo showing different types of animation.

(3.09 KiB) Downloaded 248 times

[qubodup]

I quite like it, I made a video showing what the example does.

Please state the license. If you don't know, please select the zlib/libpng license, which is also used by LÖVE.

[rude]

Really kewl, I'm going to use this!

[Jake]

I quite like it, I made a video showing what the example does.

Please state the license. If you don't know, please select the zlib/libpng license, which is also used by LÖVE.

Cool thanks. Shame about the overlapping text though. Yeah, zlib/libpng sounds fine.

I've fixed a bug that caused callbacks not to work with multiple queues. I'm currently making a game that includes this, will release it soon

Here is another example. Upon key press the screen will fade to black and then out again. Showing something different underneath.

Code: Select all

function draw()
	-- Regular draw stuff.
	
	local alpha = anim.get("overlay_alpha", 0)
	if alpha > 0 then
		love.graphics.setColor(0,0,0,alpha)
		love.graphics.rectangle(love.draw_fill, 0, 0, WIDTH, HEIGHT)
	end
end
function keypressed(key)
	-- Fade to black
	anim.queue("overlay_alpha", 0, 255, 1, 0, ANIM_QUAD_OUT)

	anim.callback("overlay_alpha", 0, function()
		-- Do something to change the contents of your window
	end)

	-- Unfade again
	anim.queue("overlay_alpha", 255, 0, 1, 0, ANIM_QUAD_IN)

	-- Delete this animation. Not necessary but I like to be need.
	anim.callback("overlay_alpha", 0, anim.remove, "overlay_alpha")
end

Edit:

Really kewl, I'm going to use this!

Thanks

[qubodup]

The text overlapp happened because of me changing the win size

Great that you like zlib/libpng license.

To make it easier for users/devs, please include the license text as a comment in the first lines of the library file(s).

Alternatively include a LICENSE or LICENSE.txt or License.txt or Copying.txt or something like that with the library, which would contain the license text and simply write in a comment of the lib file that "This library is licensed under the zlib/libpng license. You can find the full license text in License.txt" (or whatever the file name is)

[philnelson]

This is pretty rad looking, is anyone working on it or something similar anymore?