Android Animations and Transistions:Fling Animation

Image from wDesigns

Cool bananas!!! I am so excited to have you here…In my article today, I will be sharing one of the core component of Android, ANIMATION!!!

As a mobile developer, I have learnt over time that animations can add visual cues that notify users about what’s going on in your app which is quite amazing. They are especially useful when the UI changes state, such as when new content loads or new actions become available. Animations also add a polished look to your app, which gives it a higher quality look and feel.

Android includes variety of animation APIs depending on what type of animation you want implement, so this article provides an overview of ways you can add motion to your UI using FLING ANIMATION.

Image from android developer documentation

Fling-based animation uses a friction force that is proportional to an object’s velocity. As a science student, I was taught this topic in physics, however I struggled to understand its applications in real world. I was so excited I found a way to put to practice what I learnt about friction force when I encountered android animations. With friction force you can animate a property of an object and also end the animation gradually. It has an initial momentum, which is mostly received from the gesture velocity, and gradually slows down. The animation comes to an end when the velocity of the animation is low enough that it makes no visible change on the device screen.

How can I use animations in my project? Great question!!!!

Add the support library

dependencies {
      implementation 'com.android.support:support-dynamic-animation:27.1.1'
  }

Instantiate a fling animation

The FlingAnimation class lets you create a fling animation for an object. To build a fling animation, create an instance of the FlingAnimation class and provide an object and the object's property that you want to animate.

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);

Set velocity

The starting velocity defines the speed at which an animation property changes at the beginning of the animation. The default starting velocity is set to zero pixels per second. Therefore, you must define a start velocity to ensure the animation does not end right away.

You can use a fixed value as the starting velocity, or you can base it off of the velocity of a touch gesture. If you choose to provide a fixed value, you should define the value in dp per second, then convert it to pixels per second. Defining the value in dp per second allows the velocity to be independent of a device’s density and form factors.

To set the velocity, call the setStartVelocity() method and pass the velocity in pixels per second. The method returns the fling object on which the velocity is set.

Note: Use the GestureDetector.OnGestureListener and the VelocityTracker classes to retrieve and compute the velocity of touch gestures, respectively.

Set an animation value range

You can set the minimum and the maximum animation values when you want to restrain the property value to a certain range. This range control is particularly useful when you animate properties that have an intrinsic range, such as alpha (from 0 to 1).

To set the minimum and maximum values, call the setMinValue() and setMaxValue() methods, respectively. Both methods return the animation object for which you have set the value.

Set friction

The setFriction() method lets you change the animation's friction. It defines how quickly the velocity decreases in an animation.

The method returns the object whose animation uses the friction value you provide.

Code Snippet for FlingAnimation

You can use this snippet in your project to start a FlingAnimation

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
fling.setStartVelocity(-velocityX)
        .setMinValue(0)
        .setMaxValue(maxScroll)
        .setFriction(1.1f)
        .start();

The code above illustrates a horizontal fling. The velocity captured from the velocity tracker is velocityX and, the scroll bounds are set to 0 and maxScroll. The friction is set to 1.1.

FlingAnimation is powerful, and provides your app with a beautiful look and user-experience.

You are a world class developer or aspiring?
You need this API!!!

I will be sharing some animation stunts with you in my next article…

Are you ready??