Unrealistic
Light sprite animator component
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
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