Animating 3 parts of a view

Question

I am trying to make an app view that, when presented with a subtraction problem, will show an animation of a growing rectangle (or fat line) that crawls up the number line to that integer.

I already have things set up so that I click "show me!" and bars are drawn along the number line showing the minuend, the subtrahend and the difference, but I'd like to be able to have a positive number's rectangle crawl up in a positive direction, negative from zero in the negative direction.

In looking through the documentation there seem to be several different ways to go about this. I am hoping somebody can suggest a way that's reasonably simple for this novice to implement. Here are the different approaches I've found:

This seems very much like this person's desire to have a bar graph where the bars "pop up," but it doesn't have an answer. Android Animated Bar Chart (invalidate())

I've perused http://developer.android.com/guide/topics/resources/drawable-resource.html -- but I don't have a "drawable" because it's being drawn in the View. I'm thinking of making the rest of the number line a background bitmap per Android View.getDrawingCache returns null, only null but I want three rectangles (for the minuend, subtrahend and difference).

I have thought of making a series of rectangle drawables and showing them frame-by-frame to show the growth.

I have looked at Animation at a specified rate using canvas / Ondraw but cannot discern just what code to wrap in that "if" statement, if in fact my problem is re-drawing...

I looked at using Paths -- and put the following code together. If direction matters, then it seems I should be able to slow things down and watch the path going in that direction, but it's instantaneous. I found I saw an example at http://www.curious-creature.org/2013/12/21/android-recipe-4-path-tracing/

if (minuendLength > 0)    // start at 0 and go to the minuend length

    {

            path.addRect(interpX(0), yPosition(40),  interpX(minuendLength), yPosition(43) , Path.Direction.CW);
// interpX lets me say what number on the number line it should align with; 
//yPosition is percent of the way down the screen. 
                 canvas.drawPath(path,minuendPaint);
                // Seems same as drawRect --  instantaneous.  
        }

(The number line in the 'background' code is as follows, with different options for different sized integers entered:

if (   (minuendLength <10 && subtrahendLength <10 )   &&    (minuendLength >-10 && subtrahendLength >-10 )  )


    {
            this.setLineDimension(10);    //  default 
            super.onDraw(canvas);
             canvas.drawLine(interpX(-this.getLineDimension()),  yPosition(52 ),
                     interpX(this.getLineDimension()), yPosition(52), axisPaint); 
             int step = this.getLineDimension()/5;   // so you're not writing *all* the numbers 
                //   when they enter numbers and you make your own number line.  
            // paints the little hatch marks  
            for (int x = -this.getLineDimension(); x <= this.getLineDimension(); x+=step/2)

                  canvas.drawLine(interpX(x), yPosition(52), interpX(x), yPosition(53) , littleAxisPaint); 

            // draw the numbers on the hatch marks

            textPaint.setTextAlign(Paint.Align.CENTER);
            for (int x = -this.getLineDimension() + step; x < this.getLineDimension(); x += step)
            {
                canvas.drawText(Integer.toString(x), interpX(x), yPosition(56), textPaint); 
            }


    }

just use a custom View with a ValueAnimator which invalidate()s the view each frame and implement onDraw method where you draw the stuff — pskink, Oct 20 '14 at 17:22
Will try that first, then, and hope that the "invalidating" doesn't go too fast per the "spelling app" person. — geonz, Oct 20 '14 at 17:32
The examples I'm finding either animate an object -- a drawable -- or an entire view. Still hunting for how to change the value of minuendLength every tenth of a second. ("just use a custom View with a ValueAnimator" ... struggling to figure out how to but thanks...) — geonz, Oct 20 '14 at 19:24
F'rinstance, I can get my custom view to DrawRect (as in above) with 4 float values; but when I make it a "Rect," it wants integers... and when I do that it still won't draw (when I change to canvas.drawRect(r, minuendPaint); I don't know where to begin to make a ValueAnimator... I found some examples of xml for ObjectAnimators but ... they all have objects. — geonz, Oct 20 '14 at 20:04
create a ValueAnimator, setDuration(), addUpdateListener(this) and call start(), in onAnimationUpdate call invalidate() to force onDraw() to be called — pskink, Oct 20 '14 at 20:21
Got it! (took practicing animations per http://code.tutsplus.com/tutorials/android-sdk-creating-a-simple-property-animation--mobile-15022 and then following your lead... ) If you post as an answer I'll gladly check it off as one... — geonz, Oct 23 '14 at 00:34

score 0 · Accepted Answer · answered Dec 22 '15 at 16:42

I ended up doing this using Runnables.

 animate.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if   (  ((addend1 > 0)  && (addend2 < 0)) )

            {
                tempNum1 =addend1 ;
                tempNum2 = addend2; 
                h.post(shrink1bigger);
            }
            else if (addend1 < 0 && addend2 > 0)
            {
                tempNum1 =addend1 ;
                tempNum2 = addend2; 
                h.post(shrink2bigger);
            }
        }
    });

private Runnable shrink2bigger = new Runnable(){
    @Override
    public void run() {

        tempNum1+=1;
        tempNum2-=1; 
        shrinkDraw();
        Log.i("WatchAnimActivity", "tempNum1 is " + tempNum1);
        h.postDelayed(shrink2bigger, 500);
        checkTemp(shrink2bigger);
    }};


private void shrinkDraw()
{

    numLine.setFirstNum(tempNum1);
    numLine.setNextNum(tempNum2);
    numLine.invalidate();
}
 public void checkTemp(Runnable shrink)
{
    Log.i("WatchAnimActivity", "tempNum1 in CHeckTemp is " + tempNum1);
    if (tempNum1 ==0 || tempNum2==0)
        h.removeCallbacks(shrink);

}

Animating 3 parts of a view

1 Answers1

Linked