"Android-Advanced" animation motion tweens

A tweened animation is also called a view animation, which can only be animated for the view, and the motion tween is just the visible part of the view, that is, only the interface, the clickable area and so on will not be manipulated.

In Android, the top class of a tweened animation is animation. Motion tweens include animating the view's transparency, scaling, panning, and rotation, and the corresponding Java classes are alphaanimation, Scaleanimation, Translateanimation, Rotateanimation, respectively.

Android also provides an animated collection of Animationset that can be used to put multiple animated monomers together in a collection, where multiple animations in the collection can choose to share a set of animation differences and execution times.

This article will introduce the motion tween from two angles, the first is the introduction of the basic use of the tweened animation, and the second is to introduce the other applications of the tweened animation in the actual development, including the layoutanimation for specifying the animation of the view in ViewGroup, Animations to control activity transitions, and more.

Introduction to basic use

Motion tweens can be written in an XML file or in a Java file, but the official recommendation is written in an XML file because the XML format is easier to read.

In the XML notation for motion tweens, we can use <alpha>, <scale>, <translate>, <rotate> four animations respectively, or use the <set> The label represents an animation collection. The following is an example of a tween animation XML file description that includes all the properties, as follows:

<?XML version= "1.0" encoding= "Utf-8"?><Setxmlns:android= "Http://schemas.android.com/apk/res/android"android:duration= "$"Android:fillafter= "true"Android:interpolator= "@android: Anim/accelerate_decelerate_interpolator"Android:shareinterpolator= "true">    <AlphaAndroid:fromalpha= "0%"Android:toalpha= "100%" />    < ScaleAndroid:fromxscale= "100%"Android:fromyscale= "100%"Android:pivotx= "50%"Android:pivoty= "50%"Android:toxscale= "200%"Android:toyscale= "200%" />    <TranslateAndroid:fromxdelta= "0%"Android:fromydelta= "0%"Android:toxdelta= "100%"Android:toydelta= "100%" />    <Rotateandroid:fromdegrees= "0"Android:pivotx= "50%"Android:pivoty= "50%"android:todegrees= " the" /></Set>

The detailed explanations for each attribute in the preceding code are as follows:

Android:interpolator: The difference device, used to control the speed of animation bounceinterpolator: Bounce effect; Accelerateinterpolator: gradual acceleration; Decelerateinterpolat Or: gradual deceleration; acceleratedecelerateinterpolator: acceleration and deceleration; Overshootinterpolator: "Run over" when reaching the target point, then return to the target point; Anticipateinterpola    Tor: The "run-up" before moving, the combination effect of anticipateovershootinterpolator:overshootinterpolator and anticipateinterpolator; Cycleinterpolator: For the specified animation, just do it again, echo do it again Android:shareinterpolator:<Set>whether the animation in the tag shares the difference android:duration: Animation collection Play time Android:fillafter: whether the animation stays in the final state after the end<Alpha>: Transparency Animation Android:fromalpha: Transparency at the beginning of an animation Android:toalpha: Transparency at the end of an animation< Scale>: Zoom Animation Android:fromxscale: The x-axis zoom multiplier at the start of the animation Android:fromyscale: The zoom multiplier of the y-axis at the start of the animation android:pivotx: Zoom center point x Coordinate ANDROID:PI Voty: Zoom center point y coordinate Android:toxscale: The x-axis zoom multiplier at the end of the animation Android:toyscale: The zoom factor of the y-axis at the end of the animation<Translate>: Panning Animation Android:fromxdelta: The coordinate position of the x-axis at the start of the animation Android:fromydelta: The coordinate position of the y-axis at the beginning of the animation Android:toxdelta: coordinates of the x-axis at the end of the animation and Roid:toydelta: The coordinate position of the y-axis at the end of the animation<Rotate>: Rotation animation android:fromdegrees: Angle at the beginning of the animation android:todegrees: Angle at the end of the animation android:pivotx: The x-coordinate of the center point of rotation android:pivoty: rotation The y-coordinate of the center point

In addition to using XML format to write animation code, you can also write animation code in Java code, you need to use Animationset, Alphaanimation, Scaleanimation, Translateanimation, Rotateanimation these classes. Here's a code that uses Java code to animate:

