Objects on screen will often need to be repositioned. This can occur due to user interaction or some processing done behind the scenes. Instead of immediately updating the objects position, which would cause it to blink from one area to another, you should use an animation to move it from the starting position to its end position.
Android provides ways that allow you to reposition your view objects on screen, such as the ObjectAnimator. You can provide the end position you want the object to settle on, as well as the duration of the animation. You can combine this with time interpolators to control the acceleration or deceleration of the animation.
Change the view position with ObjectAnimator
The ObjectAnimator
API provides an easy way to change
the properties of a view with a specified duration. It contains static methods
to create instances of ObjectAnimator
depending on
what type of attribute you are animating. When repositioning your views on
screen you will use the translationX
and translationY
attributes.
Here is an example of an ObjectAnimator
that moves the view to 100 pixels from the left of the screen in 2 seconds:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply { duration = 2000 start() }
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setDuration(2000); animation.start();
This example uses the ObjectAnimator.ofFloat()
method since the translation values have to be floats. The first parameter is the view you want to
animate. The second parameter is the property you are animating. Since the view needs to be moved
horizontally, the translationX
property is used. The last parameter is the end value of
the animation. Since this value is 100, it will be that many pixels from the left of the screen.
The next method specifies how long the animation should take in milliseconds. In this example the animation will run for 2 seconds (2000 milliseconds).
The last method causes the animation to run which will update the view's position on screen.
For more information on using ObjectAnimator
, see
Animating with ObjectAnimator.
Add curved motion
While using the ObjectAnimator
is convenient, by default it will
reposition the view using a straight line between the starting and ending points. Material design
relies on curves for not only the timing of an animation, but also the spatial movement of objects
on the screen. Using curved motion can help give your app a more
material feel while making your animations more interesting.
Use PathInterpolator
The PathInterpolator
class is a new interpolator introduced in
Android 5.0 (API 21). It is based on a
Bézier curve or a Path
object. This interpolator specifies a motion curve
in a 1x1 square, with anchor points at (0,0) and (1,1) and control points as specified using the
constructor arguments. One way to create a PathInterpolator
is by
creating a Path
object and supplying it to the
PathInterpolator
:
Kotlin
// arcTo() and PathInterpolator only available on API 21+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { val path = Path().apply { arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true) } val pathInterpolator = PathInterpolator(path) }
Java
// arcTo() and PathInterpolator only available on API 21+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Path path = new Path(); path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true); PathInterpolator pathInterpolator = new PathInterpolator(path); }
You can also define a path interpolator as an XML resource:
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
Once you have created a PathInterpolator
object, you can pass it to
the Animator.setInterpolator()
method. The
Animator will then use the interpolator to determine the timing or path curve when it is started.
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply { interpolator = pathInterpolator start() }
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setInterpolator(pathInterpolator); animation.start();
Define your own path
The ObjectAnimator
class has new constructors that enable you to animate
coordinates along a path using two or more properties at once along with a path. For example, the
following animator uses a Path
object to animate the X and Y properties of
a view:
Kotlin
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { val path = Path().apply { arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true) } val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply { duration = 2000 start() } } else { // Create animator without using curved path }
Java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Path path = new Path(); path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true); ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); animator.setDuration(2000); animator.start(); } else { // Create animator without using curved path }
Here is what the arc animation looks like:
If you don't want to create your own timing or path curves, the system provides XML resources for the three basic curves in the material design specification:
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml