Animation Reverse Example In Android

This example shows how to animate an object and play the animation in reverse in android.

Algorithm:

1.) Create a new project by File-> New -> Android Project name it AnimationReverseExample.

2.) Create and write following into src/ShapeHolder.java:

 

package com.example.animationreverseexample;

import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.Shape;

public class ShapeHolder {
private float x = 0, y = 0;
private ShapeDrawable shape;
private int color;
private RadialGradient gradient;
private float alpha = 1f;
private Paint paint;

public void setPaint(Paint value) {
paint = value;
}
public Paint getPaint() {
return paint;
}

public void setX(float value) {
x = value;
}
public float getX() {
return x;
}
public void setY(float value) {
y = value;
}
public float getY() {
return y;
}
public void setShape(ShapeDrawable value) {
shape = value;
}
public ShapeDrawable getShape() {
return shape;
}
public int getColor() {
return color;
}
public void setColor(int value) {
shape.getPaint().setColor(value);
color = value;
}
public void setGradient(RadialGradient value) {
gradient = value;
}
public RadialGradient getGradient() {
return gradient;
}

public void setAlpha(float alpha) {
this.alpha = alpha;
shape.setAlpha((int)((alpha * 255f) + .5f));
}

public float getWidth() {
return shape.getShape().getWidth();
}
public void setWidth(float width) {
Shape s = shape.getShape();
s.resize(width, s.getHeight());
}

public float getHeight() {
return shape.getShape().getHeight();
}
public void setHeight(float height) {
Shape s = shape.getShape();
s.resize(s.getWidth(), height);
}

public ShapeHolder(ShapeDrawable s) {
shape = s;
}
}

 

 

3.) Write following into activity_animation_reverse_example.xml:

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/container"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
android:id="@+id/startButton"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reverse"
android:id="@+id/reverseButton"
/>
</LinearLayout>
</LinearLayout>

 

 

4.) Run for output.

Steps:

1.) Create a project named AnimationReverseExample and set the information as stated in the image.

Build Target: Android 4.0
Application Name: AnimationReverseExample
Package Name: com. example. AnimationReverseExample
Activity Name: AnimationReverseExample
Min SDK Version: 11

2.) Open AnimationReverseExample.java file and write following code there:

 

package com.example.animationreverseexample;

import java.util.ArrayList;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.widget.Button;
import android.widget.LinearLayout;

public class AnimationReverseExample extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animation_reverse_example);
LinearLayout container = (LinearLayout) findViewById(R.id.container);
final MyAnimationView animView = new MyAnimationView(this);
container.addView(animView);

Button starter = (Button) findViewById(R.id.startButton);
starter.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
animView.startAnimation();
}
});

Button reverser = (Button) findViewById(R.id.reverseButton);
reverser.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
animView.reverseAnimation();
}
});

}

public class MyAnimationView extends View implements ValueAnimator.AnimatorUpdateListener {

public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();
ValueAnimator bounceAnim = null;
ShapeHolder ball = null;

public MyAnimationView(Context context) {
super(context);
ball = createBall(25, 25);
}

private void createAnimation() {
if (bounceAnim == null) {
bounceAnim = ObjectAnimator.ofFloat(ball, "y", ball.getY(), getHeight() - 50f).
setDuration(1500);
bounceAnim.setInterpolator(new AccelerateInterpolator(2f));
bounceAnim.addUpdateListener(this);
}
}

public void startAnimation() {
createAnimation();
bounceAnim.start();
}

public void reverseAnimation() {
createAnimation();
bounceAnim.reverse();
}

public void seek(long seekTime) {
createAnimation();
bounceAnim.setCurrentPlayTime(seekTime);
}

private ShapeHolder createBall(float x, float y) {
OvalShape circle = new OvalShape();
circle.resize(50f, 50f);
ShapeDrawable drawable = new ShapeDrawable(circle);
ShapeHolder shapeHolder = new ShapeHolder(drawable);
shapeHolder.setX(x - 25f);
shapeHolder.setY(y - 25f);
int color = 0xffFF0000;
Paint paint = drawable.getPaint(); //new Paint(Paint.ANTI_ALIAS_FLAG);
int darkColor = 0xffFF0000;
RadialGradient gradient = new RadialGradient(37.5f, 12.5f,
50f, color, darkColor, Shader.TileMode.CLAMP);
paint.setShader(gradient);
shapeHolder.setPaint(paint);
return shapeHolder;
}

@Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.translate(ball.getX(), ball.getY());
ball.getShape().draw(canvas);
canvas.restore();
}

public void onAnimationUpdate(ValueAnimator animation) {
invalidate();
}

}
}

 

 

3.) Compile and build the project.

Output

Leave a Comment:

2 comments
Prax says May 21, 2013

Thank you so much, good example for learners.

Reply
Chris says September 10, 2013

What’s the point of the ArrayList balls? It’s not called anywhere that I can see.

Reply
Add Your Reply