Android property animation and android Property

Source: Internet
Author: User
Tags xml attribute

Android property animation and android Property
Android property animation (full details, graphic and code)
What is Android property animation? The Property Animation system is a robust Animation framework system that can meet most of your Animation needs. Whether or not an animation object has been drawn to the screen, you can change any attribute value during animation execution. An Attribute animation changes the value of an attribute (a field in an object) within a certain period of time. You can use the following steps to define an animation: Specify the attributes of the animation to be executed, such as the position of the animation object (View) on the screen, and specify the execution duration, specify the change value of the expected attribute.
The above is translated from the official website. Simply put, it is very useful to talk about this things. In the future, Property Animation will be used for basic Android animations. In this tutorial, there are pictures and truth, and we will teach you how to handle all kinds of problems. You are welcome to shoot bricks!
Comparison of similar technologies:

  • Tween Animation)
A. Gradient animations support four types: Translate, Rotate, Scale, and Alpha ). B. It only shows the position change. The actual position of the View is not changed. The result is that the View is moved to another place, And the click event is still in the original place to respond. C. The procedure of combination is complicated. D. View Animation also refers to this Animation.
  • Frame Animation)
A. It is used to generate continuous Gif images. B. DrawableAnimation also refers to this animation.
  • Property Animation)
A. animations of attributes that can be updated for all views are supported (setXxx () and getXxx () of attributes are required ()). B. The actual attribute of the View is changed, so the normal use of the View after the animation is executed is not affected. C. Android3.0 (API11) and later functions. Versions earlier than 3.0 can be supported using the third-party open-source github library nineoldandroids. jar.
Attribute animation components and related classes: 1. ObjectAnimator: Object animation execution class. 2. ValueAnimator: Value animation execution class, which is often used with AnimatorUpdateListener. 3. PropertyValuesHolder: attribute storage, which provides the ability to update multiple attributes for two execution classes. 4. Keyframe: Provides operation values for multiple key frames for PropertyValuesHolder. 5. AnimatorSet: an animation execution set class: sets the execution sequence and time. 6. AnimatorUpdateListener: Specifies an animation update listener. 7. AnimatorListener: the animation execution listener, which calls back when the animation starts, repeats, ends, or cancels. 8. AnimatorInflater: loads the xml file of the property animation. 9. TypeEvaluator: type valuation, used to set the value of complex animation operation attributes. 10. TimeInterpolator: time interpolation, used to control the animation execution process.
(Source Code: http://pan.baidu.com/s/1mgFXOkK)

1. ObjectAnimator object animation execution class
Introduction: 1. Obtain class objects through static methods ofInt, ofFloat, ofObject, and ofPropertyValuesHolder. 2. Select a static method based on the attribute value type. For example, if setLeft (int left) of view is selected, the ofInt method is used. If setY (float y) is selected, the ofFloat method is used. 3. Similar to ValueAnimator, you can use it in tandem. The example is as follows. Example:
  • Simple Example: horizontal movement of View
// Construct an ObjectAnimator object through static methods // set the target object, attribute name, and value set ObjectAnimator. ofFloat (view, "translationX", 0.0F, 200366f) // set the execution time (1000 ms ). setDuration (1000) // start the animation. start ();

  • Composite example: The View is automatically dropped and then popped up and executed once.
// Modify the view's y attribute and move it from the current position to 300366f ObjectAnimator yBouncer = ObjectAnimator. ofFloat (view, "y", view. getY (), 300366f); yBouncer. setDuration (1500); // sets the interpolation tool (used to adjust the speed of the animation Execution Process) yBouncer. setInterpolator (new BounceInterpolator (); // you can specify the number of repetitions. The default value is 0, indicating that repeated executions are not performed. setRepeatCount (1); // set RESTART or REVERSE. The number of retries is greater than 0 or INFINITE takes effect for yBouncer. setRepeatMode (ValueAnimator. REVERSE); // sets the animation start delay (200 ms) yBouncer. setStartDelay (200); // start animation yBouncer. start ();


2. ValueAnimator value animation execution class
Description: 1. the constructor is similar to ObjectAnimator. 2. the difference with ObjectAnimator is that the parameter of the ValueAnimator constructor does not contain the animation "attribute" information. 3. Advantage: when used with the animation update listener onAnimationUpdate, multiple attributes of the View can be constantly updated in the callback, making it more flexible to use. Example:
  • Move the View to the bottom right corner:
// Construct a ValueAnimator object using a static method // set the value set ValueAnimator animator = ValueAnimator. ofFloat (0f, 200366f); // sets the animation object to be used. setTarget (view); // set the execution time (1000 ms) animator. setDuration (1000); // Add an animation update listener to animator. addUpdateListener (new AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {// obtain the current value Float mValue = (Float) animation. getAnimatedValue (); // sets the horizontal offset view. setTranslationX (mValue); // sets the vertical offset view. setTranslationY (mValue) ;}}); // start animation animator. start ();


3. PropertyValuesHolder

Description: provides multiple operation attributes and corresponding execution parameters for ValueAnimator. Example:
  • Modify the animation of multiple attributes of a View at the same time:
// Obtain the left position of the view, int left = view. getLeft (); // get the right position of the view, int right = view. getRight (); // Add 10 pixels to the left of the view. PropertyValuesHolder pvhLeft = PropertyValuesHolder. ofInt ("left", left, left + 10); // reduce the right side of the view by 10 pixels PropertyValuesHolder pvhRight = PropertyValuesHolder. ofInt ("right", right, right-10); // scale down from 1f to 0f on the X axis, and then to 1f PropertyValuesHolder pvhScaleX = PropertyValuesHolder on the X axis. ofFloat ("scaleX", 1f, 0f, 1f); // scale in the Y axis from 1f to 0f, and then to 1f PropertyValuesHolder pvhScaleY = PropertyValuesHolder. ofFloat ("scaleY", 1f, 0f, 1f); // deliver PropertyValuesHolder to ObjectAnimator for building ObjectAnimator customAnim = ObjectAnimator. ofPropertyValuesHolder (view, pvhLeft, pvhRight, pvhScaleX, pvhScaleY); // set the execution time (1000 ms) customAnim. setDuration (1000); // start the customAnim animation. start ();


4. Keyframe Key Frame

Introduction: provides a set of key frame operation values for PropertyValuesHolder. Example:
  • The following example shows the rotation animation of the PropertyValuesHolder. When the execution time is 0%, 50%, 100%, the rotation angles are 0 °, , and 0 °, respectively. The animation is automatically supplemented during execution. It is displayed as spin \before turning back.
// When the animation starts, the rotation angle is 0 degrees Keyframe kf0 = Keyframe. ofFloat (0f, 0f); // when the animation is executed at 50%, the rotation angle is degrees Keyframe kf1 = Keyframe. ofFloat// when the animation ends, the rotation angle is 0 degrees Keyframe kf2 = Keyframe. ofFloat (1f, 0f); // use PropertyValuesHolder to encapsulate the property name and value set PropertyValuesHolder pvhRotation = PropertyValuesHolder. ofKeyframe ("rotation", kf0, kf1, kf2); // execute ObjectAnimator through ObjectAnimator. ofPropertyValuesHolder (view, pvhRotation) // sets the execution time (1000 ms ). setDuration (1000) // start the animation. start ();


5. AnimatorSet execution set class
Introduction: 1. Provides playback Sequence Control for multiple attribute Animations (note the usage of play, with, after, and before ). 2. The AnimatorSet class and the AnimationSet class cannot be mixed. It is available only in versions 3.0 and later. Versions earlier than 3.0 can be supported using a third-party open-source library nineoldandroids. jar, which has the same functions. Example: The playing sequence of the following animation is 1. Playing bounceAnim; 2. Playing squashAnim1, squashAnim2, stretchAnim1, stretchAnim2; 3. Playing bounceBackAnim; 4. Playing fadeAnim;
         AnimatorSet bouncer = new AnimatorSet();         bouncer.play(bounceAnim).before(squashAnim1);         bouncer.play(squashAnim1).with(squashAnim2);         bouncer.play(squashAnim1).with(stretchAnim1);         bouncer.play(squashAnim1).with(stretchAnim2);         bouncer.play(bounceBackAnim).after(stretchAnim2);         ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f,         0f);         fadeAnim.setDuration(250);         AnimatorSet animatorSet = new AnimatorSet();         animatorSet.play(bouncer).before(fadeAnim);         animatorSet.start();
