Android animation frame animation, interpolation animation and attribute animation (1)

Keywords: Android Attribute xml Java

There are three kinds of animation in android

Frame Animation, Tween Animation and Property Animation

Frame Animation

Specific implementation process:

1. Under the res/drawable directory, the file progress_animlist.xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<!--
    //The root tag is animation-list, where oneshot represents whether the animation will be shown only once, and the animation will be played repeatedly if it is set to false.  
    //Under the root tag, each image in the animation is declared by the item tag  
    android:duration Represents the length of time the picture was displayed.  

-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/p1"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p2"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p3"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p4"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p5"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p6"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p7"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/p8"
        android:duration="150">
    </item>
</animation-list>

The root node is animation-list (animation list). There is one or more item nodes in it. The oneshot attribute indicates whether to play only once, true means to play only once, false means to play all the time, internal uses item node to declare an animation frame, android:drawable specifies the corresponding picture resources of the animation frame, android:druation represents the duration of the frame. Integer in milliseconds.

2. Using ImageView Control as Carrier of Animation to Display Animation
  <ImageView
        android:src="@drawable/progress_animlist"
        android:id="@+id/animi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

Pure java code approach

//Create frame animation
AnimationDrawable animationDrawable = new AnimationDrawable();
//Add frame animationDrawable. addFrame (getResources (). getDrawable (R. mipmap. p1),300); animationDrawable.addFrame (getResources (). getDrawable (R. mipmap. p2),300); animationDrawable. addFrame (getDrawable (R. mip2) (R. mip2 map. p2),300); animationDrawable. addFrame (getResources (). getResources (). getDramitDrawable (R. getDramaMap. p3),300); animationResources. addFrame (getDrawable. addFrame (getDramamamamamamamamaMap ((). DramamaThe results of this study are as follows:1. Rawable. addFrame (getResources (). getDrawable (R. mipmap. p5), 300);

//Set whether the animation is played only once, default is false
animationDrawable.setOneShot(false);

//How long it takes to get that frame based on the index
int duration = animationDrawable.getDuration(2);

//Get the picture of that frame according to the index
Drawable drawable = animationDrawable.getFrame(0);

//Judge if the animation is playing?
boolean isRunning = animationDrawable.isRunning();

//Get whether this animation is played only once
boolean isOneShot = animationDrawable.isOneShot();

//Get how many frames this animation will play together
int framesCount = animationDrawable.getNumberOfFrames();

//Set this animation to background, compatible with more versions. Write the following sentence
mIvImg.setBackground(animationDrawable);
mIvImg.setBackgroundDrawable(animationDrawable);

//Start playing animation
animationDrawable.start();
//Stop playing animation
animationDrawable.stop();

Tween Animation

Inter-patch animation can be implemented in java code or configurable through xml files

Animation type Java Code Implementation XML Configuration
Gradual Transparency Animation Effect AlphaAnimation alpha
Zoom Animation Effect ScaleAnimation scale
Rotary animation effect RotateAnimation rotate
Position Moving Animation Effect TranslateAnimation translate
Combination animation effect AnimationSet set

Concrete realization

1. The animation effect of alpha gradient transparency

(1) xml mode
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillAfter="false"
    android:fromAlpha="1.0"
    android:toAlpha="0.5" />
    <!--
         Transparency control animation effect alpha
            Floating-point values:
                fromAlpha attribute is transparency at the beginning of animation
                The toAlpha attribute is transparency at the end of the animation
                Explain:
                    0.0 means total transparency
                    1.0 means total opacity
                The above values are numeric values of float data types between 0.0 and 1.0

            Long integer values:
                Duration attribute is animation duration
                Explain:
                    Time in milliseconds

        -->

XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_alpha)

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
imageView.startAnimation(alphaAnimation);
(2) Java code style
//The first parameter, fromAlpha, is transparency at the beginning of the animation
//The second parameter, toAlpha, is transparency at the end of the animation
Animation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
alphaAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
alphaAnimation.setFillAfter(false);//Keep the current position after the animation is finished (that is, do not return to the position before the animation starts)
imageView.startAnimation(alphaAnimation);

2. scale zoom animation effect

