Ball Animation Example

This example shows create bouncing animation effect in android.

Algorithm:

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

2.) Write following into main.xml:

 

<!--?xml version="1.0" encoding="utf-8"?-->

 

 

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

 

package com.example.BallAnimationExample;

import android.graphics.Paint;

import android.graphics.RadialGradient;

import android.graphics.drawable.ShapeDrawable;

import android.graphics.drawable.shapes.Shape;

/**

* A data structure that holds a Shape and various properties that can be used to define

* how the shape is drawn.

*/

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;

}

}

 

 

4.) Run for output.

Steps:

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

Build Target: Android 4.0

Application Name: BallAnimationExample

Package Name: com. example. BallAnimationExample

Activity Name: BallAnimationExample

Min SDK Version: 14

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

 

package com.example.BallAnimationExample;

import java.util.ArrayList;

import android.animation.Animator;

import android.animation.AnimatorListenerAdapter;

import android.animation.AnimatorSet;

import android.animation.ArgbEvaluator;

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

import android.view.View;

import android.view.animation.AccelerateInterpolator;

import android.view.animation.DecelerateInterpolator;

import android.widget.LinearLayout;

public class BallAnimationExample extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

LinearLayout container = (LinearLayout) findViewById(R.id.container);

container.addView(new MyAnimationView(this));

}

public class MyAnimationView extends View {

private static final int RED = 0xffFF8080;

private static final int BLUE = 0xff8080FF;

private static final int CYAN = 0xff80ffff;

private static final int GREEN = 0xff80ff80;

public final ArrayList balls = new ArrayList();

AnimatorSet animation = null;

public MyAnimationView(Context context) {

super(context);

// Animate background color

// Note that setting the background color will automatically invalidate the

// view, so that the animated color, and the bouncing balls, get redisplayed on

// every frame of the animation.

ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);

colorAnim.setDuration(3000);

colorAnim.setEvaluator(new ArgbEvaluator());

colorAnim.setRepeatCount(ValueAnimator.INFINITE);

colorAnim.setRepeatMode(ValueAnimator.REVERSE);

colorAnim.start();

}

@Override

public boolean onTouchEvent(MotionEvent event) {

if (event.getAction() != MotionEvent.ACTION_DOWN &&

event.getAction() != MotionEvent.ACTION_MOVE) {

return false;

}

ShapeHolder newBall = addBall(event.getX(), event.getY());

// Bouncing animation with squash and stretch

float startY = newBall.getY();

float endY = getHeight() - 50f;

float h = (float)getHeight();

float eventY = event.getY();

int duration = (int)(500 * ((h - eventY)/h));

ValueAnimator bounceAnim = ObjectAnimator.ofFloat(newBall, "y", startY, endY);

bounceAnim.setDuration(duration);

bounceAnim.setInterpolator(new AccelerateInterpolator());

ValueAnimator squashAnim1 = ObjectAnimator.ofFloat(newBall, "x", newBall.getX(),

newBall.getX() - 25f);

squashAnim1.setDuration(duration/4);

squashAnim1.setRepeatCount(1);

squashAnim1.setRepeatMode(ValueAnimator.REVERSE);

squashAnim1.setInterpolator(new DecelerateInterpolator());

ValueAnimator squashAnim2 = ObjectAnimator.ofFloat(newBall, "width", newBall.getWidth(),

newBall.getWidth() + 50);

squashAnim2.setDuration(duration/4);

squashAnim2.setRepeatCount(1);

squashAnim2.setRepeatMode(ValueAnimator.REVERSE);

squashAnim2.setInterpolator(new DecelerateInterpolator());

ValueAnimator stretchAnim1 = ObjectAnimator.ofFloat(newBall, "y", endY,

endY + 25f);

stretchAnim1.setDuration(duration/4);

stretchAnim1.setRepeatCount(1);

stretchAnim1.setInterpolator(new DecelerateInterpolator());

stretchAnim1.setRepeatMode(ValueAnimator.REVERSE);

ValueAnimator stretchAnim2 = ObjectAnimator.ofFloat(newBall, "height",

newBall.getHeight(), newBall.getHeight() - 25);

stretchAnim2.setDuration(duration/4);

stretchAnim2.setRepeatCount(1);

stretchAnim2.setInterpolator(new DecelerateInterpolator());

stretchAnim2.setRepeatMode(ValueAnimator.REVERSE);

ValueAnimator bounceBackAnim = ObjectAnimator.ofFloat(newBall, "y", endY,

startY);

bounceBackAnim.setDuration(duration);

bounceBackAnim.setInterpolator(new DecelerateInterpolator());

// Sequence the down/squash&stretch/up animations

AnimatorSet bouncer = new AnimatorSet();

bouncer.play(bounceAnim).before(squashAnim1);

bouncer.play(squashAnim1).with(squashAnim2);

bouncer.play(squashAnim1).with(stretchAnim1);

bouncer.play(squashAnim1).with(stretchAnim2);

bouncer.play(bounceBackAnim).after(stretchAnim2);

// Fading animation - remove the ball when the animation is done

ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);

