About the package ej.motion

1

The relevant content of the ej.motion package is not seen in the development instructions. Can you provide some instructions or examples about this package?

2

Hi guankai,

I will assume that you are using the latest version of the Motion library, which is 4.0.0 at this date. The API of version 3.x is a bit different but follows the same principles.

The Motion library defines two main types:

  • Function, an interface that represents an easing function: a mathematical function that describes the rate at which a value changes over time.
  • Motion, a class that describes the movement of an element. It specifies the easing function to use, the start/stop values and the duration.

The library implements most common ease in/out functions, like QuadEaseIn or QuadEaseOut. You can of course define your own easing functions by implementating the interface Function.

To animate your UI with great look and feel, create a new motion instance and use its value on each tick of your animation.
The Widget library introduces a very handy class for doing that, which is called MotionAnimation.

Here is a simple example of using Motion and MotionAnimation in a widget:

public class MyWidget extends Widget implements MotionAnimationListener {

	@Override
	protected void onShown() {
		super.onShown();
		
		// Creates a motion with quad ease in/out, which starts at value 0 and stops at value 100, over a period of time of 500 milliseconds.
		Motion motion = new Motion(QuadEaseInOutFunction.INSTANCE, 0, 100, 500);
		
		// Starts a new animation that uses the motion. The specified listener (this) will get notified on each tick of the animation to update the UI accordingly.
		MotionAnimation motionAnimation = new MotionAnimation(getDesktop().getAnimator(), motion, this);
		motionAnimation.start();
	}

	@Override
	public void tick(int value, boolean finished) {
		// Use the specified value to update the UI.
		updateUI(value);
		
		// Request a new render to reflect the changes.
		requestRender();
	}

You can also find some examples of the usage of the Motion API in the Demo Widget available here: GitHub - MicroEJ/Demo-Widget: This repository contains a demo illustrating the widgets and containers available in the widget library.

Regards,
Thomas for MicroEJ