Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
Images
RotationAnimation
README.md
RotationAnimation.sln

README.md

id title brief sdk
EFCBA08A-6069-9EB4-2D88-65D3B7FF92DF
Rotate Animation
This tutorial will show how to rotate an animation.

Recipe

  • Create a new Xamarin.Android project named RotationAnimation.
  • Create the directory Resource/Anim in the project.
  • Create a new resource file Resource/Anim/rotate_centre.xml and modify it to contain the following:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
  <rotate
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="2000"
      android:startOffset="0"/>
</set>

This declares an animation that will rotate from 0 to 360 degrees. The android:pivotX and android:pivotY specify the point on the image to rotate about.

  • Create a new resource file Resources/Anim/rotate_corner.axml and modify it to contain the following:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
  <rotate
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="0%"
      android:pivotY="0%"
      android:duration="2000"
      android:startOffset="0"/>
</set>
  • Open up Layout/Main.axml, and modify it to the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

  <Button
      android:id="@+id/rotate_center_button"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Rotate around center"/>
  <Button
      android:id="@+id/rotate_corner_button"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Rotate around corner"/>
  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:gravity="center">
    <ImageView
        android:id="@+id/floating_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon" />
  </LinearLayout>

</LinearLayout>
  • Open MainActivity.cs, and insert the following code for the OnCreate() method:

protected override void OnCreate(Bundle bundle)

{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);

    var image = FindViewById<ImageView>(Resource.Id.floating_image);

    // Set things up so that when this button is clicked the image roates about a corner.
    var rotateAboutCornerButton = FindViewById<Button>(Resource.Id.rotate_corner_button);
    var rotateAboutCornerAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.rotate_corner);
    rotateAboutCornerButton.Click += (sender, args) => image.StartAnimation(rotateAboutCornerAnimation);

    // Setup things so that when this button is clicked the image rotates about it's center.
    var rotateAboutCenterButton = FindViewById<Button>(Resource.Id.rotate_center_button);
    var rotateAboutCenterAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.rotate_center);
    rotateAboutCenterButton.Click += (sender, args) => image.StartAnimation(rotateAboutCenterAnimation);
}
  • Run the application. You should initially see the following screen:

  • Click on the “Rotate around center”. The image should rotate about the center:

  • Click on the “Rotate around corner”. The image should rotate about the upper left hand corner:

Additional Information

This recipe demonstrates how to use the view animation system to perform tween animation on Views. Tween animations perform transformation on a View object, such as an ImageView or a TextView.