Scale & translate animation in 2 steps

Question

I need to make rather simple animation: ImageView should appear from left top corner to the center and then disappear in the top right corner. Here's my XML code. The problem is that ImageView goes back to top Left corner when I add second scale (minimizing). If I remove it then ImageView correctly moves to right side. What's wrong here?

<set>
    <scale
        android:fromXScale="0.0" 
        android:toXScale="1.0" 
        android:fromYScale="0.0" 
        android:toYScale="1.0" 
        android:pivotX="0"
        android:pivotY="0"
        android:duration="2000" />
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"          
        android:toXDelta="30%p"
        android:toYDelta="30%p" />
</set>          

<set>
    <translate
        android:startOffset="2000"
        android:duration="2000"
        android:fromXDelta="0%p"
        android:fromYDelta="0%p"            
        android:toXDelta="70%p"
        android:toYDelta="-25%p" />
    <scale 
        android:startOffset="2000"
        android:duration="2000"
        android:pivotX="0"
        android:pivotY="0"
        android:fromXScale="1.0" 
        android:toXScale="0.0" 
        android:fromYScale="1.0" 
        android:toYScale="0.0"  />
</set>

score 0 · Answer 1 · answered Aug 05 '15 at 04:07

It looks like the sequence of animations in a set can affect their behavior.

I didn't modify any of your code, but only moved the 2nd translate behind the 2nd scale, and the animation worked as expected.

<set>
    <scale
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="0"
        android:pivotY="0"
        android:duration="2000" />
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="30%p"
        android:toYDelta="30%p" />
</set>

<set>
    <scale
        android:startOffset="2000"
        android:duration="2000"
        android:pivotX="0"
        android:pivotY="0"
        android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"  />
    <translate
        android:startOffset="2000"
        android:duration="2000"
        android:fromXDelta="0%p"
        android:fromYDelta="0%p"
        android:toXDelta="70%p"
        android:toYDelta="-25%p" />
</set>

Scale & translate animation in 2 steps

1 Answers1