Question

I want to develop my application with a simple animation. I have used a lot of source from: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html

My code:

 public class Animation extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);        
    setContentView(R.layout.main);
}

private static class AnimView extends View {        
    private Paint myPaint;      
    private Paint myFramePaint;
    private RectF bigOval;
    private float myStart;
    private float mySweep;        
    private static final float SWEEP_INC = 1;

    public AnimView(Context context) {
        super(context);     
        init();
    }

    public AnimView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        myPaint = new Paint();
        myPaint.setAntiAlias(true);
        myPaint.setStyle(Paint.Style.FILL);
        myPaint.setColor(Color.RED);
        bigOval = new RectF(40, 10, 280, 250);                  
        myFramePaint = new Paint();
        myFramePaint.setAntiAlias(true);
        myFramePaint.setColor(Color.BLACK);
    }

    private void drawArcs(Canvas canvas, RectF oval, boolean useCenter, Paint paint) {
        canvas.drawRect(oval, myFramePaint);
        canvas.drawArc(oval, myStart, mySweep, useCenter, paint);
    }

    @Override
    protected void onDraw(Canvas canvas) {          
        drawArcs(canvas, bigOval, true, myPaint);           
        myStart = -90;          
        mySweep -= SWEEP_INC;
        invalidate();
    }       
}}

I’m using my view in this way in my xml file:

<view
class="go.android.Animation$AnimView"
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
/>

It works properly. I know that it isn’t custom animation. But is this possible to set speed of this animation (in ms or seconds)? Or to stop this animation (for example in the OnClick or OnTouch Listener), and get to know when this animation has finished?

I also want to get first whole circle, and on the end of animation – lack of circle. Simply to change direction of this animation. Is this possible?

I don’t want to use frame-by-frame animation. I want to get continuous animation. Is there any possibilities to get similar animation (with setting speed, etc…)
I also want to animate not only a color but rather a round drawable.

Thank you in advance. Sorry for my English skill.

Answer 1

There might be better and more precise ways to control your animation than this (you could look into using OpenGL), but you can change the speed and direction of the animation relatively easily given your existing code.

The speed is controlled by the SWEEP_INC field (which stands for Sweep Increment I would guess). Every time the onDraw() method is called, it increases the size of the wedge by 1 degree. If you want the animation to go 5 times as fast, set SWEEP_INC to 5 instead of 1. If you want the animation to go half as fast, set SWEEP_INC to 0.5.

You can also just set a flag to reverse the animation each time it finishes. I’ve modified your code to reverse each time it reaches the end, using the addToCircle boolean.

public class Animation extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main);
    }

    private static class AnimView extends View {        
        private Paint myPaint;      
        private Paint myFramePaint;
        private RectF bigOval;
        private float myStart;
        private float mySweep;        
        private float SWEEP_INC = 1;
        //Use this flag to control the direction of the arc's movement
        private boolean addToCircle = true;

        public AnimView(Context context) {
            super(context);     
            init();
        }

        public AnimView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        private void init() {
            myPaint = new Paint();
            myPaint.setAntiAlias(true);
            myPaint.setStyle(Paint.Style.FILL);
            myPaint.setColor(Color.RED);
            bigOval = new RectF(40, 10, 280, 250);                  
            myFramePaint = new Paint();
            myFramePaint.setAntiAlias(true);
            myFramePaint.setColor(Color.BLACK);
        }

        private void drawArcs(Canvas canvas, RectF oval, boolean useCenter, Paint paint) {
            canvas.drawRect(oval, myFramePaint);
            canvas.drawArc(oval, myStart, mySweep, useCenter, paint);
        }

        public void setIncrement(float newIncrement)
    {
        SWEEP_INC = newIncrement;
    }

        @Override
        protected void onDraw(Canvas canvas) {
            drawArcs(canvas, bigOval, true, myPaint);           
            myStart = -90;
            //If the arc is currently getting bigger, decrease the value of mySweep
            if(addToCircle)
            {
                mySweep -= SWEEP_INC;
            }
            //If the arc is currently getting smaller, increase the value of mySweep
            else
            {
                mySweep += SWEEP_INC;
            }
            //If the animation has reached the end, reverse it
            if(mySweep%360 == 0)
            {
                addToCircle = !addToCircle;
            }
            invalidate();
        }       
    }
}

EDIT
If you remove the final and static modifiers from SWEEP_INC you can change the speed of the animation at runtime using the setIncrement(float newIncrement) function I’ve added.

You can stop the animation by calling setIncrement(0).

However, I don’t think there is a constant rate at which onDraw is called. So I don’t know of any way to assign a duration in seconds to this animation. For that you may want to look into more sophisticated methods of animation.