In this document
See also
An animation resource can define one of two types of animations:
- Property Animation
- Creates an animation by modifying an object's property values over a set period
of time with an
Animator
. - View Animation
-
There are two types of animations that you can do with the view animation framework:
- Tween animation: Creates an animation by performing a series of transformations on a single image
with an
Animation
- Frame animation: or creates an animation by showing a sequence of images in order
with an
AnimationDrawable
.
- Tween animation: Creates an animation by performing a series of transformations on a single image
with an
Property Animation
An animation defined in XML that modifies properties of the target object, such as background color or alpha value, over a set amount of time.
- file location:
res/animator/filename.xml
The filename will be used as the resource ID.- compiled resource datatype:
- Resource pointer to a
ValueAnimator
,ObjectAnimator
, orAnimatorSet
. - resource reference:
-
In Java:
R.animator.filename
In XML:@[package:]animator/filename
- syntax:
-
<set android:ordering=["together" | "sequentially"]> <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> <animator android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["repeat" | "reverse"] android:valueType=["intType" | "floatType"]/> <set> ... </set> </set>
The file must have a single root element: either
<set>
,<objectAnimator>
, or<valueAnimator>
. You can group animation elements together inside the<set>
element, including other<set>
elements. - elements:
- example:
-
XML file saved at res/animator/property_animator.xml
:<set android:ordering="sequentially"> <set> <objectAnimator android:propertyName="x" android:duration="500" android:valueTo="400" android:valueType="intType"/> <objectAnimator android:propertyName="y" android:duration="500" android:valueTo="300" android:valueType="intType"/> </set> <objectAnimator android:propertyName="alpha" android:duration="500" android:valueTo="1f"/> </set>
In order to run this animation, you must inflate the XML resources in your code to an
AnimatorSet
object, and then set the target objects for all of the animations before starting the animation set. CallingsetTarget()
sets a single target object for all children of theAnimatorSet
as a convenience. The following code shows how to do this:AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext, R.anim.property_animator); set.setTarget(myObject); set.start();
- see also:
-
- Property Animation
- API Demos for examples on how to use the property animation system.
View Animation
The view animation framework supports both tween and frame by frame animations, which can both be declared in XML. The following sections describe how to use both methods.Tween animation
An animation defined in XML that performs transitions such as rotating, fading, moving, and stretching on a graphic.
- file location:
res/anim/filename.xml
The filename will be used as the resource ID.- compiled resource datatype:
- Resource pointer to an
Animation
. - resource reference:
-
In Java:
R.anim.filename
In XML:@[package:]anim/filename
- syntax:
-
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@[package:]anim/interpolator_resource" android:shareInterpolator=["true" | "false"] > <alpha android:fromAlpha="float" android:toAlpha="float" /> <scale android:fromXScale="float" android:toXScale="float" android:fromYScale="float" android:toYScale="float" android:pivotX="float" android:pivotY="float" /> <translate android:fromXDelta="float" android:toXDelta="float" android:fromYDelta="float" android:toYDelta="float" /> <rotate android:fromDegrees="float" android:toDegrees="float" android:pivotX="float" android:pivotY="float" /> <set> ... </set> </set>
The file must have a single root element: either an
<alpha>
,<scale>
,<translate>
,<rotate>
, or<set>
element that holds a group (or groups) of other animation elements (even nested<set>
elements). - elements:
- example:
-
XML file saved at res/anim/hyperspace_jump.xml
:<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:fillAfter="false" android:duration="700" /> <set android:interpolator="@android:anim/accelerate_interpolator" android:startOffset="700"> <scale android:fromXScale="1.4" android:toXScale="0.0" android:fromYScale="0.6" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> <rotate android:fromDegrees="0" android:toDegrees="-45" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> </set> </set>
This application code will apply the animation to an
ImageView
and start the animation:ImageView image = (ImageView) findViewById(R.id.image); Animation hyperspaceJump = AnimationUtils.
loadAnimation
(this, R.anim.hyperspace_jump); image.startAnimation
(hyperspaceJump); - see also:
Interpolators
An interpolator is an animation modifier defined in XML that affects the rate of change in an animation. This allows your existing animation effects to be accelerated, decelerated, repeated, bounced, etc.
An interpolator is applied to an animation element with the android:interpolator
attribute, the value of which is a reference to an interpolator resource.
All interpolators available in Android are subclasses of the Interpolator
class. For each interpolator class, Android
includes a public resource you can reference in order to apply the interpolator to an animation
using the android:interpolator
attribute.
The following table specifies the resource to use for each interpolator:
Interpolator class | Resource ID |
---|---|
AccelerateDecelerateInterpolator |
@android:anim/accelerate_decelerate_interpolator |
AccelerateInterpolator |
@android:anim/accelerate_interpolator |
AnticipateInterpolator |
@android:anim/anticipate_interpolator |
AnticipateOvershootInterpolator |
@android:anim/anticipate_overshoot_interpolator |
BounceInterpolator |
@android:anim/bounce_interpolator |
CycleInterpolator |
@android:anim/cycle_interpolator |
DecelerateInterpolator |
@android:anim/decelerate_interpolator |
LinearInterpolator |
@android:anim/linear_interpolator |
OvershootInterpolator |
@android:anim/overshoot_interpolator |
Here's how you can apply one of these with the android:interpolator
attribute:
<set android:interpolator="@android:anim/accelerate_interpolator"> ... </set>
Custom interpolators
If you're not satisfied with the interpolators provided by the platform (listed in the
table above), you can create a custom interpolator resource with modified attributes.
For example, you can adjust the rate of
acceleration for the AnticipateInterpolator
, or adjust the number of
cycles for the CycleInterpolator
. In order to do so, you need to
create your own interpolator resource in an XML file.
- file location:
res/anim/filename.xml
The filename will be used as the resource ID.- compiled resource datatype:
- Resource pointer to the corresponding interpolator object.
- resource reference:
-
In XML:
@[package:]anim/filename
- syntax:
-
<?xml version="1.0" encoding="utf-8"?> <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android" android:attribute_name="value" />
If you don't apply any attributes, then your interpolator will function exactly the same as those provided by the platform (listed in the table above).
- elements:
- Notice that each
Interpolator
implementation, when defined in XML, begins its name in lowercase. - example:
-
XML file saved at
res/anim/my_overshoot_interpolator.xml
:<?xml version="1.0" encoding="utf-8"?> <overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:tension="7.0" />
This animation XML will apply the interpolator:
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/my_overshoot_interpolator" android:fromXScale="1.0" android:toXScale="3.0" android:fromYScale="1.0" android:toYScale="3.0" android:pivotX="50%" android:pivotY="50%" android:duration="700" />
Frame animation
An animation defined in XML that shows a sequence of images in order (like a film).
- file location:
res/drawable/filename.xml
The filename will be used as the resource ID.- compiled resource datatype:
- Resource pointer to an
AnimationDrawable
. - resource reference:
-
In Java:
R.drawable.filename
In XML:@[package:]drawable.filename
- syntax:
-
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" /> </animation-list>
- elements:
- example:
-
- XML file saved at
res/anim/rocket.xml
: -
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /> </animation-list>
- This application code will set the animation as the background for a View, then play the animation:
-
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage.getBackground()
; rocketAnimation.start()
;
- XML file saved at
- see also: