Android animation (development art exploration reading notes)

Android animation can be divided into 3 categories: View animation, frame animation, property animation

1.View animation

Can be created by XML or by code

1.1 Create via XML

Create a filename.xml file under res/anim, the syntax is as follows
<?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>

  

View animation can not only write a single animation, but also use animation collection. <set> represents animation collection (corresponding to AnimationSet).
1.1.1: interpolator: Interpolator, which can affect the speed of animation.
1.1.2: Whether shareInterpolator shares a differencer, if the set does not specify a differencer, the sub-animation needs to specify a differencer or use the default differencer.
1.1.3: Axis points of scale: pivotX and pivotY
        Pivot points have different effects than being in the middle and on the left and right sides.
1.1.4:duration
1.1.5: Whether to stay at the end position after the fillAfter animation ends.
 
specific example
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false"
    >

    <translate
        android:duration="100"
        android:fromXDelta="0"
        android:toXDelta="100"
        android:fromYDelta="0"
        android:toYDelta="100"
        android:interpolator="@android:anim/linear_interpolator"/>

    <rotate
        android:duration="400"
        android:fromDegrees="0"
        android:toDegrees="90"
        />
</set>
How to use
Animation animation = AnimationUtils.loadAnimation (AnimationActivity.this, R.anim.filename);
                mButton.startAnimation (animation);

1.2 Create by code

slightly

1.3 View animation usage scenarios

The appearance effect of A.ViewGroup child View
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true">

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"></alpha>

    <translate
        android:fromYDelta="500"
        android:toYDelta="0"></translate>

</set>


<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="0.5"
    android:animationOrder="normal"
    android:animation="@anim/anim_item">
</layoutAnimation>


        Animation animation = AnimationUtils.loadAnimation (this, R.anim.anim_item);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        v.setLayoutAnimation (controller);

//or use directly in XMl
    <ListView
        android:id="@+id/list"
        android:cacheColorHint="#00000000"
        android:divider="#dddbdb"
        android:dividerHeight="1.0px"
        android:background="#fff4f7f9"
        android:layoutAnimation="@anim/anim_layout"
        android:listSelector="@android:color/transparent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></ListView>
delay is the delay period (if the period is 300ms, the delay is 0.5*300=150, the first one is to start the animation after 150ms, the second is to change after the delay of 300ms, and so on)
B. Switching effect between Activities
The overridePendingTransition method is mainly used, but this method needs to be called before startActivity and after finish to be effective

2. Frame animation

3. Property animation

Property animation can animate the properties of any object, not just View. After a certain time interval, the object changes from one property value to another, but property animation is only available since Api11.

Several commonly used classes are: ValueAnimator.ObjectAnimator and AnimatorSet where ObjectAnimator inherits from ValueAnimator, and AnimatorSet is an animation collection. A set of animations can be defined.

Implemented through code

single attribute vs attribute collection
    private void startObjectAnimator(View object) {
        ObjectAnimator.ofFloat(object, "translationY", -object.getHeight()).start();

    }

    private void startColorProperty(View view) {
        ValueAnimator colorAnim = ObjectAnimator.ofInt(view, "backgroundColor", 0xFFFF8080,
                0xFF8080FF);
        colorAnim.setDuration(3000);
        colorAnim.setEvaluator(new ArgbEvaluator());
        colorAnim.setRepeatCount(ValueAnimator.INFINITE);
        colorAnim.setRepeatMode(ValueAnimator.REVERSE);
        colorAnim.start();
    }

    private void startSetProperty(View view) {
        AnimatorSet set = new AnimatorSet();
        set.playTogether(
                ObjectAnimator.ofFloat(view, "rotationX", 0, 360),
                ObjectAnimator.ofFloat(view, "rotationY", 0, 360),
                ObjectAnimator.ofFloat(view, "rotation", 0, -90),
                ObjectAnimator.ofFloat(view, "translationX", 0, 90),
                ObjectAnimator.ofFloat(view, "translationY", 0, 90),
                ObjectAnimator.ofFloat(view, "scaleX", 1, 1.5f),
                ObjectAnimator.ofFloat(view, "scaleY", 0, 0.5f),
                ObjectAnimator.ofFloat(view, "alpha", 0, 0.25f, 1)
        );
        set.setDuration(5 * 1000).start();
    }
Defined by XML, attribute animation is defined under res/animator/
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">

    <objectAnimator
        android:propertyName="x"
        android:duration="300"
        android:valueTo="200"
        android:valueType="intType"></objectAnimator>
    
    <objectAnimator
        android:propertyName="y"
        android:duration="300"
        android:valueTo="300"
        android:valueType="intType"></objectAnimator>
    
