DZone Snippets: animation code

Animate with shoes

jrobertson (James Robertson) — Sun, 17 Aug 2008 16:44:05 GMT

Source: Shoes • The Tutorial Walkthrough [shoooes.net]
The shoes logo will appear to move diagonally from the top left towards the bottom right and the follow the same path back up.



Shoes.app do

  @shoes = image "http://shoooes.net/shoes.png",

    :top => 10, :left => 10

  offset = 1

  bounced = false

  animate(50) do |i|

    if not bounced then

      offset += 1 

    else

      offset -= 1

    end



    @shoes.top =  offset * 2

    @shoes.left = offset * 3 



    if offset > 100 and not bounced then 

       bounced = true

    elsif offset < 0 and bounced then

       bounced = false

    end

  end

end

Create special effects animation with RMagick

jrobertson (James Robertson) — Wed, 30 Jul 2008 16:35:31 GMT

The following code creates an animated gif which displays the text 'Ruby rocks!' with different effects including a drop shadow and blur.

Source: RMagick 1.15.0: Common Tasks [simplesystems.org]



#!/home/software/ruby-1.8.5/bin/ruby -w

require 'RMagick'



# Add a drop shadow to a text string. This example

# uses a 3-image animation to show each step of the

# process



Rows = 60

Cols = 250

Text = 'Ruby rocks!'



# This imagelist will contain the animation frames

anim = Magick::ImageList.new



ex = Magick::Image.new(Cols, Rows)



# Create a Draw object to draw the text with. Most of the text

# attributes are shared between the shadow and the foreground.



text = Magick::Draw.new

text.gravity = Magick::CenterGravity

text.pointsize = 36

text.font_weight = Magick::BoldWeight

text.font_style = Magick::ItalicStyle

text.stroke = 'transparent'



# Draw the shadow text first. The color is a very light gray.

# Position the text to the right and down.

text.annotate(ex, 0,0,2,2, Text) {

    self.fill = 'gray60'

    }



# Save the first frame of the animation.

anim << ex.copy



# Blur the shadow. Save a copy of the image as the 2nd frame.

ex = ex.blur_image(0,3)

anim << ex.copy



# Add the foreground text in solid black. Position it

# to the left and up from the shadow text.

text.annotate(ex, 0,0,-1,-1, Text) {

    self.fill = 'maroon'

    }



# Save yet another copy of the image as the 3rd frame.

anim << ex.copy



# Set the delay between frames to 1 second.

anim.delay = 100



# Set the delay after the last frame to 3 seconds.

anim.cur_image.delay = 300



# Iterate forever.

anim.iterations = 0



#anim.animate

anim.write('drop_shadow.gif')

exit

Create an animated gif using ImageMagick

jrobertson (James Robertson) — Wed, 30 Jul 2008 15:45:19 GMT

The program convert which is included with ImageMagick can produce animated gifs



convert -delay 9 -loop 0 t*.png animated.gif

This code simply delays the animation at the end for a few seconds.



convert -delay 9 -loop 0 t*.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png t32.png animated2.gif

Note that JPG files are best when the image contains lots of imagery i.e. (gradients, raster scan, special image effects).

Convert an animation into a video with ffmpeg

jrobertson (James Robertson) — Wed, 30 Jul 2008 13:59:59 GMT

source: Create video animations with Inkscape, ImageMagick and FFmpeg | Nuxified GNU/Linux Help Forums [nuxified.org]



ffmpeg -r 12 -i nuxified%05d.png -y -an nuxified.avi

PNG preserves the information in vector graphics while still keeping the file size low. I tried the above script with JPG and the AVI file size was 54.9KB, I tried the same thing with PNG and the AVI file size was only 22.5KB.

References:
- Making Movies - PyMolWiki [pymolwiki.org]
- [MEncoder-users] Trouble when making a movie from *.png files [mplayerhq.hu]
- FFmpeg [wikipedia.org]
- MEncoder [wikipedia.org]
- Animating PNG files « The Daily Photon [wordpress.com]

Animate a shape using SVG

jrobertson (James Robertson) — Tue, 29 Jul 2008 23:05:10 GMT

The animation of a rectangle using SVG was tested using Firefox.



 

     onclick="moveRectangle(evt, document.getElementById('r1'));"> 

  click to animate the rectangle

