How does pivotX/Y work in a rotate animation set

Question

I am trying to understand how rotate animation works.
With the following I rotate a view as follows:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="8000"
>

    <rotate android:fromDegrees="0"
            android:toDegrees="30"
            android:pivotX="100%"
            android:pivotY="100%"
            />

    <rotate
            android:toDegrees="100"
            android:pivotX="100%"
            android:pivotY="30%"
    />
</set>

Result:

Now where the arrow is I am trying to rotate again using that as a center.
So I modified my animation set as follows:

<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="8000">
     <rotate android:fromDegrees="0"
                android:toDegrees="30"
                android:pivotX="100%"
                android:pivotY="100%"
                />  

        <rotate
                android:toDegrees="100"
                android:pivotX="100%"
                android:pivotY="30%"
        />  

     <rotate android:pivotY="-30%"
           android:pivotX="40%"
           android:toDegrees="100"/>    
</set>

I.e. I added

<rotate android:pivotY="-30%"
               android:pivotX="40%"
               android:toDegrees="100"/>

This seems correct to me because looking at the screen the rotate point is around 30% less than the left most value of y and x is about 40% more than the left most value of x.
But when the animation runs it is not working as expected. To be honest I have no clue what is the actual rotation point and the whole view skews to the left.
Result:

What am I misunderstanding here?

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

Pivot is the point around which it rotates (like putting a pin in a photo). If your 'from' and 'to' pivots aren't the same then you are not just rotating around a set point, you're rotating a bit, then changing the pins location and rotating a bit more for each step (causing a skew).

Just in case you don't know: Android coordinates start at top left not bottom left.

I think all you want in that set is

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="8000">
     <rotate android:fromDegrees="0"
            android:toDegrees="130"
            android:pivotX="100%"
            android:pivotY="30%" />  
     <!-- I believe this, below will the the correct slide you need -->
     <translate android:fromXDelta="0" 
                android:toXDelta="-100%" />
</set>

Which will rotate it 130 degrees around the pin at [100%, 30%] (x being the maximum value , i.e right edge of the screen, and y being 30% of the way down the screen) and at the same time slide it right until it's 100% (of view width) to the right of it's starting position

edited May 23 '17 at 12:09

Community

1
1

answered Mar 01 '17 at 21:30

Nick Cardoso

20,807
14
73
124

What I am trying to do is rotate the view out of display with a series of successive rotations. What I understood from https://developer.android.com/guide/topics/resources/animation-resource.html#View is that pivotX and pivotY can have different values because otherwise how else can I set an (X,Y) coordinate other than the center and without knowing exact pixes locations? What I thought is that to get the green arrow in the pic I had to "move" pivotX and pivotY at the same time there. By the way your snippet doesn't do what I need either. It actually skews to the left as well – Jim Mar 01 '17 at 21:51
By skews I mean that it drifts off. I was under the impression that X,Y are left most corner of the view. What I am trying to do is rotate and slide to the right of the screen you are right. I am trying to imitate a "throw a card" effect somewhat – Jim Mar 01 '17 at 22:15
The last snippet you added when added to mine (removing the last part of my code) moves in the direction of what I want. How does it work? But still just moves it to the right. In general in the green arrow I have in the screenshot, how can I make that the center of a rotation? – Jim Mar 02 '17 at 08:49
+1 But still my main question (regardless of the animation as a whole) is how can I pinpoint the location that is pointed by the green arrow of the first screenshot as the center of a rotation. So far I am not clear. I was sure that to do that I had to set pivotX and pivotY accordingly but from your answer it seems that these values apply serially and not at the same time. So I am still confused about how thse attributes work. – Jim Mar 02 '17 at 21:12
My current code shows how to pinpoint that location. Usually you'd leave that point in the same place for the whole animation BUT because you are sliding to the right, you may wish to decrease the pivotX at the same rate (to keep it in a static location) – Nick Cardoso Mar 02 '17 at 21:41
You are talking about this part right? `android:pivotX="100%"` ah that was my misunderstanding. I had in mind that the 100% would extend beyond the visible part i.e. to the part of the view that is outside of the window since only part of it is visible. Is that the case? – Jim Mar 02 '17 at 22:39
Yes 100% will remain 100% of view NOT 100% of visible view – Nick Cardoso Mar 02 '17 at 23:14

How does pivotX/Y work in a rotate animation set

1 Answers1

Linked