For detailed code, see: http://developer.android.com/guide/topics/graphics/prop-animation.html
6. AnimatorUpdateListener: animation update listener
Introduction: 1. This callback is called every time an animation is updated. You can manually update the view attributes in this callback. 2. When you do not re-paint the View in the called attribute method, you need to manually trigger the re-painting. Set the AnimatorUpdateListener listener and execute the invalidate () method of View in the onAnimationUpdate callback. Example:
  • 1. manually update the View attributes in the callback:
// 1. manually update the View attributes in the callback: AnimatorUpdateListener l = new AnimatorUpdateListener () {public void onAnimationUpdate (ValueAnimator animation) {// The current value range is 0.0f-> 1.0f // The percentage of animation execution. Different from AnimatedValue. Float fraction = animation. getAnimatedFraction (); // The effect below is that the View is completely transparent to opacity, view. setAlpha (fraction); // The PX distance downward in the Y direction. view. setTranslationY (fraction * 300366f) ;}; ValueAnimator mAnim = ValueAnimator. ofFloat (0f, 1.0f); mAnim. addUpdateListener (l); mAnim. setDuration (1, 1000); mAnim. start ();

  • 2. Used to trigger re-painting within the custom View:
// 2. the custom View is used to re-paint public class MyAnimationView extends View implements ValueAnimator. animatorUpdateListener {public MyAnimationView (Context context) {super (context) ;}@ Override public void onAnimationUpdate (ValueAnimator animation) {// manually trigger the interface to re-paint invalidate ();}}

