Reprint please indicate the source: blog.csdn.net/linglongxin… DylanAndroid’s CSDN blog


In the lastAndroid basic animation, composite animation, Frame animation, layout animation, Activity jump animationI wrote the use of basic animation, so this time we will look atAndroidProperties animation to implement a variety of effects, including basic transparency, scaling, panning, rotation, and composite animation, as well as custom animation impersonation

QQ motion and parabola animation. The renderings are as follows:

1. Why animate properties

Property animation: As the name suggests, property animation is the animation effect of changing the property value of a control. Is a new animation framework released after 3.0. Note: Property animation can be used whenever a property of a control provides a set property method. The difference between property animation and normal animation: A normal animation, for example, when the displacement animation happens, a normal tween animation just changes the display and doesn’t really change its properties, so when the click shifts the view, it doesn’t have any effect, because it’s in the same position, For example, to dynamically change the background color of a view can not be achieved by tween animation, which is the real benefit of attribute animation.

2. Two core classes

  • ValueAnimator

    ValueAnimator is the core of the entire property animation mechanism. The animation mechanism is implemented by continuously manipulating values. ValueAnimator is responsible for the animation transition between the initial value and the end value. It uses a time-loop mechanism to calculate the animation transition from value to value. We simply provide ValueAnimator with the initial and end values and tell it how long the animation needs to run. ValueAnimator will automatically smooth the transition from the initial value to the end value.

  • ObjectAnimator is a subclass of ValueAnimator

    ObjectAnimator is a subclass of ValueAnimator. It already includes a time engine and value calculation, so it has the ability to animate a property of an object. This makes it much easier to animate any object. You no longer need to implement ValueAnimator AnimatorUpdateListener interface, because ObjectAnimator animation will automatically update the corresponding attribute values. ObjectAnimator instances are similar to ValueAnimator, but you need to describe the object, set the name of the animator property (a string), and the range of animator property values. For example:

    / * *

    • First argument: the target control to act on
    • Second argument: The value of the property you want to manipulate on the control
    • Third argument: the starting value of the property to operate on
    • */ ObjectAnimator anim = objectAnimator.offloat (iv, “alpha”, 0f, 1f);

    / Set duration /

    anim.setDuration(1000);

    / Start animation /

    anim.start();

3. Achieve the animation effect

  • (1) Transparency animation
