Custom animation in Android

Question

I've written a custom View. Now I want to do a little custom animation when the user touches it.

When I say custom, I mean I basically want to render each frame myself, and not use a "predefined" animation like described here.

What is the proper way of implementing this?

Answer 1

Most flexible (and pretty easy) way to create custom animation is to extend Animation class.

In general:

1. Set duration of your animation using setDuration() method.
2. Optionally set the interpolator for your animation using setInterpolator() (for exapmle you can use LinearInterpolator or AccelerateInterpolator etc.)
3. Override applyTransformation method. Here we interested in interpolatedTime variable which changes between 0.0 and 1.0 and represent the your animation progress.

Here is an example (I'm using this class to change ofsset of my Bitmap. Bitmap itself is drawn in draw method):

public class SlideAnimation extends Animation {

    private static final float SPEED = 0.5f;

    private float mStart;
    private float mEnd;

    public SlideAnimation(float fromX, float toX) {
        mStart = fromX;
        mEnd = toX;

        setInterpolator(new LinearInterpolator());

        float duration = Math.abs(mEnd - mStart) / SPEED;
        setDuration((long) duration);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        float offset = (mEnd - mStart) * interpolatedTime + mStart;
        mOffset = (int) offset;
        postInvalidate();
    }

}

Also you can modify View by using Transformation#getMatrix().

UPDATE

In case if you're using Android Animator framework (or compatibility implementation - NineOldAndroids) you can just declare setter and getter for your custom View property and animate it directly. Here is an another example:

public class MyView extends View {

    private int propertyName = 50;

    /* your code */

    public int getPropertyName() {
        return propertyName;
    }

    public void setPropertyName(int propertyName) {
        this.propertyName = propertyName;
    }

    /*
    There is no need to declare method for your animation, you 
    can, of course, freely do it outside of this class. I'm including code
    here just for simplicity of answer.
    */
    public void animateProperty() {
        ObjectAnimator.ofInt(this, "propertyName", 123).start();
    }

}

Answer 2

Animation animation = new AnimationDrawable();
animation.addFrame(getResources().getDrawable(R.drawable.exp1), 50);
animation.addFrame(getResources().getDrawable(R.drawable.exp2), 50);
animation.addFrame(getResources().getDrawable(R.drawable.exp3), 50);
animation.addFrame(getResources().getDrawable(R.drawable.exp4), 50);
animation.addFrame(getResources().getDrawable(R.drawable.exp5), 50);
animation.addFrame(getResources().getDrawable(R.drawable.exp6), 50);

This is the code that I use to produce a custom, frame-by-frame animation in my onCreate().

After that I need to start the animation, but must do so inside the UI thread. Therefore I make use of Runnable.

class Starter implements Runnable {
    public void run() {
        animation.stop();
        animation.start();
    }
}

I start that Runnable from an onClick() using the .post() method of ImageView:

((ImageView) findViewById(R.id.ImageToAnimateOnClicking)).post(new Starter());

Answer 3

There are four types of animation that you can add to your custom view.

1. alpha - animate transparency of element
2. translate - animate position of element
3. scale - animate size of element
4. rotate - animate rotation of element

Here is a blog post which explains each one of them in detail.

Once you are done with creating an animation, just use the below code to add that custom animation to the view.

findById(R.id.element).startAnimation(AnimationUtils.loadAnimation(this, R.anim.custom_animation));

Answer 4

I assume you create each frame as a bitmap, and then pass it to the Animation directly, instead of getting the Drawable from resource.

Bitmap bm = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_888);
Canvas c = new Canvas(bm);
.... Draw to bitmap
animation.addFrame(bm,50)
.... repeat for all frames you wish to add.

Answer 5

In addition to defining tweened animations in XML you can also define frame-by-frame animations (stored in res/drawable).

<animation-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="true"
>
    <item android:drawable="@drawable/frame1" android:duration="300" />
    <item android:drawable="@drawable/frame2" android:duration="300" />
    <item android:drawable="@drawable/frame3" android:duration="300" />
</animation-list>

Set the animation as the View background via setBackgroundResource.

If you're looking to do something more complicated, take a look at the Canvas class. See the brief intro on how to draw with Canvas.