7. Listening to animation execution of AnimatorListener
Introduction: 1. the method in implementing the AnimatorListener can be called back and executed by other tasks throughout the animation execution process. 2. You can also add the implementation class AnimatorListenerAdapter of the AnimatorListener to rewrite the listener. Example:
<Span style = "font-weight: 700;"> </span> // update the view transparency from the current 1.0f to 0.5f, remove the View ObjectAnimator anim = ObjectAnimator when the animation ends. ofFloat (view, "alpha", 0.5f); anim. setDuration (1, 1000); anim. addListener (new AnimatorListener () {@ Override public void onAnimationStart (Animator animation) {// call at animation start} @ Override public void onAnimationRepeat (Animator animation) {// call when the animation is repeated} @ Override public void onAnimationEnd ( Nimator animation) {// call ViewGroup parent = (ViewGroup) view. getParent (); if (parent! = Null) parent. removeView (view) ;}@ Override public void onAnimationCancel (Animator animation) {// call when the animation is canceled}); anim. start ();


8. AnimatorInflater animation Loader
Introduction: 1. Attribute animation can be loaded as an xml file. 2. the animator in the set label can also be used independently. 3. XML 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>

Example:
<Span style = "font-weight: 700;"> </span> // load the xml Attribute animation Animator anim = AnimatorInflater. loadAnimator (this, R. anim. animator_set); anim. setTarget (view); anim. start ();
Xml file:
<?xml version="1.0" encoding="utf-8"?><set>    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"        android:duration="1000"        android:valueTo="200"        android:valueType="floatType"        android:propertyName="x"        android:repeatCount="1"        android:repeatMode="reverse"/>    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"        android:duration="1000"        android:valueTo="400"        android:valueType="floatType"        android:propertyName="y"        android:repeatCount="1"        android:repeatMode="reverse"/></set>


9. TypeEvaluator type valuation
Description: 1. Type of parameter values that can be input by TypeEvaluator (PointF in this example ). 2. Override the public T evaluate (floatfraction, T startValue, T endValue) function to calculate different demand values. 3. Pay attention to the use of fraction. The fraction value ranges from 0.0 to 1.0. Example:
<Span style = "font-weight: 700;"> </span> // type valuation-parabolic example TypeEvaluator <PointF> typeEvaluator = new TypeEvaluator <PointF> () {@ Override public PointF evaluate (float fraction, PointF startValue, PointF endValue) {float time = fraction * 3; Log. e (TAG, time + ""); // 200px/s in the x direction, 0.5*200 * t PointF point = new PointF (); point. x = 120 * time; point. y = 0.5f * 200 * time; return point ;}}; ValueAnimator valueAnimator = ValueAnimator. ofObject (typeEvaluator, new PointF (0, 0); valueAnimator. setInterpolator (new LinearInterpolator (); valueAnimator. setDuration (3000); valueAnimator. start (); valueAnimator. addUpdateListener (new AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {PointF point = (PointF) animation. getAnimatedValue (); view. setX (point. x); view. setY (point. y );}});


10. TimeInterpolator time interpolation
1. Several Common interpolation devices:
Interpolator object Resource ID Function
AccelerateDecelerateInterpolator @ Android: anim/accelerate_decelerate_interpolator Acceleration before deceleration
AccelerateInterpolator @ Android: anim/accelerate_interpolator Acceleration
AnticipateInterpolator @ Android: anim/anticipate_interpolator Let's take a small step back and then speed up.
AnticipateOvershootInterpolator @ Android: anim/anticipate_overshoot_interpolator On the basis of the above, a small step beyond the end and then return to the end
BounceInterpolator @ Android: anim/bounce_interpolator Final fl Effect
CycleInterpolator @ Android: anim/cycle_interpolator Periodic exercise
DecelerateInterpolator @ Android: anim/decelerate_interpolator Deceleration
LinearInterpolator @ Android: anim/linear_interpolator Uniform speed
OvershootInterpolator @ Android: anim/overshoot_interpolator Quickly reach the destination and return to the destination after a small step

2. Custom interpolation a. Implement the Interpolator (TimeInterpolator) interface; B. Rewrite the interface function float getInterpolation (floatinput ).



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.