How can I draw an animated view in android?

Question

I created a custom view from scratch. Extended View and overrided onDraw(). When comes down in animating the view i generate a custom animation using offsets. eg.

while(!isOnTop){
mOffset++;

//draw the component a a it higher using the offset

if(position == 0)
isOnTop==true;
invalidate();

}

The thinking is that my frames come from invalidate it self. The problem is that invalidation of this view can come just by scrolling a listview at the same screen.

This "shared invalidation()" causes lag to my animation.So is there a way out of that lag?

Do you have any other suggestion of performing animations in that shared enviroment? Creating an animation using a seperate thread that calculates the offset also needs forced invalidation() calls to display the animation (correct me if i'm wrong).

Is the only solution to perform the animation in eg 10 invalidation requests with a larger step? It will ease the lag out but i think i can use a different approach on that.

Answer 1

"What is best" of course depends greatly on exactly what you are trying to do. You haven't said what you are trying to accomplish, so we can only guess at what may be best for you.

Here are some simple things:

• If you want to animate bitmap frames, use AnimationDrawable: http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html

• If you want to animate the movement of views within your hierarchy, use the view animation framework: http://developer.android.com/guide/topics/graphics/view-animation.html

• The new more general animation framework can do a lot more stuff an is often easier to use: http://developer.android.com/guide/topics/graphics/animation.html. This is natively available in Android 3.0+ but can also be used in Android API level 7 with the support v7 library.

• If you want to write a custom widget that is an integrated part of its view hierarchy and manually does its own animation drawing, you can use a Handler to time the updates (usually you'll want 60fps or 20ms between each invalidate()) and then in your onDraw() method draw your view's state based on SystemClock.uptimeMillis() as a delta from when the animation started.

Here's a simple repeated invalidate using Handler:

long mAnimStartTime;

Handler mHandler = new Handler();
Runnable mTick = new Runnable() {
    public void run() {
        invalidate();
        mHandler.postDelayed(this, 20); // 20ms == 60fps
    }
}

void startAnimation() {
    mAnimStartTime = SystemClock.uptimeMillis();
    mHandler.removeCallbacks(mTick);
    mHandler.post(mTick);
}

void stopAnimation() {
    mHandler.removeCallbacks(mTick);
}

Answer 2

Since this question has some interest I will reply.

The best way to to that is to have a separate canvas thread. A "separate" canvas can only be achieved with a SurfaceView. LunarLanding is an excelent example of that use. Each frame is calculated separately than the main view sharing only CPU time, not drawing time. Therefore is faster, even with the combination of for e.g a regular view at the top and an animating view at the bottom.

But you have to set an interval if you are in that shared environment. That interval is used for the FPS cap. If you don't set FPS cap then the CPU will running wild managing to get good animation to the SurfaceView if it was alone. Capping it at 60fps or even less will do the trick to draw all views efficiently with no CPU overload.

So see the drawing thread of the Lunar Landing from the API demos and set a FPS cap.

private long timeNow;
    private long timeDelta;
    private long timePrevFrame;

    private void capFps(int fps) {  
            timeNow = System.currentTimeMillis();
            timeDelta = timeNow - timePrevFrame;        

            try {

//ps you can always set 16 instead of 1000/fps for 60FPS to avoid the calculation every time

Thread.sleep((1000 / fps) - timeDelta);
            } catch (InterruptedException e) {

            }   

            timePrevFrame = System.currentTimeMillis();
    }

and then the drawing thread will look something like this:

@Override
    public void run() {
        Canvas c;

        while (run) {
            c = null;
            sleepFps(60, false);
            try {
                synchronized (surfaceHolder) {
                    c = surfaceHolder.lockCanvas(null);
                    widgetView.doDraw(c);
                }
            } finally {
                if (c != null) {
                    surfaceHolder.unlockCanvasAndPost(c);
                }
            }

        }
    }