Tween Animation

• Make up animation is that we only need to specify the start and end "key frames", while other frames in change are calculated by the system without defining them one by one.
• Android uses Animation to represent abstract Animation, including four subcategories: AlphaAnimation (transparency Animation), ScaleAnimation (scaling Animation), TranslateAnimation (displacement Animation) and RotateAnimation (rotation Animation)
• Animation resource files are generally used to define animation, separating the interface from logic
• After defining the anim files, we can load them through the AnimationUtils tool class, and return an Animation after loading successfully. Then we can start the Animation through the View's startAnimation(anim).

Example

• Gap Animation: by using   Animation   Perform a series of transformations on a single picture to create an animation.
• Animations defined in XML that perform transformations on drawings such as rotation, fade, move, and stretch.
• The animation file is placed in res/anim /, and the file name will be used as the resource ID.

Mobile example

First use an example to establish an intuitive understanding. Create an animation XML to achieve the effect from left to right.   move_hor_1.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="200"
        android:toXDelta="-100%" />

    <translate
        android:duration="400"
        android:startOffset="200"
        android:toXDelta="100%" />
</set>

To use this animation, you need to use AnimationUtils.loadAnimation(getContext(), R.anim.move_hor_1); to load the animation. Get the object animation   Give it to view. Startanimation (mananimation); to start.

Take a closer look at the contents of the animation xml:

• There are 2 translate in set
• translate indicates a move action
• duration is the execution time (in milliseconds) of this action
• toXDelta indicates horizontal movement
• startOffset indicates how long after the animation starts to execute

In fact, the second translate cycle is 400 milliseconds. It "waited" 200 mm before it began to execute. It moved the View from the left to the right.

Zoom example
In addition to displacement, you can also perform scaling effects.

Example: first zoom in and then zoom out. It mainly uses android:repeatMode="reverse" and android:repeatCount="1".

The complete animation xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="600"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toXScale="1.35"
        android:toYScale="1.35" />
</set>

In scale, we encountered several elements pivotX, repeatCount and repeatMode

• Android: pivot x is the X coordinate to keep unchanged when the object is scaled; pivot is the same.
• android:repeatCount the number of repetitions of the animation. Set to "- 1" to indicate infinite repetitions, or set to a positive integer.
  For example, a value of "1" means that the animation is repeated once after the initial playback, so the animation is played twice in total. The default value is "0", which means no repetition.
• Android: the behavior of the repeatmode animation playing to the end.
• android:repeatCount must be set to a positive integer or "- 1" for this property to be valid.
• Set to reverse to have the animation play backwards at each iteration,
• Set to repeat to let the animation cycle from the beginning each time.

Examples of multiple animation elements

A < set > set can contain multiple elements.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:toXDelta="50%" />

    <alpha
        android:duration="500"
        android:fromAlpha="1"
        android:toAlpha="0.5" />

    <set
        android:interpolator="@android:anim/decelerate_interpolator"
        android:startOffset="500">
        <rotate
            android:duration="400"
            android:fromDegrees="360"
            android:pivotX="100%"
            android:pivotY="50%"
            android:toDegrees="0" />

        <translate
            android:duration="400"
            android:fromXDelta="0%"
            android:toXDelta="-50%" />

        <alpha
            android:duration="400"
            android:fromAlpha="0.5"
            android:toAlpha="1" />

    </set>
</set>

There are many elements in < set >, you can put < set > into < set >. We can divide it into two actions: starting and returning.

set out:
The first < rotate > is to start from your central position.  < Translate > go 50% horizontally to the right.

Back:
The pivot X in the following < rotate > needs to take into account that the horizontal movement is 50% when starting, so the pivot x value is 100%.

And < translate > can go from 0% to - 50%.

Animation xml element

<?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>

set

Accommodate other animation elements (< objectanimator style = "box sizing: inherit;" >, < valueanimator style = "box sizing: inherit;" >   Or other  < Set style = "box sizing: inherit;" > element)   AnimatorSet. Multiple animation elements can be placed and grouped together. Each set can define its own   ordering   Properties.

• android:interpolator   Interpolator resource. To apply to animation   Interpolator. The value must be a reference to the resource of the specified interpolator (not the interpolator class name). You can use the default interpolator resource provided by the platform or create your own interpolator resource.
• android:shareInterpolator   Boolean. true if you want to use the same interpolator in all child elements.

alpha

Fade in or fade out animation. Corresponds to the AlphaAnimation class.

• android:fromAlpha   Floating point number. Starting opacity offset, 0.0 for transparency and 1.0 for opacity.
• android:toAlpha   Floating point number. End opacity offset, 0.0 for transparency and 1.0 for opacity.

scale

Scale animation, resized animation; corresponds to ScaleAnimation   pivotX   and   Pivot to specify the center point for the outward (or inward) expansion of the View. For example, if these two values are 0 and 0 (upper left corner), all expansion will be carried out in the downward right direction.

• android:fromXScale   Floating point number. Start X dimension offset, where 1.0 means unchanged.
• android:toXScale   Floating point number. End X dimension offset, where 1.0 means unchanged.
• android:fromYScale   Floating point number. Start Y dimension offset, where 1.0 means unchanged.
• android:toYScale   Floating point number. End Y dimension offset, where 1.0 means unchanged.
• android:pivotX   Floating point number. The X coordinate to keep unchanged when the object is scaled.
• android:pivotY   Floating point number. The Y coordinate to keep unchanged when the object is scaled.

translate

Move animation. Move vertically or horizontally. Or move horizontally and vertically together. Corresponds to TranslateAnimation. Supports the following attributes in one of the following three formats: a value ending in '%' from - 100 to 100, representing a percentage relative to itself; a value ending in '% p' from - 100 to 100 The ending value represents the percentage relative to its parent; the floating-point value without suffix represents the absolute value.

Properties:

• android:fromXDelta   float or percentage. Start X offset. Representation: number of pixels relative to normal position (e.g. "5"), percentage relative to element width (e.g. "5%"), or percentage relative to parent width (e.g. "5%p").
• android:toXDelta   float or percentage. End X offset. The representation is the same as fromXDelta
• android:fromYDelta   float or percentage. Start Y offset. Representation: number of pixels relative to normal position (e.g. "5"), percentage relative to element height (e.g. "5%"), or percentage relative to parent height (e.g. "5%p").
• android:toYDelta   float or percentage. End Y offset. The representation is the same as fromYDelta

rotate

The rotation animation corresponds to RotateAnimation.

Properties:

• android:fromDegrees floating point number. Starting angular position, in degrees.
• android:toDegrees floating point number. End angular position, in degrees.
• android:pivotXfloat or percentage. The X coordinate of the center of rotation. Representation: the number of pixels relative to the left edge of the object (e.g. "5"), the percentage relative to the left edge of the object (e.g. "5%"), or the percentage relative to the left edge of the parent container (e.g. "5%p").
• android:pivotYfloat or percentage. The Y coordinate of the center of rotation. Representation: the number of pixels relative to the upper edge of the object (e.g. "5"), the percentage relative to the upper edge of the object (e.g. "5%"), or the percentage relative to the upper edge of the parent container (e.g. "5%p").

Android zero foundation tutorial video reference