Directory

← Back

Unrealistic

Light sprite animator component

Author

Contributors

Rating

Unrealistic component is a component for animating sprite images in the browser.

The component allows for different manipulations like:

  • Looping frames.
  • Reversing frames when at the end.
  • Defining loop start and end frames.
  • Defining animation position in component.
  • Delayed animation start.

Changing animation patterns after a given delay like:

  • Animation delays at wanted frames

  • Adding new delays

  • Fading images in and out.

  • Changing the loop frames after a delay.

  • Changing reversing and looping.

Sample code

	private void createGrowingRain() {
		ConductorCell drop;
		for (int k = 1; k <= 20; k++) {
			for (int i = 1; i < 40; i++) {
				drop = new ConductorCell("unrealistic/images/Rain.png", 1, 300, 84, 1);

				drop.setOffsetX(random.nextInt(WIDTH));
				drop.setFrameDelay(random.nextInt(3));
				drop.setEnd(52 - random.nextInt(10), 1);

				final int delay = 90 + random.nextInt(250);
				drop.setDelay(delay);

				final LimitChange change = new LimitChange((random.nextInt(50) / (drop.getFrameDelay() + 1)) + 40);
				change.setRemove(true);

				drop.addLimit(change);

				addImage(drop);
			}
		}
	}
public class TimedCircleAndFlame extends UnrealisticComponent {

	private static final long serialVersionUID = -3698813263032202763L;

	public TimedCircleAndFlame() {
		setWidth("150px");
		setHeight("150px");
		setFps(15);

		final ConductorCell cell = new ConductorCell("unrealistic/images/CircleSprites.png", 90, 90, 29, 5);
		cell.setLoop(false);
		cell.setOffsetX(23);
		cell.setOffsetY(30);

		addImage(cell);

		addImage(createFlame(94, 81, 82));

		addImage(createFlame(101, 17, 56));

		addImage(createFlame(108, 81, 28));

		addImage(createFlame(116, 54, 93));

		addImage(createFlame(122, 28, 28));

		addImage(createFlame(128, 92, 56));

		addImage(createFlame(136, 28, 82));

		addImage(createFlame(145, 54, 17));
	}

	private ConductorCell createFlame(final int delay, final int offsetX, final int offsetY) {
		final ConductorCell flame = new ConductorCell("unrealistic/images/LongerSmallFlameWithColor.png", 25, 25, 14, 2);
		flame.setLoopStartColumn(8);
		flame.setReverse(true);

		flame.setDelay(delay);
		flame.setOffsetX(offsetX);
		flame.setOffsetY(offsetY);

		return flame;
	}
}

Links

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

First public version. Does not animate on Opera or Firefox. IE untested.

Released
2012-04-03
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.7+
Vaadin 7.0+ in 0.9.2
Browser
Safari
Google Chrome
iOS Browser
Android Browser
Online