New Alphaanimation (0.0f, 1.0fnew scaleanimation (1.0f, 2.0f, 1.0f, 2.0f, 0.5f, 0.5fNew Translateanimation (0.0f, 500.0f, 0.0f, 500.0fnew rotateanimation (0.0f, 360.0f, 0.5f, 0.5f  ) New Animationset (true); Set.setduration (+); set.addanimation (alphaanimation); Set.addanimation (scaleanimation); set.addanimation (translateanimation); set.addanimation (rotateAnimation); Set.start ();

Other ways to use

The basic use of motion tween animation is described in the previous section, which describes some other ways to use motion tweens.

Layoutanimation

The layoutanimation is used to uniformly control the animation effect of each view in the ViewGroup, and also to control the interval between each view animation, in order to achieve the effect of entry in turn. For example, in the following example, we will control the entry animation for all item in a ListView, reaching the effect of all item entry in turn.

There is a property in the ListView: android:layoutanimation , which controls the animation of the ListView as a viewgroup, all of its item. The layout code for the ListView in the layout file is as follows:

<ListViewAndroid:id= "@+id/animate_main_lv_listview"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:cachecolorhint= "@android: Color/transparent"Android:divider= "@android: Color/darker_gray"Android:dividerheight= "1.0dip"android:layoutanimation= "@anim/anim_layout_listview"Android:scrollbars= "None" />

We need to create a new animation file Anim_layout_listview.xml, write layoutanimation in this file, the code is as follows:

<? XML version= "1.0" encoding= "Utf-8" ?> <  xmlns:android= "http://schemas.android.com/apk/res/android"    android: Animation= "@anim/anim_item_listview"    android:animationorder= "normal"     android:delay= "50%"    android:interpolator= "@android: anim/ Accelerate_decelerate_interpolator "/>

The detailed explanations for each attribute in the preceding code are as follows:

Android:animation: The animated Android:animationorder of each item: the animation execution order of each item, divided into normal sequence, reverse reverse order, random Android: Delay: The animation interval, in percent, of the item animation, as a percentage of the Android:interpolator: animation difference

We also need to create another animation file, Anim_item_listview.xml, that represents the animation for each item, with the following code:

<?XML version= "1.0" encoding= "Utf-8"?><Setxmlns:android= "Http://schemas.android.com/apk/res/android"android:duration= "$"Android:fillafter= "true"Android:shareinterpolator= "true">    <AlphaAndroid:fromalpha= "0.1"Android:toalpha= "1.0" />    <TranslateAndroid:fromxdelta= "$"Android:toxdelta= "0" /></Set>

Each item is opaque from transparent, panning from the right to the left, and the animation interval between the top and bottom two item is 250ms (500MS * 50%).

Activity Toggle Animation

Activity switching animation generally requires four animations, respectively, the new activity entered the animation, the old activity exited when the animation, the new activity exited when the animation, the old activity entered the time of the animation, so, in this case, respectively, using anim_ Activity_new_in.xml, Anim_activity_new_out.xml, Anim_activity_old_in.xml, anim_activity_old_out.xml Four animation files are represented.

There are two ways to control the activity's toggle animation, which is controlled by Java code and configured by XML code.

First, let's look at the code in terms of Java code control:

New Intent (context, nextactivity.  Class); startactivity (intent); Overridependingtransition (r.anim.anim_activity_new_in, r.anim.anim_ Activity_old_out);

As can be seen, directly using the overridependingtransition () method to control, set two parameters in the method, respectively, the new activity entry and the old activity exit animation resource ID, through this line of code, You can simply implement a toggle animation between the activity. It is important to note that this method must be called after the StartActivity () method or the Finish () method, otherwise it is not valid.

This method only controls the switching animation of a single activity, and does not control the toggle animation of all global activity. If you want to control the transition animation for all activities in your project, you need to use the second way: How to configure XML.

In the XML configuration mode, we can control all activity's toggle animation, but also can control the individual activity switching animation, only need to choose in the <application> General tab or a specific <activity> tag configuration The android:theme property can be. The Android:theme property specifies an XML file, with the XML code in an example pasted below:

<stylename= "Apptheme"Parent= "Theme.AppCompat.Light">    <Itemname= "Colorprimary">@color/colorprimary</Item>    <Itemname= "Colorprimarydark">@color/colorprimarydark</Item>    <Itemname= "Coloraccent">@color/coloraccent</Item>    <Itemname= "Android:windowanimationstyle">@style/activityanimation</Item></style><stylename= "Activityanimation"Parent= "@android: Style/animation">    <Itemname= "Android:activitycloseenteranimation">@anim/anim_activity_old_in</Item>    <Itemname= "Android:activitycloseexitanimation">@anim/anim_activity_old_out</Item>    <Itemname= "Android:activityopenenteranimation">@anim/anim_activity_new_in</Item>    <Itemname= "Android:activityopenexitanimation">@anim/anim_activity_new_out</Item></style>

As you can see, the Android:windowanimationstyle property is set in Apptheme to specify four animations for activity switching, and then the four animations are referenced below. This configures the toggle animations for all activity in the project.

"Android-Advanced" animation motion tweens