/** * First argument: the target control to operate on * second argument: the value of the property to operate on * third argument: the start value of the property to operate on * fourth argument: To the end of the action attribute value * / ObjectAnimator ObjectAnimator = ObjectAn ObjectAnimator. SetDuration (1000); objectAnimator.start();Copy the code
  • (2) Zoom animation
  • / * * * * / PropertyValuesHolder animation combination objectAnimatorScaleX = PropertyValuesHolder. OfFloat (" scaleX, 0 f, 1 f); PropertyValuesHolder objectAnimatorScaleY = PropertyValuesHolder.ofFloat("scaleY", 0f, 1f); / * * * * / ObjectAnimator two animation to play at the same time. The ofPropertyValuesHolder (iv, objectAnimatorScaleX, objectAnimatorScaleY).setDuration(1000).start();Copy the code
    
  • (3) Rotation animation
  •     ObjectAnimator objectAnimatorScale = ObjectAnimator.ofFloat(iv, "rotation", 0f, 360f);
         objectAnimatorScale.setDuration(1000);
         objectAnimatorScale.start();Copy the code
    
  • (4) Displacement animation
  • ObjectAnimator objectAnimatorTransl
    objectAnimatorTranslate.setDuration
    objectAnimatorTranslate.start();
    Copy the code
    
  • (5) Combination animation 1: play zooming animation first, and rotate animation after completion
  • /** / AnimatorSet animatorSetGroup1 = new AnimatorSet(); ObjectAnimator objectAnimatorScaleX1 = ObjectAnimator.ofFloat(iv, "scaleX", 0f, 1f); ObjectAnimator objectAnimatorScaleY1 = ObjectAnimator.ofFloat(iv, "scaleY", 0f, 1f); ObjectAnimator objectAnimatorRotateX1 = ObjectAnimator.ofFloat(iv, "rotationX", 0f, 360f); ObjectAnimator objectAnimatorRotateY1 = ObjectAnimator.ofFloat(iv, "rotationY", 0f, 360f); animatorSetGroup1.setDuration(1000); animatorSetGroup1.play(objectAnimatorScaleX1).with(objectAnimatorScaleY1) .before(objectAnimatorRotateX1).before(objectAnimatorRotateY1); animatorSetGroup1.start();Copy the code
    
  • (6) Combination animation 2: Rotation animation is played first, and displacement animation is played after completion
  • AnimatorSet animatorSetGroup2 = new AnimatorSet();
    ObjectAnimator objectAnimatorTranslate2 = ObjectAnimator.ofFloat(iv, "translationX", 0f, 500f);
    ObjectAnimator objectAnimatorRotateX2 = ObjectAnimator.ofFloat(iv, "rotationX", 0f, 360f);
    ObjectAnimator objectAnimatorRotateY2 = ObjectAnimator.ofFloat(iv, "rotationY", 0f, 360f);
    animatorSetGroup2.setDuration(1000);
    animatorSetGroup2.play(objectAnimatorTranslate2).after(objectAnimatorRotateX2)
            .after(objectAnimatorRotateY2);
    animatorSetGroup2.start();Copy the code
    
  • (7) Repeated animation 1: repeated transparency animation – flicker
  • ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(iv, "alpha", 0f, 1f);
    objectAnimator2.setDuration(500);
    objectAnimator2.setRepeatCount(3);
    objectAnimator2.start();Copy the code
    
  • (8) Repeated animation two: repeated displacement animation – shake
  • ObjectAnimator objectAnimatorTranslate3 = ObjectAnimator.ofFloat(iv, "translationX", -50f, 50f); objectAnimatorTranslate3.setDuration(500); objectAnimatorTranslate3.setRepeatCount(3); objectAnimatorTranslate3.start(); objectAnimator2.start();Copy the code
    
  • (9) Dynamic change control color
  •   ObjectAnimator objectAnimatorBg = ObjectAnimator.ofInt(iv, "backgroundColor", Color.BLUE, Color.YELLOW, Color.RED);
      objectAnimatorBg.setDuration(3000);
      objectAnimatorBg.start();Copy the code
    
  • (10) Imitation QQ motion animation
  • ValueAnimator is the core of the entire property animation mechanism. The animation mechanism is implemented by continuously manipulating values. ValueAnimator is responsible for the animation transition between the initial value and the end value. * It internally uses a time-loop mechanism to calculate animation transitions from value to value. * We only need to provide ValueAnimator with initial and end values and tell it how long the animation should run. ValueAnimator will automatically smooth the transition from the initial value to the end value. * * @param last * @param current */ @RequiresApi(api = Build.VERSION_CODES.HONEYCOMB) private void setAnimation(float last, float current, int length) { ValueAnimator progressAnimator = ValueAnimator.ofFloat(last, current); progressAnimator.setDuration(length); progressAnimator.setTarget(currentAngleLength); progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { currentAngleLength = (float) animation.getAnimatedValue(); invalidate(); }}); progressAnimator.start(); }Copy the code
    
  • (11) Parabolic animation
  • /** * RequiresApi(API = build.version_codes.honeycomb) public void parabola() {ValueAnimator ValueAnimator = new ValueAnimator(); valueAnimator.setDuration(3000); valueAnimator.setObjectValues(new PointF(0, 0)); valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.setEvaluator(new TypeEvaluator() { @Override public PointF evaluate(float fraction, PointF startValue, PointF point = new PointF(); PointF point = new PointF(); PointF point = new PointF(); point.x = 200 * fraction * 3; Point. Y = 0.5f * 200 * (fraction * 3) * (fraction * 3); return point; }}); valueAnimator.start(); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { PointF point = (PointF) animation.getAnimatedValue(); iv.setX(point.x); iv.setY(point.y); }}); }Copy the code
    

    4.GiHub