(1) xml mode
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:startOffset="0"
    android:toXScale="1.5"
    android:toYScale="1.5" />
    <!--
     Scaling animation effect scale
     Properties:
        interpolator specifies an inserter for animation
        During my experiment, I found that using resources in android.res.anim
        There are three kinds of animation inserters:
            Accelerated_decelerate_interpolator acceleration-deceleration animation inserter
            Acceleration_interpolator accelerator-animation inserter
            decelerate_interpolator deceleration-animation inserter
        Other specific animation effects

        RepatMode, the mode of animation repetition, reverse is reverse, when the even execution, the animation direction will be opposite. restart is re-executed in the same direction
      Floating-point values:

        fromXScale property is the scaling size on the X coordinate at the beginning of the animation    
        The toXScale attribute is the scaling size on the X coordinates at the end of the animation     

        The fromYScale attribute is the scaling size on the Y coordinate at the beginning of the animation    
        The toYScale attribute is the scaling size on the Y coordinate at the end of the animation    

            Explain:
                 The above four attribute values    

                    0.0 means shrinking to zero 
                    1.0 indicates normal non-stretching     
                    Value less than 1.0 indicates contraction  
                    Value greater than 1.0 indicates enlargement

        The pivotX attribute is the starting position of the X coordinate of the animation relative to the object.
        The pivotY attribute is the starting position of the Y coordinate of the animation relative to the object.

            Explain:
                    The above two attribute values are taken from 0%-100%.
                    50% is the midpoint position in the X or Y direction coordinates of the object

      Long integer values:
        Duration attribute is animation duration
            Description: Time in milliseconds

        The interval between multiple executions of startOffset animation, if executed only once, will be paused before execution, in milliseconds.

        RepatCount, the count of animation duplication, the animation will execute this value + 1 time
      Boolean values:
        When the fillAfter property is set to true, the animation transformation is applied after the animation is finished.

-->

XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_scale)

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
imageView.startAnimation(alphaAnimation);
(2) Java code style
 Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
    scaleAnimation.setFillAfter(true);//If the fillAfter value is true, the control will remain at the end of execution after the animation is executed
    scaleAnimation.setFillBefore(false);//If the fillBefore value is true, after the animation is executed, the control will return to the state before the animation is executed.
    scaleAnimation.setRepeatCount(3);//Set the number of animation cycles
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setStartOffset(0);
    scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//Setting up animation inserter
    imageView.startAnimation(scaleAnimation);

3. rotate animation effect

(1) xml mode
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromDegrees="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="-360" />
<!--
     rotate animation effect
       Property: interpolator specifies an inserter for an animation
             During my experiment, I found that using resources in android.res.anim
             There are three kinds of animation inserters:
                Accelerated_decelerate_interpolator acceleration-deceleration animation inserter
                Acceleration_interpolator accelerator-animation inserter
                decelerate_interpolator deceleration-animation inserter
             Other specific animation effects

       Floating-point type values:
            fromDegrees attribute is the angle of the object at the beginning of the animation    
            The toDegrees attribute is that at the end of the animation the object can rotate at an angle greater than 360 degrees.   


            Explain:
                     When Angle is Negative - Represents Counterclockwise Rotation
                     When the angle is positive, it means clockwise rotation              
                     (Negative from - to positive: clockwise rotation)   
                     (Negative number from - to negative number: counterclockwise rotation) 
                     (Positive from - to positive: clockwise rotation) 
                     (Positive from - to negative: counterclockwise rotation)       

            The pivotX attribute is the starting position of the X coordinate of the animation relative to the object.
            The pivotY attribute is the starting position of the Y coordinate of the animation relative to the object.

            Description: The above two attribute values are taken from 0%-100%.
                         50% is the midpoint position in the X or Y direction coordinates of the object

        Long integer values:
            Duration attribute is animation duration
            Description: Time in milliseconds

    -->

XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_rotate)

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
imageView.startAnimation(alphaAnimation);
(2) Java code style
Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);//Setting up animation inserter
imageView.startAnimation(rotateAnimation);

4. Translational Location Moving Animation Effect

(1) xml mode
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="100"
    android:fromYDelta="0"
    android:interpolator="@android:anim/cycle_interpolator"
    android:toXDelta="0"
    android:toYDelta="0" />

  <!--
     translate position transfer animation effect
        Integer values:
            Position on X coordinates at the beginning of fromXDelta animation    
            Location on X coordinates at the end of toXDelta animation
            Position on Y coordinates at the start of fromYDelta animation
            Position on Y coordinates at the end of toYDelta animation
            Be careful:
                     When fromXType to XType from YType to YType is not specified,
                     The default is to take oneself as a relative reference.             
        Long integer values:
            Duration attribute is animation duration
            Description: Time in milliseconds
    -->

The XML loading method obtains the Animation through AnimationUtils.loadAnimation(this, R.anim.anim_translate)

Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
imageView.startAnimation(alphaAnimation);
(2) Java code style
Animation translateAnimation = new TranslateAnimation(0, 100, 0, 0);
translateAnimation.setDuration(500);
translateAnimation.setInterpolator(this, android.R.anim.cycle_interpolator);//Setting up animation inserter
translateAnimation.setFillAfter(true);//Keep the current position after the animation is finished (that is, do not return to the position before the animation starts)
imageView.startAnimation(translateAnimation);

5. set Combination Animation Effect

(1) xml mode
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <scale
        android:duration="500"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

XML loading method obtains Animation through AnimationUtils.loadAnimation(this, R.anim.anim_set)

AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.anim_set);
imageView.startAnimation(animationSet);
(2) Java code style
AnimationSet animationSet = new AnimationSet(true);

Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(500);//Set the animation duration to 500 milliseconds

Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//Set the animation duration to 500 milliseconds
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//Setting up animation inserter

animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);

imageView.startAnimation(animationSet);

Posted by RyanSF07 on Tue, 16 Apr 2019 10:36:32 -0700