CODEWITHSUNDEEP
androidanimationimageview
Ben Luk
Ben Luk

Reputation: 755

How to make animation when I use canvas

For example: myPos.getCoordX() is 0 and myPos.getCoordY() is 0

When I update the variable, myPos.getCoordX() is 50 and myPos.getCoordY() is 100

Then I call the showPosition() method again.

I want to: start a moving animation from 0,0 to 50,100

private void showPosition() {
        Bitmap floorPlan = BitmapFactory.decodeResource(getResources(),
                R.drawable.wallpaper).copy(Bitmap.Config.ARGB_4444, true);
        Bitmap point = BitmapFactory.decodeResource(getResources(),
                R.drawable.ic_launcher).copy(Bitmap.Config.ARGB_4444, true);
        Bitmap PositionOnFloorplan = overlay(floorPlan, point);


        // 1
        PositionOnFloorplan = floorPlan.copy(Bitmap.Config.ARGB_8888, true);

        Canvas canvas = new Canvas(PositionOnFloorplan);
        canvas.drawBitmap(point, (float) (myPos.getCoordX()),
                (float) (myPos.getCoordY()), null);

        ImageView imageView = (ImageView) findViewById(R.id.imggg);
        imageView.setAdjustViewBounds(true);
        imageView.setImageBitmap(PositionOnFloorplan);

    }


    private Bitmap overlay(Bitmap floorPlan, Bitmap point) {
        Bitmap bmOverlay = Bitmap.createBitmap(floorPlan.getWidth(),
                floorPlan.getHeight(), floorPlan.getConfig());
        Canvas canvas = new Canvas(bmOverlay);
        canvas.drawBitmap(floorPlan, new Matrix(), null);
        canvas.drawBitmap(point, (float) (myPos.getCoordX()),
                (float) (myPos.getCoordY()), null);
        return bmOverlay;
    }

Upvotes: 4

Views: 5062

Answers (1)

Whitney
Whitney

Reputation: 1237

As you aren't using a custom view and the onDraw method to update your canvas, I recommend using a property animator to animate the canvas drawing.

Below is code for an example animation that moves a view in the X with canvas.translate(value,0);. You will need to add in the Y value, example: canvas.translate(valueX,valueY);. Just define another ValueAnimator for the Y, create an AnimatorSet, and do animatorSet.playTogether(valueanimatorX, valueanimatorY) instead, finishing with animatorSet.start(); 

public void doCanvas(){
    //Create our resources
    Bitmap bitmap = Bitmap.createBitmap(mLittleChef.getWidth(), mLittleChef.getHeight(), Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(bitmap);
    final Bitmap chefBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.dish_special);
    final Bitmap starBitmap= BitmapFactory.decodeResource(getResources(),R.drawable.star);

    //Link the canvas to our ImageView
    mLittleChef.setImageBitmap(bitmap);

    //animate from canvas width, to 0, and back to canvas width
    ValueAnimator animation= ValueAnimator.ofInt(canvas.getWidth(),0,canvas.getWidth());
    animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int value = (Integer) animation.getAnimatedValue();
            //Clear the canvas
            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
            canvas.drawBitmap(chefBitmap, 0, 0, null);
            canvas.save();
            canvas.translate(value,0);
            canvas.drawBitmap(starBitmap, 0, 0, null);
            canvas.restore();
            //Need to manually call invalidate to redraw the view
            mLittleChef.invalidate();
        }
    });
    animation.addListener(new AnimatorListenerAdapter(){
        @Override
        public void onAnimationEnd(Animator animation) {
            simpleLock= false;
        }
    });
    animation.setInterpolator(new LinearInterpolator());
    animation.setDuration(mShortAnimationDuration);
    animation.start();
}

Upvotes: 2

Related Questions