×
Namespaces

Variants
Actions
Revision as of 16:34, 27 June 2013 by Tomi_ (Talk | contribs)

Creating Simple Animations with Java ME

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to ...

Article Metadata
CompatibilityArticle
Created: (28 Jun 2013)
Last edited: Tomi_ (27 Jun 2013)

Contents

Introduction

The standard LCDUI framework has no out-of-the-box animations. LWUIT does provide them, but in case you want to stick with the LCDUI you have no choice but to implement them yourself. Nokia UI API provides the FrameAnimator package, but that is not generic and has dependency to the user interface (UI) components. This article studies implementing a simple, generic, UI independent animation framework that is both efficient and easy to use.

Implementation

Architecture

Animation-fw-architecture.png

Easing curves

In addition to the duration and the starting and ending point, easing curves play a vital part in defining the behavior of an animation. The simplest easing curve, linear curve, moves the object you are animating from the source to the destination point with steady speed where-as in-out-quad easing curves makes the animation more vivid.

Implementation-wise the approach here is to calculate the values for the animation beforehand. The easing curve implementation is responsible for calculating the values. The abstract base class EasingCurve implements everything but the calculate() method. The calculate() method of the linear easing curve is as follows:

public class LinearEasingCurve extends EasingCurve {
public boolean calculate(int from, int to, int duration) {
_duration = duration;
_steps = _duration / IntAnimation.UPDATE_INTERVAL;
_values = new int[_steps];
_currentStepIndex = 0;
final int stepLength = (to - from) / (_steps - 1);
 
_values[0] = from;
_values[_steps - 1] = to;
 
for (int i = 1; i < _steps - 1; ++i) {
_values[i] = from + stepLength * i;
}
 
return true;
}
}

Usage

public class MyCanvas
extends Canvas
implements AnimationListener
{
// Constants
...
private static final int ANIMATION_DURATION = 500;
private static final int EASING_CURVE = IntAnimation.EASING_CURVE_INOUTQUAD;
 
// Members
...
private IntAnimation _animation = null;
...
 
/**
* Constructor.
*/

public MyCanvas() {
super();
...
_animation = new IntAnimation();
_animation.setListener(this);
...
    /**
* @see AnimationListener#onAnimatedValueChanged(int)
*/

public void onAnimatedValueChanged(int value) {
// Handle the value
...
repaint();
}
 
/**
* @see AnimationListener#onAnimationStateChanged(int)
*/

public void onAnimationStateChanged(int state) {
switch (state) {
case IntAnimation.STATE_RUNNING:
...
break;
case IntAnimation.STATE_STOPPED:
...
break;
case IntAnimation.STATE_FINISHED:
...
break;
default:
break;
}
}

Then just let it rip:

boolean started = _animation.start(from, to, ANIMATION_DURATION, EASING_CURVE))
 
if (!started) {
// Failed to start the animation! Handle this situation gracefully - maybe by just jumping to the "to" point.
}

Summary

225 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×