Android animation can be roughly divided into two categories. One is Tween animation, which produces animation effects by constantly transforming images (translation, scaling, rotation) of objects in the scene. The second type is Frame animation, which plays each set image in sequence (Frame by Frame animation).

Filling between animation

Animation represents an abstract Animation class. Its implementation classes are as follows: AlphaAnimation, ScaleAnimation, RotateAnimation, TranslateAnimation, and AnimationSet.

Animation types The label Java implementation
Gradient transparency animation alpha AlphaAnimation
Scaling animation with gradient size scale ScaleAnimation
Rotating animation rotate RotateAnimation
Displacement change animation transtate TranslateAnimation
Gradient transparency animation set AnimationSet
  • alpha
attribute instructions
fromAlpha Start transparency (0.0 -1.0, 0.0 being fully transparent and 1.0 being completely opaque)
toAlpha End transparency (0.0 -1.0, 0.0 means fully transparent and 1.0 means completely opaque)
  • scale
attribute instructions
fromXScale The initial X scale relative to itself. Floating point values, such as 1.0, 0, 0, 0, 0, 0, 0
toXScale The end of the X scale relative to itself, floating point value
fromYScale The initial Y scale relative to itself, a floating point value
toYScale The scale of the end in the Y direction relative to itself, floating point value
pivotX Scale the starting X-axis coordinate, can be numerical, percentage, percentage P three styles, such as 50, 50%, 50% P, when the value is numerical, it means that the top left corner of the current View, that is, at the origin of 50px, as the initial scale point; If it is 50%, it means to add 50% of its width to the upper left corner of the current control as the starting point. If it is 50%p, then the starting x-coordinate is added to the upper left corner of the current control by 50% of the width of the parent control
pivotY Scale the starting Y-axis coordinates (same as pivotX)
  • rotate
attribute instructions
fromDegrees The Angle at which the rotation begins, where a positive value represents degrees clockwise and a negative value represents degrees counterclockwise
toDegrees At the end of the rotation to the Angle position, positive represents the degree clockwise, negative code counterclockwise degree
pivotX The upper left corner of the control is the origin of the coordinates of the control. The starting point here is to add the specified pixel to the X axis on the basis of the origin of the control as the starting point (specific value can be set or percentage can be set).
pivotY The upper left corner of the control is the origin of the coordinates of the control. The starting point here is to add the specified pixel to the Y-axis on the basis of the origin of the control as the starting point (specific value can be set or percentage can be set).
  • transtate
attribute instructions
fromXDelta The starting X-axis coordinates can be numeric, percentage, or percentage P, such as 50, 50%, or 50% P (same as pivotX).
fromYDelta The starting point of the Y-axis is pivotY, which can be in three styles: numerical, percentage, or percentage P (same as pivotY).
toXDelta The x-coordinate of the end point
toYDelta The y-coordinate of the end point
  • The set tag has no Animation properties of its own, but only inherits Animation properties, which are the properties of every Animation tag. The set tag is a combination of multiple Animation tags.
attribute instructions
duration Animation duration
fillAfter Whether to retain the current transparency after the animation ends
fillBefore Return to the state before the animation started
repeatCount Repeat the number
repeatMode The repeat type has two values: reverse (playback in reverse order) and restart (playback again). The value must be used together with repeatCount to see the effect

Using animated tags

Under the res folder, create a new anim folder and create a new.xml animation file as follows:

<?xml version="1.0" encoding="utf-8"? >  
<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:duration="3000"  
    android:fillAfter="true">  
      
  <alpha   
    android:fromAlpha="0.0"  
    android:toAlpha="1.0"/>  
    
  <scale  
    android:fromXScale="0.0"  
    android:toXScale="1.4"  
    android:fromYScale="0.0"  
    android:toYScale="1.4"  
    android:pivotX="50%"  
    android:pivotY="50%"/>  
    
  <rotate  
    android:fromDegrees="0"  
    android:toDegrees="720"  
    android:pivotX="50%"  
    android:pivotY="50%"/>  
         
</set>
Copy the code

Code using animation

Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim. Animation file name); StartAnimation (scaleAnimation);Copy the code

Frame by frame animation

Frame-by-frame animation, which shows still images in sequence, like a movie, is usually defined in XML, but can also be controlled in code.

  1. Create a new file under drawable, frame. XML, instead of the anim folder
<? The XML version = "1.0" encoding = "utf-8"? > < animation - the list XMLNS: android = "http://schemas.android.com/apk/res/android" android: oneshot = "false" > / / oneshot: <item Android :drawable="@mipmap/lottery_1" Android :duration="200"/>//duration: <item Android :drawable="@mipmap/lottery_2" Android :duration="200"/> <item Android :drawable="@mipmap/lottery_3" android:duration="200"/> </animation-list>Copy the code

Used directly in XML

<ImageView
   android:id="@+id/iv"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:layout_margin="10dp"
   android:src="@drawable/frame" />
Copy the code

Code control

imageView = (ImageView)findViewById(R.id.iv);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.start();
animationDrawable.stop();
Copy the code

Define an animation resource in your code

AnimationDrawable anim = new AnimationDrawable(); for (int i = 1; i <= 6; i++) { int id = getResources().getIdentifier("lottery_" + i, "mipmap", getPackageName()); Drawable drawable = getResources().getDrawable(id); anim.addFrame(drawable, 200); // Add frame} im.setoneshot (false); / / set to looping imageView. SetImageDrawable (anim); anim.start();Copy the code