fadeAnim.setDuration(250);

fadeAnim.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

balls.remove(((ObjectAnimator)animation).getTarget());

}

});

// Sequence the two animations to play one after the other

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.play(bouncer).before(fadeAnim);

// Start the animation

animatorSet.start();

return true;

}

private ShapeHolder addBall(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 red = (int)(Math.random() * 255);

int green = (int)(Math.random() * 255);

int blue = (int)(Math.random() * 255);

int color = 0xff000000 | red << 16 | green << 8 | blue;

Paint paint = drawable.getPaint(); //new Paint(Paint.ANTI_ALIAS_FLAG);

int darkColor = 0xff000000 | red/4 << 16 | green/4 << 8 | blue/4;

RadialGradient gradient = new RadialGradient(37.5f, 12.5f,

50f, color, darkColor, Shader.TileMode.CLAMP);

paint.setShader(gradient);

shapeHolder.setPaint(paint);

balls.add(shapeHolder);

return shapeHolder;

}

@Override

protected void onDraw(Canvas canvas) {

for (int i = 0; i < balls.size(); ++i) {

ShapeHolder shapeHolder = balls.get(i);

canvas.save();

canvas.translate(shapeHolder.getX(), shapeHolder.getY());

shapeHolder.getShape().draw(canvas);

canvas.restore();

}

}

}

}

 

 

3.) Compile and build the project.

Output

 

 

Leave a Comment:

12 comments
Alexandre says May 4, 2012

The main.xml is incomplete. The item 1 was split in the page.

Reply
Alexandre says May 4, 2012

The main.xml is incomplete.

The item 1 was split in the page.

Reply
Rodney says May 4, 2012

thank you very useful code +++

Reply
poline052 says May 7, 2012

Please give the main.xml code

Reply
Nikhil Raj says May 8, 2012

Hi..

Can you send me an example for Reading ePub3 books in Android?

Reply
Nikhil Raj says May 8, 2012

Hi..

Can you send me an example for Reading ePub3 books in Android..?

Reply
Nikhil Raj says May 8, 2012

Hi..

Can you send me an example for Reading ePub3 books in Android…?

Reply
Nikhil Raj says May 8, 2012

hi.. can u share samples for creating custom asynchronous task?

Reply
Rodney says May 14, 2012

&&

This “&” is a problem in my compiler. I am a bit of a New dee to java in C ++ OK.
any help Please.

Reply
Rodney says May 14, 2012

&amp;&amp;

This "&" is a problem in my compiler. I am a bit of a New dee to java in C ++ OK.
any help Please.

Reply
Nik says August 17, 2012

LinearLayout container = (LinearLayout) findViewById(R.id.container);
I am getting error “container cannot be resolved or is not a field” for highlighted area(yellow) in above line. Please help me to solve this error.
This is a great source for learning android. Thank you.

Reply
Deep says October 18, 2012

container would be your layout XML file name (container.xml). you may get it under res->Layout-> filename.xml

Reply
Add Your Reply