Creating animations

Users tend to be attracted by animation in applications. Animations can be the right push towards the summit of user experience. Of course, the best animations are the ones that users don't notice because they feel natural.

View animations are tied to a specific view and can perform simple transformations on the contents of the view. Because of its simplicity, this API is still useful for things such as alpha animations, rotations, and so forth.

Getting ready

Create a new solution named Animations in Xamarin Studio.

How to do it...

  1. Create an .xml file named anim.xml under the Resources folder and add the following content to it:
    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:shareInterpolator="false">

  <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="1.0"
    android:toXScale="1.4"
    android:fromYScale="1.0"
    android:toYScale="0.6"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillEnabled="true"
    android:fillAfter="false"
    android:duration="700" />

  <set android:interpolator="@android:anim/accelerate_interpolator">
    <scale android:fromXScale="1.4"
    android:toXScale="0.0"
    android:fromYScale="0.6"
    android:toYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillEnabled="true"
    android:fillBefore="false"
    android:fillAfter="true"
    android:startOffset="700"
  android:duration="400"/>

  <rotate android:fromDegrees="0"
    android:toDegrees="-45"
    android:toYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillEnabled="true"
    android:fillBefore="false"
    android:fillAfter="true"
    android:startOffset="700"
    android:duration="400" />
  </set>
</set>
  2. Modify the OnCreate() method of the MainActivity.cs method, adding the following:
    Animation myAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.MyAnimation);
ImageView myImage = FindViewById<ImageView>(Resource.Id.imageView1);
myImage.StartAnimation(myAnimation);
  3. Run your application.

How it works...

Animations are bound to the view they are in, meaning that an animation cannot spread over several activities. They are defined in terms of start and end points, size rotation, and transparency. To create them, we can use an XML file as shown in the recipe, which is the recommended way because it eases the readability, maintenance, and evolution of animations or programming.

As shown in the recipe, we store the animations' XML files under the Resources/anim directory of our project. This file must have one of the following elements as the root element:

  • alpha: This is a fade-in or fade-out animation
  • rotate: This is a rotation animation
  • scale: This is a resizing animation
  • translate: This is a horizontal and/or vertical motion
  • set: This is a container that may hold one or more of the other animation elements

While not mandatory, the android:startOffset attribute will be used with most of your animations. Indeed, it's the attribute responsible for distributing the events composing your animations over time. Without this argument, expressed in milliseconds, all the events will be applied at the same time.

Besides these standard attributes for animation, the Android framework also offers the possibility to control the rate at which effects are played within your animations using interpolator. While creating your own interpolator object is beyond the scope of this book, the Android framework does embed some classical interpolator that you can use such as Acceleration, Deceleration, Bounce, and Linear movement:

  • AcclerateInterpolator/DecelerateInterpolator: These interpolators increase or decrease the rate of change in an animation
  • BounceInterpolator: These change bounces at the end
  • LinearInterpolator: The rate of change is constant

In order to use such an interpolator you have to place an android:interpolator attribute in your .xml file as android:interpolator="@android:anim/accelerate_interpolator for an accelerate_interpolator for example.

To run our application, we have to map it in the view using the following code:

Animation myAnimation = AnimationUtils.LoadAnimation (Resource.Animation.Anim);
ImageView myImage = FindViewById<ImageView>(Resource.Id.myImage);
myImage.StartAnimation(myAnimation);

In this code, we first create a new animation out of the Anim.xml file using the AnimationUtils.LoadAnimation public static method. Then, we load an image of your choice that has to be placed in the Resource folder and, finally, run the animation on that image. Our animation will begin with the scale animation that stretches our image horizontally while shrinking it vertically. Then, the image is rotated by 45 degrees. Note that the rotation will be counter-clockwise as we specified -45 in the .xml file.

There's more...

In addition to the classical animation shown in this recipe, we can also animate properties of objects and create drawable animations and, thus, enhance once again our user interface.

Property animations

Property animations first appeared in Android 3.0 and became mainstream in the last two major versions of Android 4.0 and 5.0. Property animations, as the name suggests, animates any property of any object by means of a comprehensible API.

Animated properties are created by using the Animator subclasses such as:

  • ValueAnimator: This is the main subclass of Animator as it computes the values of properties that need to be updated.
  • ObjectAnimator: A specialization of ValueAnimator to ease the animation of objects by accepting a target object and defining the properties to update.
  • AnimationSet: Similar to classical animation that we saw earlier in the recipe, property animations start altogether by default. If you want to span them over time you have to use an AnimationSet element. The AnimationSet element will define the time between animations.
  • Evaluators: These are special classes that are used by animators to calculate the new values during an animation. You can use the following specialized evaluators:
    • IntEvaluator: This calculates values for integer properties
    • FloatEvaluator: This calculates values for float properties
    • ArgbEvaluator: This calculates values for color properties

If you are not animating a float, int or color, you may create your own evaluator by implementing the ITypeEvaluator interface.

Drawable animations

The latest animation type that remains to be covered is named Drawable animations. Drawable animations will simply use a set of Drawable resources as data, and animate them one after the other. Similar to classical animations, drawable animations are defined in XML files in the /Resource/drawable folder. However, Drawable animations' XML files must contain the <animation-list> as a root element. Here's an example of such a Drawable animation:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/image1" android:duration="100" />
<item android:drawable="@drawable/image2" android:duration="100" />
<item android:drawable="@drawable/image3" android:duration="100" />
<item android:drawable="@drawable/image4" android:duration="100" />
<item android:drawable="@drawable/image6" android:duration="100" />
<item android:drawable="@drawable/image7" android:duration="100" />
</animation-list>

This simple Drawable animation contains six different items and each item will appear one after the other at a 100 ms rate as defined in the android:duration attribute. This kind of animation is often used to display a sprite-based animation to our users.

Then, you can simply start the animation on a button click, for example:

AnimationDrawable _imageDrawable;

protected override void OnCreate(Bundle bundle) {
  base.OnCreate(bundle);
  SetContentView(Resource.Layout.Main);

  _imageDrawable= (Android.Graphics.Drawables.AnimationDrawable)
  Resources.GetDrawable(Resource.Drawable.image1);

  ImageView MyImageView = FindViewById<ImageView> (Resource.Id.MyImageView );
  MyImageView .SetImageDrawable((Android.Graphics.Drawables.Drawable) _imageDrawable );

  Button myButton = FindViewById<Button> (Resource.Id.myButton);
  myButton .Click += (sender, e) => {
    _imageDrawable.Start();
  };
}

See also

See also, the next recipe to supercharge your application with custom gestures, and the following online resources to learn more about animations:

http://developer.xamarin.com/recipes/android/other_ux/animation/

http://developer.android.com/reference/android/animation/package-summary.html

http://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.201.71