TimeLine //JavaScript Class

jonasraoni (Jonas Raoni Soares Silva) — Sun, 30 Mar 2008 16:49:21 GMT

Simulates the Adobe Flash timeline. You define the amount of frames, the speed in fps (frames per second) and, at each frame passage an event is called, useful for animations.

[UPDATED CODE AND HELP CAN BE FOUND HERE]



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/classes/timeline [v1.0]



TimeLine = function(fps, f){

	this.fps = fps, this.frames = f;

};

with({o: TimeLine, $: TimeLine.prototype}){

	o.timers = [];

	$.running = !!($.current = +(o.timer = $.time = null));

	o.run = function(){

		var o = this;

		o.timer || (o.timer = setInterval(function(){

			for(var h, d = +(new Date), t = o.timers, i = t.length; i--;){

				(!t[i].running || ((d - t[i].time) / (1e3 / t[i].fps) > t[i].current + 1 &&

				t[i].onframe(++t[i].current), t[i].current >= t[i].frames)) &&

				(h = t.splice(i, 1)[0], h.stop(1));

			}

		}, 1));

	};

	$.start = function(c){

		var o = this, t = TimeLine;

		if(o.running) return;

		o.running = true, o.current = c || 0;

		o.time = new Date, o.onstart && o.onstart();

		if(!o.onframe || o.frames <= 0 || o.fps <= 0)

			return o.stop(1);

		t.timers.push(this), t.run();

	};

	$.stop = function(){

		var o = this;

		o.running = false;

		if(!TimeLine.timers.length)

			TimeLine.timer = clearInterval(TimeLine.timer), null;

		arguments.length && o.onstop && o.onstop();

	};

}

Example





25 fps

12 fps



TimeLine working together with the ease in quad function.

Actionscript _Animate Class

bgidge (Bryan Gidge) — Tue, 13 Feb 2007 19:47:43 GMT

This is basically a way to set up an animation queue to utilize scripted tweening. You would have to create external functions which carry forth the animation actions then store the function objects in the _Animate.queue Array in the sequence you wish to play them out. Ideally, these functions would return a Tween object for the sake of utilizing "onMotionStopped". Returning False (bool) will simply allow the next function in the queue to fire without checking for the onMotionStopped call. When you are ready to start the animation sequence, just call launch();



import _String;



dynamic class _Animate {

	var queue:Array;

	

	function _Animate() {

		queue = null;

	}

	

	public function caller(qNum){

		var gA = this;

		var callback = queue[qNum].func.apply(this, _String.toArray(queue[qNum].params)); qNum++;

		if (qNum < queue.length && callback) callback.onMotionStopped = function() { gA.caller(qNum); }

		else if (qNum < queue.length && !callback) gA.caller(qNum);

	}

	

	public function launch(){ caller(0); }

	

	

}

Sample Usage



var zoomIn = new _Animate();



zoomIn.queue = [

	{func:aniSidebar, params:"hide,6"},

	{func:aniMapMidFade, params:"hide,6"}

];



zoomIn.launch();



function aniSidebar(action, time){

	var leftBeginX = (action == "hide") ? 0 : 0 - sidebarLeftBg._width;

	var leftEndX = (action == "hide") ? 0 - sidebarLeftBg._width : 0;

	var rightBeginX = (action == "hide") ? Stage.width - sidebarRightBg._width : Stage.width;

	var rightEndX = (action == "hide") ? Stage.width : Stage.width - sidebarRightBg._width;

	var transition = mx.transitions.easing.Regular.easeInOut;

	var leftAni = new mx.transitions.Tween(sidebarLeftBg, "_x", transition, leftBeginX, leftEndX, time);

	var rightAni = new mx.transitions.Tween(sidebarRightBg, "_x", transition, rightBeginX, rightEndX, time);

	return rightAni;

}



function aniMapMidFade(action, time){

	var begin = (action == "hide") ? 100 : 0;

	var end = (action == "hide") ? 0 : 100;

	var transition = mx.transitions.easing.Regular.easeOut;

	var mapMidAni = new mx.transitions.Tween(mapMid, "_alpha", transition, begin, end, time);

	return mapMidAni;

}

Animacion en allegro

jcongote (John Edgar Congote Calle) — Fri, 22 Sep 2006 19:57:37 GMT

