In this tutorial, we will learn what is Animation and why we use animation, what types of animations are? with detail or step-by-step explanation.
Contents
What is Animation?
The technique of creating the illusion of a moving object by displaying a series of discrete images that change over time, such as:
- Each page of a flipbook contains a different image. Your eyes perceive motion when you flip through the pages quickly enough.
- A claymation is a form of stop-motion animation.
- Animations in user interfaces, such as flinging a list item off the screen.
As well as millions of mobile games with character, environment, and user interface animations.
Each image in an animated sequence is referred to as a frame. The frame rate is the rate at which those images appear on the screen. Ideally, your frame rate should be close to the refresh rate of the screen.
- Animations may stutter if the frame rate is slower than the refresh rate.
- The app is wasting resources if the frame rate is faster than the refresh rate.
- Animations are smooth and no resources are wasted if the frame rate is the same as the screen refresh rate.
Fortunately, the Android system manages the frame rate for you, and you don’t need to manage the frame rate of your animations in most cases.
Why is animations important?
Animation is significant because it allows us to tell stories and communicate emotions and ideas in a unique, easy-to-perceived manner that both young children and adults can understand. In ways that writing and live-action films cannot, animation has helped to connect people all over the world.
Types of animations in Android
The following animation systems are available in the Android framework:
View Animation
View animation is a system for animating views, as the name suggests. It is an older system that only supports View objects. It is relatively simple to set up and provides sufficient capabilities to meet the needs of a wide range of applications.
- The View animations system only permits for the animation of View objects. For example, you can scale or rotate a View object.
- The view animations system only changes the location of the view, not the View object itself. For example, if you animate a button to move across the screen, the button will draw correctly, but the location where you can click the button will not change, and you will need to implement your own logic to handle this.
- The view animations system, on the other hand, requires less time to set up and less code to write than property animations.
- If view animations does everything you need it to, you may not need to use the property animation system.
Property Animation
The property animation system, which was introduced in Android 3.0 (API level 11), allows you to animate properties of any object, including those that are not rendered to the screen. The system is extensible and allows you to animate custom-type properties as well. Property animation is preferred over View animation
- The property animations system is a powerful framework that lets you animate almost anything. A property animations changes the value of a property over a set period of time. For example, you can animate a circle to grow larger over time by increasing its radius. You can define an animation to change any object property (a field in an object) over time, whether or not the change draws to the screen.
- At a high level, the property animations system assigns animators to the properties that you want to animate, such as colour, position, or size. You can also control aspects of the animation like interpolation. For instance, you could make an animator for the radius of a circle you want to grow .
The property animation system allows you to define the following animations characteristics:
- Duration: You can control how long an animation lasts. The length is set to 300 milliseconds by default.
- Time interpolation: You can specify how the values for the property are calculated as a function of the current elapsed time of the animation. You can, for example, move an object across the screen linearly, by the same amount at each time interval. Alternatively, you can change the amount for each interval. You can use the interpolators provided by the system or create your own. Details are provided below.
- Repeat count and behaviour: You can specify whether or not an animation should repeat when it reaches the end of its duration, as well as how many times it should repeat. You can also specify whether the animations should be played backwards. When you set it to reverse, it will play the animations forwards then backwards until the number of repeats is reached.
- Animator sets: You can organise animations into logical sets that play together, sequentially, or after a set amount of time. You could, for example, coordinate several bouncing balls.
- Frame-refresh delay: You can specify how frequently your animation’s frames are refreshed. The default is to refresh every 10 milliseconds, but the speed with which your application can refresh frames ultimately depends on how busy the system is overall and how quickly the system can service the underlying timer.
Interpolators
Material Design promotes vibrant animations that capture the user’s attention while behaving more naturally. Most motion in nature is not linear and changes over time. A rolling ball, for example, will be slowed by friction, whereas a vehicle will gain speed as it moves forward.
A time interpolator specifies how values in an animation change over time. For example, you can specify that animations occur linearly across the entire animation, which means that the animation moves evenly the entire time. You can also instruct animations to use nonlinear time, such as accelerating at the start and decelerating at the end.
The Android API includes predefined interpolators that are ready to use:
LinearInterpolator: An interpolator with a constant rate of change. Over time, the value changes at a constant rate. For example, you can move a box across the screen in three seconds, with each frame moving the box by the same amount of distance.
AccelerateInterpolator: An interpolator with a slow initial rate of change that then accelerates. Over time, the value changes at an increasing or decreasing rate. For example, you could move a box across the screen in three seconds, and each frame would move the box by an increasing or decreasing amount of distance, giving the impression that it was accelerating or decelerating.
Accelerate DecelerateInterpolator: An interpolator whose rate of change is slow at the beginning and end but accelerates in the middle. For example, you could start a box moving at one end of the screen, let it accelerate, and then come to a slow stop at the other end.
AnticipateInterpolator: An interpolator that begins with a backward change and then flings forward. Consider snapping a rubber band to illustrate this.
OvershootInterpolator: An interpolator whose change flings forward, overshoots the previous value, and then returns.
Anticipate
OvershootInterpolator: An interpolator whose change begins in reverse, flings forward, overshoots the target value, and then returns to the final value.
AnticipateOvershootInterpolator: An interpolator whose change begins backward, flings forward, overshoots the target value, and then returns to the final value.
BounceInterpolator: An interpolator whose final change bounces.
CycleInterpolator: A type of interpolator whose animation repeats for a set number of cycles.
DecelerateInterpolator: An interpolator whose rate of change begins quickly and then slows.
PathInterpolator: An interpolator that follows a specified Path.
TimeInterpolator: An interface for creating your own interpolator.
Drawable animation
Drawable animation entails displaying Drawable resources sequentially, similar to a roll of film. This animation method is useful if you want to animate things that are easier to represent with Drawable resources, such as a bitmap progression.
Drawable animation allows you to create an animation by loading a series of Drawable resources one after the other. This is a traditional animation in the sense that it is made up of a series of different images that are played in order, similar to a roll of film.
An XML file is the simplest way to generate drawable animations. Save the file in the res/drawable directory.
The root node of the XML file is an <animation-list> element, and the child nodes are a series of <item> nodes that each define a frame: a drawable resource for the frame and the frame duration. An example XML file for a Drawable animation is provided below:
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/ic_baseline_adb_24" android:duration="200" /> <item android:drawable="@drawable/ic_baseline_accessibility_new_24" android:duration="200" /> <item android:drawable="@drawable/ic_baseline_adb_24" android:duration="200" /> </animation-list>
This animation is made up of three frames. When the android:oneshot attribute of the list is set to true, it will cycle once before stopping and holding on to the last frame. The animation will loop if android:oneshot is set to false. This XML, saved as rocket thrust.xml in the project’s res/drawable/ directory, can be added as the background image to a View and then called to play. Here’s an example activity in which the animation is added to an ImageView object and is triggered when the screen is touched.
Physics-based animation
Physics-based animation employs physics laws to achieve a high level of realism in animation. Physics-based animation creates animations by utilizing the fundamentals of physics. An animation, for example, is driven by force, and the animation comes to a halt when the force reaches equilibrium.
Physics-based animation employs physics laws to achieve a high level of realism in animation. When a change occurs in our daily lives, it is accompanied by a physical transition that we are able to recognize.
Physics-based animations are propelled by force rather than by fixed durations and changes in animation values. When the force reaches equilibrium, the animation comes to a halt. This results in more natural-looking animations as well as the ability to change an animation while it is still running without causing visual disruption.
In summary, physics-based animations have the following advantages:
- Natural-looking: Physics-based animations are adaptable and can mimic real-world movements. Using physics to create motion that is simple to understand and works holistically.
- Course correction: When the target changes, animations maintain momentum and end with a smoother motion.
- Visual janks have been reduced: Animations appear more responsive and smooth, and there are fewer visual disruptions overall.
- We hope that this guide will assist you in understanding all about the concepts of Animation in android. We have concentrated on making a basic, meaningful and easy-to -learn guide to the concepts of Animations. Still if you have any problems regarding this, please post them in the comments section, we will be glad to assist you.
Pingback: Webview in Android with Example - Developers Dome