Sunday, September 16, 2012

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 implementsValueAnimator.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(- 25f);
            shapeHolder.setY(- 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

1 comment:

  1. Excelente aporte, felicitaciones y muchas gracias

    ReplyDelete