</set>
Load the above animation to View
 
        AnimatorSet animatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.property_animator);
        animatorSet.setTarget(view);
        animatorSet.start();

Understanding Differencers and Estimators

TimeInterpolator is translated into a time difference, and its function is to calculate the percentage of the current attribute value change based on the percentage of time elapsed.
The Chinese translation of TypeEvaluator is a type evaluation algorithm, which is an estimator. Its function is to calculate the changed attribute value according to the percentage of the current attribute change.
If you need to animate other types (such as non-int, float, color), you need to customize the type evaluation algorithm.
 
Property animation notes:
Property animation requires that the object's properties have set and get (optional) methods.

Listener for property animation

Property animation provides two interfaces AnimatorUpdateListener and AnimatorListener for the process of monitoring animation
   public static interface AnimatorListener {
        default void onAnimationStart(Animator animation, boolean isReverse) {
            onAnimationStart(animation);
        }
        default void onAnimationEnd(Animator animation, boolean isReverse) {
            onAnimationEnd (animation);
        }
        void onAnimationStart(Animator animation);
        void onAnimationEnd(Animator animation);
        void onAnimationCancel(Animator animation);
        void onAnimationRepeat(Animator animation);
    }
The start, end, cancellation and repetition of the animation are monitored, and the system provides the AnimatorListenerAdapter class, which is convenient for us to inherit any combination of the above methods.
    public static interface AnimatorUpdateListener {
        void onAnimationUpdate(ValueAnimator animation);
    }
Monitor the entire process of the animation, the animation is composed of many frames, and onAnimatorUpdate will be called once every frame is played.

Animate any property

Property animation is based on the initial value and final value passed to the property from the outside world. By continuously calling the set method, the value passed to the set method is different each time, but it is getting closer and closer to the final value. In this way, the abc property of the object To do animation, you need to meet 2 conditions for the animation to take effect:
(1): The setAbc() method needs to be provided. If the initial value is not passed during the animation, then the getAbc method needs to be provided, because the system needs to get the initial value of the abc attribute (if this is not satisfied, the program will crash directly).
(2): The changes made by the setAbc() method of the object to the attribute abc must be reflected in some way, such as bringing about UI changes (if this is not satisfied, the animation is invalid but it will not crash).
 
For property animations that do not provide get and set methods, the official provides 3 solutions.
3 solutions for property animation:
1. Add get and set methods to your object.
2. Use a class to wrap the original object and indirectly provide it with get and set methods.
3. Use ValueAnimator, monitor the animation process, and implement property changes by yourself.
1. Add get and set methods to your object
This usually does not have permission for the View in the SDK.
2. Use a class to wrap the original object and indirectly provide it with get and set methods.
    private static class ViewWrapper {
        private View mTarget;

        public ViewWrapper(View target) {
            this.mTarget = target;
        }

        public void setWidth(int width) {
            mTarget.getLayoutParams().width = width;
            mTarget.requestLayout();
        }

        public int getWidth() {
            return mTarget.getLayoutParams().width;
        }
    }

    //use the above wrapper class
    ViewWrapper wrapper = new ViewWrapper(view);
    ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(5000).start();
Originally wanted to change the width of the Button, but the result setWidth changed is not the same thing we want, wrap the Button as a target, and achieve the animation effect by changing the width of its LayerParams.
3. Use ValueAnimator, monitor the animation process, and implement property changes by yourself.
ValueAnimator itself does not act on any object, that is to say, using it directly has no effect, you can use it to animate a value, we animate a value, and then monitor its animation process, and modify the property value of our animation in the process .
    private void performAnimator(final View target, final int start, final int end) {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(1, 100);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            //Valuation object, convenient to use when valuing
            private IntEvaluator mEvaluator = new IntEvaluator();

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //Get the current progress
                int currentValue = (int) animation.getAnimatedValue();
                float fraction = animation.getAnimatedFraction();
                //Recalculate the width, then set it to LayoutParams and finally redraw
                target.getLayoutParams().width = mEvaluator.evaluate(fraction, start, end);
                target.requestLayout();
            }
        });
        valueAnimator.setDuration(5000).start();
    }
The above is the general content of Android animation, and the rest, such as the working principle of attribute animation, are not described.
 
Problems that may arise:
1. View animation is to animate the image of the View. Sometimes the animation is completed but the View cannot be hidden, that is, setVisibility(View.GONE) is invalid. At this time, you only need to call view.clearAnimation() to clear the View animation. solve.
2. In the process of animation, try to use dp, using px will lead to different effects on different devices.
 
 
 
 
 
 
 
 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325642016&siteId=291194637