Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate an ImageView clockwise using ObjectAnimator

I am trying to rotate an Image so that it fits properly below another Image. So this is what I am trying to achieve :

What I am trying to achieve

And this is what I am able to achieve :

Currently achieved

It basically contains two ImageView with the first one containing the part above the floor and the second one containing the tiles to cover the floor.

My problem is that I am unable to animate the the tiles image in clockwise direction as well as rotate the view around x axis such that it fits below the image containing the part above the floor.

I am using ObjectAnimator to animate my ImageView. Below is my code:

public class VisualizerFragment extends Fragment {

ImageView image;
FlipImageView image_back;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    getActivity().setRequestedOrientation(
            ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

    View view = inflater.inflate(R.layout.fragment_visualizer, container, false);
    image = (ImageView) view.findViewById(R.id.vs_image);
    image_back = (FlipImageView) view.findViewById(R.id.vs_image_back);

    Glide.with(getActivity())
            .load(R.drawable.floor3)
            .centerCrop()
            .fitCenter()
            .listener(new RequestListener<Integer, GlideDrawable>() {
                @Override
                public boolean onException(Exception e, Integer model, Target<GlideDrawable> target, boolean isFirstResource) {
                    return false;
                }

                @Override
                public boolean onResourceReady(GlideDrawable resource, Integer model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                    Bitmap bmp = BitmapFactory.decodeResource(getActivity().getResources(), R.drawable.i9004);

                    //crop image
                    Matrix matrix = new Matrix();
                    matrix.postScale(1f, 1f);
                    Bitmap croppedBitmap = Bitmap.createBitmap(bmp, 0, 0,100, 100, matrix, true);

                    bmp = getRoundedCornerBitmap(croppedBitmap, getResources().getColor(R.color.line),0,1,getActivity());
                    BitmapDrawable bitmapDrawable = new BitmapDrawable(bmp);
                    bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

                    image_back.setDrawable(bitmapDrawable);
                    image_back.setFlippedDrawable(bitmapDrawable);
                    image_back.setFlipped(true);
                    image_back.toggleFlip();

                    //rotate image
                    ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.fliping);
                    anim.setTarget(image_back);
                    anim.setDuration(100);
                    anim.start();


                    return false;

                }
            })
            .into(image);


    return view;
}


public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int color, int cornerDips, int borderDips, Context context) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
            Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int borderSizePx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (float) borderDips,
            context.getResources().getDisplayMetrics());
    final int cornerSizePx = 0;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);

    // prepare canvas for transfer

    paint.setAntiAlias(true);
    paint.setColor(0xFFFFFFFF);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawARGB(0, 0, 0, 0);
    canvas.drawRoundRect(rectF, cornerSizePx, cornerSizePx, paint);

    // draw bitmap
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);


    // draw border
    paint.setColor(color);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth((float) borderSizePx);
    canvas.drawRoundRect(rectF, cornerSizePx, cornerSizePx, paint);

    return output;
}
}

And below is my fliping.xml used for the animation:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotationX"
    android:valueFrom="20"
    android:valueTo="50"
    android:valueType="floatType"
/>
like image 589
Smit Davda Avatar asked Jul 23 '16 12:07

Smit Davda


1 Answers

well i have found a solution for this....remove object animator and instead use this code

camera.save();

            camera.rotateX(790);
            camera.rotateY(2.5f);
            camera.rotateZ(140);

            camera.translate(170,0, -8);

            camera.getMatrix(matrix);
            camera.restore();

create your custom image class and use this in applyTransformation()

like image 82
H Raval Avatar answered Nov 20 '22 14:11

H Raval