Question

Im rotating a LinearLayout, using an ObjectAnimator. Clicking the button causes the LinearLayout to rotate 360(degrees) with the bottom part as the Pivot.

After the Layout completes the rotation, it leaves back a 'trail'/black mark and the complete view looks odd. How do I avoid this from happening? After the Layout completes the 360 animation, I want the view to look as it did in the beginning (clean basically). Is there a view.refresh or update command im suppose to call somewhere?

1)How do I have a clean looking view at the end?

2)When the image is is in the intermediatestate, why does the back-part appear black? How do I get that to look while(ie,color of the relative layout)?

InitialState>IntermediateState>FinalState: enter image description here

MainActivity

Button bt1;

float pivotX=0f;
float pivotY=0f;

int a=0;

float width,height;

ViewGroup mContainer=null;

Thread t;

private Handler mHandler = new Handler();

@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    bt1 = (Button) findViewById(R.id.button1);
    mContainer = (ViewGroup) findViewById(R.id.container);

    bt1.setOnClickListener(this);

            t=new Thread()
    {
        @Override
        public void run()
        {
            try {
                while(true)
                {
                    relativeLayout.postInvalidate();
                }
            } catch (Exception e) {
                // TODO: handle exception
            }
        }
    };
}

@Override
public void onWindowFocusChanged(boolean hasFocus) 
{
  super.onWindowFocusChanged(hasFocus);

  //Here you can get the size!

    width = mContainer.getWidth();
    height = mContainer.getHeight();

    pivotX = mContainer.getPivotX()+width; 
    pivotY = mContainer.getPivotY()+height; 

    mContainer.setPivotX(pivotX);
    mContainer.setPivotY(pivotY);
}

private void rotate()
{
    a -=360;

    ObjectAnimator rotate = ObjectAnimator.ofFloat(mContainer, View.ROTATION_X,a);
    rotate.setDuration(2000);

    AnimatorSet aSet = new AnimatorSet();
    aSet.play(rotate);
    aSet.start();

    mHandler.post(new Runnable() 
    {
        @Override
        public void run() 
        {
            b+=1;
            relativeLayout.invalidate();
            relativeLayout.postInvalidate();
            bt1.setText(Integer.toString(b));
        }
    });

    rotate.addListener(new AnimatorListener() 
    {

        @Override
        public void onAnimationStart(Animator animation) {
            // TODO Auto-generated method stub
            //relativeLayout.invalidate();
            t.start();
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            // TODO Auto-generated method stub
            //mContainer.invalidate();
            //relativeLayout.invalidate();
            try {
                t.join();
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            // TODO Auto-generated method stub

        }
    });
}

@Override
public void onClick(View v) 
{
    switch(v.getId())
    {
    case R.id.button1:
        rotate();
        break;

    }
}

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<LinearLayout
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="200dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#140A1F"
    android:orientation="horizontal" >
</LinearLayout>

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/container"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="80dp"
    android:text="Rotate" />

</RelativeLayout>

Edit: Added a thread. **Edit2:**** Added a handler and commented out the thread

Was it helpful?

Solution

Adding this to the code fixes the view once the animation is competed, but the intermediate stage still looks the same. Will update this once I figure that out.

        rotate.addListener(new AnimatorListener() 
    {

        @Override
        public void onAnimationStart(Animator animation) {
            // TODO Auto-generated method stub
            relativeLayout.invalidate();
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            // TODO Auto-generated method stub
            //mContainer.invalidate();
            relativeLayout.invalidate();
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            // TODO Auto-generated method stub

        }
    });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top