Monday, December 16, 2013

Android: Combine Animations

After I explained basics about animations in Android in the previous post I want to show today how multiple animations can be combined using an AnimatorSet, playing them simultaneously or sequentially.
The foundation is nearly identical to the one of the previous post, just this time we have 2 TextViews which are to be animated when the button is clicked:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

using Android.Animation;

namespace AnimationsExample
{
     [Activity (Label = "AnimationsExample", MainLauncher = true)]
     public class MainActivity : Activity
     {
          protected override void OnCreate (Bundle bundle)
          {
               base.OnCreate (bundle);

               LinearLayout Layout = new LinearLayout (this);
               Layout.Orientation = Orientation.Vertical;

               TextView TxtView1 = new TextView (this);
               TxtView1.Text = "I'm flying";
               Layout.AddView (TxtView1);

               TextView TxtView2 = new TextView (this);
               TxtView2.Text = "I'm flying 2";
               Layout.AddView (TxtView2);

               Button Btn1 = new Button (this);
               Btn1.Text = "Animation";
               Layout.AddView (Btn1);

               Btn1.Click += (object sender, EventArgs e) => {
                    // Animation
               };

               SetContentView (Layout);
          }
     }
}

Now we first create, as described in the previous post, 2 animations of the type ObjectAnimator, which move one TextView to the right:

ObjectAnimator Animator1 = ObjectAnimator.OfInt(TxtView1, "Left", 0, 100);
Animator1.SetDuration(1000);
ObjectAnimator Animator2 = ObjectAnimator.OfInt(TxtView2, "Left", 0, 100);
Animator2.SetDuration(1000);

To justify the title now an object of the type AnimatorSet comes into play. From this we first call the method Play(), which expects an animation as parameter. Special about AnimationSets is now, that further animations can be called. We either append them by calling the function With() or Before(), the animations are then played together with or before the first animation. As for single animations here also Start() has to be called eventually. The following code first moves the upper TextView to the right, then the lower:

ObjectAnimator Animator1 = ObjectAnimator.OfInt(TxtView1, "Left", 0, 100);
Animator1.SetDuration(1000);
ObjectAnimator Animator2 = ObjectAnimator.OfInt(TxtView2, "Left", 0, 100);
Animator2.SetDuration(1000);
AnimatorSet Combined = new AnimatorSet();
Combined.Play(Animator1).Before(Animator2);
Combined.Start();

Note here, that only 2 time levels are available, the call Play(A1).Before(A2).Before(A3) would thus play both the animations A2 and A3 together with animation A1. If the nesting is to be deeper, multiple AnimatorSets have to be used or the function PlaySequentially() called. This expects a list of elements of the type Animator (so single animations as well as complete AnimatorSets can be added) and then plays them after each other.
If one wants to order multiple animations, furthermore the function PlayTogether() is useful, which also expects a list of animations, which is then played at the same time.

No comments:

Post a Comment