Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full example of how to programmatically do RotateAnimations?

I want to have an animation with various steps that do moves (translations) and rotations like "straight on, turn left, straight on, ...." of a car.

I am able to do this in an AnimationSet, but fail at rotating around the center of my car image with the "RELATIVE_TO_SELF" setting. I know about

Animation a = new RotateAnimation(0,90,Animation.RELATIVE_TO_SELF,0.5f,... )

for this purpose. Still the rotation occurs around the upper left corner of the screen (or canvas?).

Currently I am solving this by manually keeping track of the position after each animation step, but this is suboptimal.

I suspect that my initial layout setup is bogus:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"
>
    <FrameLayout
            android:layout_height="wrap_content"
            android:layout_width="fill_parent">

        <!-- view that draws some background -->
        <de.bsd.turtlecar.SampleView android:id="@+id/graph_view"
              android:layout_height="350px"
              android:layout_width="fill_parent"
              android:visibility="invisible"
              />

        <!-- the car -->
        <ImageView android:id="@+id/car_view"
                   android:src="@drawable/turtle_car"
                   android:layout_height="wrap_content"
                   android:layout_width="wrap_content"
                   android:visibility="invisible"/>


    </FrameLayout>

   <Button ... onClick="run" ... />
</LinearLayout>

This shows the car in the upper left corner (should show up in a different place -- basically where the animation later starts. And it should be move later).

In my code that is triggered through the run button I do:

    ImageView carView = (ImageView) findViewById(R.id.car_view);
    print(carView);
    AnimationSet animationSet = new AnimationSet(true);

    TranslateAnimation a = new TranslateAnimation(
            Animation.ABSOLUTE,200, Animation.ABSOLUTE,200,
            Animation.ABSOLUTE,200, Animation.ABSOLUTE,200);
    a.setDuration(1000);
    animationSet.addAnimation(a);

    RotateAnimation r = new RotateAnimation(0f, -90f,200,200); // HERE 
    r.setStartOffset(1000);
    r.setDuration(1000);
    animationSet.addAnimation(r);
    ...

So at the point with here, the rotation works, but I have to keep track. if I rotate RELATIVE_TO_SELF, the rotation happens around (0,0) of the screen.

Additional question: what can I do in order to keep the car on screen after the animation has finished?

Or am I completely on the wrong track?

like image 473
Heiko Rupp Avatar asked Feb 12 '11 08:02

Heiko Rupp


1 Answers

Try adding setFillAfter(true) to your Animations. That will certainly keep the car in its final place and it may solve your rotation point problems too

 TranslateAnimation a = new TranslateAnimation(
        Animation.ABSOLUTE,200, Animation.ABSOLUTE,200,
        Animation.ABSOLUTE,200, Animation.ABSOLUTE,200);
a.setDuration(1000);
a.setFillAfter(true); //HERE
animationSet.addAnimation(a);

RotateAnimation r = new RotateAnimation(0f, -90f,200,200); // HERE 
r.setStartOffset(1000);
r.setDuration(1000);
r.setFillAfter(true); //HERE
animationSet.addAnimation(r);
...
like image 89
andy boot Avatar answered Sep 21 '22 16:09

andy boot