×
Namespaces

Variants
Actions
(Difference between revisions)

Creating Simple Animations with Java ME

From Nokia Developer Wiki
Jump to: navigation, search
Tomi_ (Talk | contribs)
m (Tomi -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Animation on Java ME]][[Category:LCDUI]][[Category:Code Examples]][[Category:Series 40]][[Category:Nokia Asha]][[Category:Nokia Asha Platform 1.0]]
{{Abstract|This article explains how to ... }}
+
{{Abstract|This article explains how to create simple animations with Java ME. The code introduced in this article is compatible with most Java ME devices including Series 40 phones and Nokia Asha software platform 1.0.}}
  
 
{{ArticleMetaData <!-- v1.3 -->
 
{{ArticleMetaData <!-- v1.3 -->
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [[Media:CustomCategoryBarDemo-2013-06-27.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
 
|devices= <!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
 
|devices= <!-- Devices tested against - e.g. Nokia Lumia 928, Nokia Asha 501) -->
|sdk= <!-- SDK(s) built and tested against (e.g. Windows Phone 8.0 SDK) -->
+
|sdk= [https://www.developer.nokia.com/Develop/asha/java/tools.xhtml Nokia Asha SDK 1.0]
|platform= <!-- Compatible platforms - e.g. Nokia Asha Platform 1.0 and later -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|signing= <!-- Special Signing requirements -->
|signing=<!-- Special Signing requirements -->
+
 
|capabilities= <!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
 
|capabilities= <!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only - not link -->  
+
|translated-from-title= <!-- Title only - not link -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20130627
|author= <!-- Enter link [[User:username]] -->
+
|author= [[User:Tomi]]
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
  
 +
The standard LCDUI framework has no support "out of the box" for animation.  If you want to use animations with LCDUI you have no choice but to implement it yourself.
 +
 +
This article studies implementing a basic, generic, UI independent animation framework that is both efficient and easy to use. The code has been tested in the [[Creating LCDUI Custom Components: CategoryBar|Custom CategoryBar Demo]], which implements the animations and applies them for transitions between the tabs (full source code is available [[:File:CustomCategoryBarDemo-2013-06-27.zip|here]]).
 +
 +
{{Note|<br />
 +
* [http://www.developer.nokia.com/Resources/Library/LWUIT/#!index.html LWUIT] does have animation support
 +
* Nokia UI API provides the [http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-237420DE-CCBE-4A74-A129-572E0708D428/com/nokia/mid/ui/frameanimator/package-summary.html FrameAnimator package], but that is not generic and has dependency to the user interface (UI) components.}}
  
 
== Implementation ==
 
== Implementation ==
Line 30: Line 36:
 
=== Architecture ===
 
=== Architecture ===
  
[[File:Animation-fw-architecture.png]]
+
The architecture of the animation package is very basic. The main class, which you can consider to be the animation "engine" is {{Icode|IntAnimation}}. It is responsible for starting and stopping the animations, managing the animation state, threading etc. Together with the {{Icode|AnimationListener}} it provides the animation values when the animation is running.
 +
[[File:Animation-fw-architecture.png|none]]
 +
 
 +
The class implementing {{Icode|AnimationListener}} is also notified when the state of an animation is changed. The three states currently implemented are ''running'', ''stopped'' and ''finished''. A concrete implementation of {{Icode|EasingCurve}} must be set before an animation can be run. The animation implementation hides the easing curves behind an enumeration; you as a developer don't have to mess with the easing curve class instances. Instead you set the easing curve as integer.
  
 
=== Easing curves ===
 
=== Easing curves ===
  
<gallery widths="492px" heights="212px">
+
Easing curves play a vital part in defining the behaviour 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.
File:EaseInOutQuad.png|In in-out-quad easing curve the speed of the animation accelerates in the beginning and slows down in the end. The image is taken from site http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html which shows graphs for several easing curves.
+
 
</gallery>
+
[[File:EaseInOutQuad.png|frame|none|500px|In in-out-quad easing curve the speed of the animation accelerates in the beginning and slows down in the end. The image is taken from site http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html which shows graphs for several easing curves.]]
 +
 
 +
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 {{Icode|EasingCurve}} implements everything but the {{Icode|calculate()}} method. The {{Icode|calculate()}} method of the linear easing curve is as follows:
 +
<code java>
 +
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;
 +
    }
 +
}
 +
</code>
 +
 
 +
As you can see from the snippet above the animation is divided to {{Icode|n}} steps based on the duration. Then the values between the "from" and "to" point are evenly distributed making the animation linear. Currently, this light animation framework implements three easing curves: ''linear'', ''in-out-quad'' and ''out-in-quad''.
  
 
== Usage ==
 
== Usage ==
 +
 +
Using the animation package is easy. First have your class, that handles the animating, derive from {{Icode|AnimationListener}}. Create the {{Icode|IntAnimation}} instance where convenient - a straightforward place to do it is in the constructor. Remember to set the ''listener'' so that you can receive the animated values and changes in the animation states.
  
 
<code java>
 
<code java>
Line 66: Line 101:
 
</code>
 
</code>
  
 +
Implement the methods required by the {{Icode|AnimationListener}} interface:
 
<code java>
 
<code java>
 
     /**
 
     /**
Line 106: Line 142:
  
 
== Summary ==
 
== Summary ==
 +
 +
It's not hard to do animations with Java ME. However, it requires work and when you decide to implement the animations, make sure you do it in a way that you can re-use your stuff later in your other projects.
 +
 +
The study, explained in this article, produced an animation package that is quite generic and you are free to use it and expand it with your own easing curves. Further improvements to this package would include implementing a dedicated thread for animations. The current implementation is basically based on just fire-and-forget principle.

Latest revision as of 06:35, 25 July 2013

This article explains how to create simple animations with Java ME. The code introduced in this article is compatible with most Java ME devices including Series 40 phones and Nokia Asha software platform 1.0.

Article Metadata
Code ExampleTested withCompatibilityArticle
Created: Tomi_ (27 Jun 2013)
Last edited: hamishwillee (25 Jul 2013)

Contents

[edit] Introduction

The standard LCDUI framework has no support "out of the box" for animation. If you want to use animations with LCDUI you have no choice but to implement it yourself.

This article studies implementing a basic, generic, UI independent animation framework that is both efficient and easy to use. The code has been tested in the Custom CategoryBar Demo, which implements the animations and applies them for transitions between the tabs (full source code is available here).

Note.pngNote: 

  • LWUIT does have animation support
  • Nokia UI API provides the FrameAnimator package, but that is not generic and has dependency to the user interface (UI) components.

[edit] Implementation

[edit] Architecture

The architecture of the animation package is very basic. The main class, which you can consider to be the animation "engine" is IntAnimation. It is responsible for starting and stopping the animations, managing the animation state, threading etc. Together with the AnimationListener it provides the animation values when the animation is running.

Animation-fw-architecture.png

The class implementing AnimationListener is also notified when the state of an animation is changed. The three states currently implemented are running, stopped and finished. A concrete implementation of EasingCurve must be set before an animation can be run. The animation implementation hides the easing curves behind an enumeration; you as a developer don't have to mess with the easing curve class instances. Instead you set the easing curve as integer.

[edit] Easing curves

Easing curves play a vital part in defining the behaviour 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.

In in-out-quad easing curve the speed of the animation accelerates in the beginning and slows down in the end. The image is taken from site http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html which shows graphs for several easing curves.

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;
}
}

As you can see from the snippet above the animation is divided to n steps based on the duration. Then the values between the "from" and "to" point are evenly distributed making the animation linear. Currently, this light animation framework implements three easing curves: linear, in-out-quad and out-in-quad.

[edit] Usage

Using the animation package is easy. First have your class, that handles the animating, derive from AnimationListener. Create the IntAnimation instance where convenient - a straightforward place to do it is in the constructor. Remember to set the listener so that you can receive the animated values and changes in the animation states.

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);
...

Implement the methods required by the AnimationListener interface:

    /**
* @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.
}

[edit] Summary

It's not hard to do animations with Java ME. However, it requires work and when you decide to implement the animations, make sure you do it in a way that you can re-use your stuff later in your other projects.

The study, explained in this article, produced an animation package that is quite generic and you are free to use it and expand it with your own easing curves. Further improvements to this package would include implementing a dedicated thread for animations. The current implementation is basically based on just fire-and-forget principle.

This page was last modified on 25 July 2013, at 06:35.
174 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.

×