Codigo que muestra una pequena animacion en Allegro





#include 



void init();

void deinit();



int piramide(int a, int b, int c){

    line(screen,a+(c/2),b,a,b+c,makecol(0,128,0));    

    line(screen,a,b+c,a+c,b+c,makecol(0,128,0));

    line(screen,a+c,b+c,a+(c/2),b,makecol(0,128,0));    

}



int main() {

	init();

	int a,b,inca,incb;

	a=0,b=0;

	inca=1, incb=1;

	while (!key[KEY_ESC]) {

          clear_to_color(screen,0);

            circlefill(screen,a,b,50,makecol(128,0,128));

            a=a+inca;

            b=b+incb;

            

            if (a==200){

               inca=-1;            

            }

        rest(10);

	}



	deinit();

	return 0;

}

END_OF_MAIN();



void init() {

	int depth, res;

	allegro_init();

	depth = desktop_color_depth();

	if (depth == 0) depth = 32;

	set_color_depth(depth);

	res = set_gfx_mode(GFX_AUTODETECT_WINDOWED, 640, 480, 0, 0);

	if (res != 0) {

		allegro_message(allegro_error);

		exit(-1);

	}



	install_timer();

	install_keyboard();

	install_mouse();

	/* add other initializations here */

}



void deinit() {

	clear_keybuf();

	/* add other deinitializations here */

}

15-square game

korakot (Korakot Chaovavanich) — Mon, 27 Jun 2005 00:02:53 GMT

py_s60 1.1.3 was released a week ago.
I wonder why there's no more people playing with it.
So, I have created a simple game as an example.

I don't know what this game is called. It has 4x4 square box
with 15 pieces (1 piece missing). You need to move all the
pieces into sorting order.

Since the program is so simple, I decided to make the
moving of a piece smoother by moving it bit by bit.
Hope this doesn't make the code to hard to read.



from appuifw import *

from key_codes import *

import e32, random



# run and break-loop type of app

sleep = e32.ao_sleep

running = 1

def set_exit():

    global running

    running = 0

app.exit_key_handler= set_exit



# canvas and typical colors

c = Canvas()

app.body = c

red, green, blue, gray, white = 0xff0000, 0x00ff00, 0x0000ff, 0x777777, 0xffffff



# randomize number order for pieces

seq = range(1,17)

random.shuffle(seq)

b = [seq[0:4], seq[4:8], seq[8:12], seq[12:16]]



def piece(i, j, n):

    if n < 10:

        c.text( (12+20*i, 20+20*j), unicode(n))

    else:

        c.text( (7+20*i, 20+20*j), unicode(n))



def box(i, j, color, fill=None):

    c.rectangle( [5+20*i, 5+20*j, 25+20*i, 25+20*j], color, fill)



# draw board pieces

for k in range(16):

    j, i = divmod(k, 4)

    piece(i, j, b[j][i])



y, x = divmod(seq.index(16), 4)

box(x, y, white, white)

moving = 0     # cursor to lock if animating



# move cursor in dx, dy direction

def move(dx, dy):

    global x,y, moving

    if moving:

        return

    moving = 1

    if 0 <= x-dx < 4 and 0 <= y-dy < 4:

        b[y][x] = b[y-dy][x-dx]

        animate(x-dx, y-dy, dx, dy, b[y][x])

        x -= dx  # the hole move in opposite direction

        y -= dy

    moving = 0



# moving a piece for x,y to dx, dy direction

def animate(x, y, dx, dy, n):

    if n < 10:

        px = 12

    else:

        px = 7

    for i in range(5):

        c.text( (px+20*x + 4*i*dx, 20+20*y + 4*i*dy), unicode(n))

        sleep(0.05)

        c.text( (px+20*x + 4*i*dx, 20+20*y + 4*i*dy), unicode(n), white)

    c.text( [px+20*(x+dx), 20+20*(y+dy)], unicode(n) )



# bind arrow keys

c.bind(EKeyRightArrow,lambda:move(1, 0))

c.bind(EKeyLeftArrow,lambda:move(-1, 0))

c.bind(EKeyUpArrow,lambda:move(0, -1))

c.bind(EKeyDownArrow,lambda:move(0, 1))



# main loop, just wait

while running:

    sleep(0.1)