Summary of Android animation implementation and collection of open source solutions

Friends recommend an open source animation library Lottie, touched by Yagi Mu, can not help but think of the face of a pile of complex animation needs in the chest of a scene of ten thousand horses galloping, so I want to summarize the way Android animation:

• Lottie Open Source Animation Library
  Look at some of the official results:
  
  
  What's more, it takes at least two steps to achieve these effects for development.
  1. Configure Gradle:

dependencies {  
  compile 'com.airbnb.android:lottie:2.0.0-beta4'
}

2. Use controls in layout:

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

Among them, app:lottie_fileName= "hello-world.json", hello-world.json is the JSON data exported by the designer after animation, which is placed in app/src/main/assets.

This open source library, simply speaking, restores the animation designed by the designer based on these json data. It is obvious to show the advantages of these animations by using one picture after another. Unfortunately, some companies may not be skilled in the designers who make these animations, but I believe that this way will be more and more popular. Acceptance by designers and developers
https://github.com/airbnb/lottie-android

• Gradual Change of Android Built-in Animation
  Gradient drawing refers to the application of control views such as imageview,textview to achieve transparency changes, movement, rotation and zooming effects.
  The following examples are used:
  1. Define animation in res/anim/

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

2. Apply the animation defined above to the control:

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

• Frame animation of Android built-in animation
  Frame animation is shown by pictures in order to form the effect of animation. Like film, the process of using frame animation is roughly divided into two steps:
  1. Define animation in res/drawable/

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

2. Set the animation defined above to a background similar to the imageview control, or use it in your code:

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}

public boolean onTouchEvent(MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_DOWN) {
    rocketAnimation.start();
    return true;
  }
  return super.onTouchEvent(event);
}

• Attribute Animation of Android Built-in Animation
  Property animation is more powerful, it allows you to define in what time and how to change the properties of the control, properties include:
  The duration of animation
  The Functional Relation between the Change of Attribute Value and Time
  Repeated playback of animation
  Arrangement of multiple animations on a control
  Arrangement of frame delay, etc.
  eg. Move an image view from the left to the right of the screen with a certain acceleration
• Gif Animation
  As we all know, android doesn't support gif animation natively. It can only be displayed through mediaplay and often can't be displayed properly. For this reason, the gifview is used in the same way as imageview.
  1. Add GifView.jar to the project

2. Adding GifView control to xml, GifView inherits from View class. Such as:

<com.ant.liao.GifView android:id="@+id/gif2"
 android:layout_height="wrap_content"       android:layout_width="wrap_content"
 android:paddingTop="4px" android:paddingLeft="14px" android:enabled="false" />

3. Configure common attributes in code:

// Get a handle to GifView from xml
gf1 = (GifView) findViewById(R.id.gif1);
// Setting up Gif Picture Source
gf1.setGifImage(R.drawable.gif1);
// Adding listeners
gf1.setOnClickListener(this);
// Set the display size, stretch or compress
gf1.setShowDimension(300, 300);
// Setting loading mode: loading first, then displaying, loading while displaying, displaying only the first frame and then displaying
gf1.setGifImageType(GifImageType.COVER);

https://code.google.com/archive/p/gifview/

• Svg animation
  svg is a vector graph, which is similar to Lottie in principle. It uses data to describe the animation, and then restores it through the api provided. The difference is Josn used in lottie. svg is in xml format. Of course, the way of content organization and specific usage are different.
  Reference resources
  https://github.com/MegatronKing/SVG-Android

• Facebook Keyframes
  Of course, the name shows that the facebook team came up with an animation framework.
  https://github.com/facebookincubator/Keyframes

• Cocos2d-x
  If you need to do some interactive, game-like animation, congratulations, and sympathy for you for 3 seconds, learn this, this is for games, haha, I have encountered this huge pit.
  http://www.cocos2d-x.org/