Use Property Animation & mdash; Property Animation, propertyanimation

Source: Internet
Author: User

Use Property Animation-Property Animation, propertyanimation

Property animation is an animation generated by controlling the attribute values in an object. Attribute animation is currently the most advanced 2D animation system.

Add in API Level 11. Property Animation claims to be an Animation that can control all objects, including visible and invisible.

However, in daily development, we generally customize animations for the UI.

 

Use ObjectAnimator

ObjectAnimator is an animation class that is easy to use. It inherits from ValueAnimator,

It is easier to use because it automatically monitors changes in property values after the animation is started and assigns the value to the object property,

ValueAnimator only monitors the changes in the attribute value, but does not apply the value automatically in the attribute. Therefore, we need to apply these values manually.

Code:

// Create an animation object that moves horizontally from 0 to 300 to translate final ObjectAnimator translation = ObjectAnimator. ofFloat (TV, "translationX", 0f, 300f); translation. setDuration (1500 );

You can create a simple and runable mobile animation in just two lines.

Of course, there are other setxxx () methods that can control the advanced behavior of an animation.

For example, add an interpolation device.

translation.setInterpolator(new AccelerateDecelerateInterpolator());

Running effect:

Final ValueAnimator translation = ValueAnimator. ofFloat (0f, 300f); translation. setDuration (1500 );

The difference is that when creating an object, ValueAnimator does not need to specify the attribute name.

You only need to specify the animation execution range.

As we have already said above, ValueAniamtor does not automatically apply the property value, so we need to add an animation listener.

translation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()        {            @Override            public void onAnimationUpdate(ValueAnimator animation)            {                tv.setTranslationX((float) animation.getAnimatedValue());            }        });

TV is the object for executing animations. Here is a TextView object.

To make the TV Object animation run, we need to use the corresponding setxxx method in the listener to update the TV property value,

These values can be obtained using the getAnimatedValue method of the animation object.

 

Execute different tasks using an animation listener

Through the listener, we can execute different tasks in different animation states.

translation.addListener(new Animator.AnimatorListener()        {            @Override            public void onAnimationStart(Animator animation)            {            }            @Override            public void onAnimationCancel(Animator animation)            {            }            @Override            public void onAnimationRepeat(Animator animation)            {            }            @Override            public void onAnimationEnd(Animator animation)            {                            }        });

For example, we can execute another animation after the previous animation is executed.

translation.addListener(new Animator.AnimatorListener()        {            @Override            public void onAnimationStart(Animator animation)            {            }            @Override            public void onAnimationCancel(Animator animation)            {            }            @Override            public void onAnimationRepeat(Animator animation)            {            }            @Override            public void onAnimationEnd(Animator animation)            {                ObjectAnimator rotation = ObjectAnimator.ofFloat(tv, "rotation", 0f, 360f);                rotation.setDuration(1500);                rotation.start();            }        });

Execution result:

// Enlarge the button by 1.5 times PropertyValuesHolder pvhX = PropertyValuesHolder. ofFloat ("scaleX", 1f, 1.5f); PropertyValuesHolder pvhY = PropertyValuesHolder. ofFloat ("scaleY", 1f, 1.5f); final ObjectAnimator scale = ObjectAnimator. ofPropertyValuesHolder (btnStart, pvhX, pvhY); final ValueAnimator translation = ValueAnimator. ofFloat (0f, 300f); translation. setduration( 1500); btnStart. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// execute the zoom-in animation scale. start (); translation. start ();}});

Running effect:

Keyframe keyframe0 = Keyframe. ofFloat (0f, 0); Keyframe keyframe1 = keyframe. ofFloat (. 3f, 100); Keyframe keyframe2 = keyframe. ofFloat (. 4f, 200); Keyframe keyframe3 = keyframe. ofFloat (1 F, 200 );

PropertyValuesHolder pvhM = PropertyValuesHolder. ofKeyframe ("translationX", keyframe0, keyframe1, keyframe2, keyframe3); final ObjectAnimator trans = ObjectAnimator. ofPropertyValuesHolder (TV, pvhM); trans. setDuration (1500); final ValueAnimator translation = ValueAnimator. ofFloat (0f, 300f); translation. setduration( 1500); btnStart. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// execute the zoom-in animation scale. start (); trans. start (); // translation. start ();}});

Code Analysis:

The total execution time of the first parameter of each keyframe variable is 0% ~ 100%, 0 indicates that the animation is not executed, and 1 indicates that the Code animation is completed.

Keyframe0 indicates the animation position at 0%.

Keyframe1 indicates the animation position at 30%.

Keyframe2 represents the animation position in the last time period

Keyframe3 indicates that the animation has been stopped at a distance of 200 units. This line is added so that the animation will not disappear after it is stopped.

Running effect:

Package com. whathecode. propertyanimation; import android. animation. animator; import android. animation. keyframe; import android. animation. objectAnimator; import android. animation. propertyValuesHolder; import android. animation. valueAnimator; import android. OS. bundle; import android. support. v7.app. actionBarActivity; import android. view. view; import android. widget. button; import android. widget. textView; public class MainActivity extends ActionBarActivity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); final TextView TV = (TextView) findViewById (R. id. TV); Button btnStart = (Button) findViewById (R. id. start); // * // create a horizontally moving animation object, which translates from position 0 to 300 into final ObjectAnimator translation = ObjectAnimator. ofFloat (TV, "translationX", 0f, 300f); translation. setDuration (1500); * // enlarge the button by 1.5 times PropertyValuesHolder pvhX = PropertyValuesHolder. ofFloat ("scaleX", 1f, 1.5f); PropertyValuesHolder pvhY = PropertyValuesHolder. ofFloat ("scaleY", 1f, 1.5f); final ObjectAnimator scale = ObjectAnimator. ofPropertyValuesHolder (btnStart, pvhX, pvhY); Keyframe keyframe0 = Keyframe. ofFloat (0f, 0 );

Keyframe keyframe1 = keyframe. ofFloat (. 3f, 100); Keyframe keyframe2 = keyframe. ofFloat (. 4f, 200); Keyframe keyframe3 = keyframe. ofFloat (1f, 200); PropertyValuesHolder pvhM = PropertyValuesHolder. ofKeyframe ("translationX", keyframe0, keyframe1, keyframe2, keyframe3); final ObjectAnimator trans = ObjectAnimator. ofPropertyValuesHolder (TV, pvhM); trans. setDuration (1500); final ValueAnimator translation = ValueAnimator. ofFloat (0f, 300f); translation. setduration( 1500); btnStart. setOnClickListener (new View. onClickListener () {@ Override public void onClick (View v) {// execute the zoom-in animation scale. start (); trans. start (); // translation. start () ;}}); translation. addListener (new Animator. animatorListener () {@ Override public void onAnimationStart (Animator animation) {}@ Override public void onAnimationCancel (Animator animation) {}@ Override public void Merge (Animator animation) {}@ Override public void onAnimationEnd (Animator animation) {ObjectAnimator rotation = ObjectAnimator. ofFloat (TV, "rotation", 0f, 360f); rotation. setDuration (1500); rotation. start () ;}}); translation. addUpdateListener (new ValueAnimator. animatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {TV. setTranslationX (float) animation. getAnimatedValue ());}});}}

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.