Android Lottie Mooncake into the moon animation special effects

I am participating in the Mid-Autumn Festival creative submission contest, please see the details: Mid-Autumn Festival creative submission Contest;

When xiao CAI animates on Android, it mainly uses three forms of animation provided by Android. Today, Xiao CAI simply tries to display a small animation of a moon cake turning into a moon through Airbnb Lottie.

Lottie

    LottieAnimation isAirbnbOpen source a set of multi platform compatible animation form, small dishes before a simple tryFlutterVersion, the use of very convenient, today’s side dish simple understandingAndroidVersion;

Case try

1. Integration dependencies

Integrate and synchronize the latest version of Lottie dependencies in build.gradle;

API 'com. Reality. The android: Lottie: 4.1.0'Copy the code

2. Add LottieAnimationView to load network resources

First add LottieAnimationView to the XML file, then load the network resources with setAnimationFromUrl(); There are two overloaded methods for loading network images, where cacheKey is a caching policy. After loading the network resources, we also need playAnimation(start the animation;

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

mView = (LottieAnimationView) this.findViewById(R.id.lottie_view);
mView.setAnimationFromUrl("https://assets6.lottiefiles.com/packages/lf20_Tprkoc.json");
mView.playAnimation();
Copy the code

3. Load local resources

When LottieAnimationView loads the local resource, it needs to download the generated JSON file and add it to the project. SetAnimation () introduces the local resource. SetAnimation () also has multiple overloaded methods, which can be flexibly applied.

mView2 = (LottieAnimationView) this.findViewById(R.id.lottie_view2);
mView2.setAnimation("mooncake.json");
mView2.playAnimation();
Copy the code

4. Loop play & animation monitor

After setAnimation() is set in the first two steps, it stops the animation when it is finished playing. If you need to repeat the animation, you can use loop(true), but this method is not recommended in the new API. You can use setRepeatCount() to set the playback times. Or through the animation monitor at the end of the animation to play again;

mView2.loop(true);

mView1.setRepeatCount(5);
Copy the code

You can use addAnimatorListener() for animation listening; The onAnimationRepeat() callback will be called each time the **** playback times are set, and onAnimationEnd() will be called only after the playback ends. If the playback times are not set, the onAnimationRepeat() callback is not entered;

mView2.addAnimatorListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animator) {
        Log.e(TAG, "-> onAnimationStart()");
    }

    @Override
    public void onAnimationEnd(Animator animator) {
        Log.e(TAG, "-> onAnimationEnd()");
    }

    @Override
    public void onAnimationCancel(Animator animator) {
        Log.e(TAG, "-> onAnimationCancel()");
    }

    @Override
    public void onAnimationRepeat(Animator animator) {
        Log.e(TAG, "-> onAnimationRepeat()");
    }
});
Copy the code

5. Pause & Continue & Cancel

PlayAnimation () makes the animation play; Lottie also provides pauseAnimation() to pause the animation; ResumeAnimation () continues after suspension and cancelAnimation() cancels animation;

PlayAnimation () plays from where the animation starts, while resumeAnimation() plays from where the animation stops when the animation is paused or cancelled. PauseAnimation () and cancelAnimation () will stop the animation, but cancelAnimation () will stop after lottieDrawable. CancelAnimation () to empty Drawable animation, The onAnimationCancel() listener is called back;

@Override public void onClick(View view) { switch (view.getId()){ case R.id.main_btn1: mView2.playAnimation(); break; case R.id.main_btn2: mView2.pauseAnimation(); break; case R.id.main_btn3: mView2.resumeAnimation(); break; case R.id.main_btn4: mView2.cancelAnimation(); break; }}Copy the code

A small extension

1. Hardware accelerator

When using Lottie, xiao CAI suggests turning on hardware accelerator to reduce animation frame rate and avoid lag.

android:hardwareAccelerated="true"
Copy the code

2. Parse the JSON file

Before, Xiao CAI thought Lottie’s JSON file was a very magical and complicated mystery. Today, Xiao CAI will briefly introduce the corresponding relationship of properties.

The overall structure includes the following parts:vFor the correspondingbodymovinAnimated version;frAs the frame rate;ip / opCorresponding to start/end key frame;w / hIs the width and height of animation;assetsFor resource information, includingDrawableAnd so on;layersIs layer information;

    asstes 中 w / hIs resource width and height;u / pNon-specific corresponding resources shoulder and name; One of thelayersAlso layer information;layersIn theksIs the main information of the animation;

Xiao CAI understands that Lottie as a whole uses property animation to control progress, and changes layers to trigger LottieAnimationView to redraw each resource information by changing progress.

---

Xiao CAI’s Mid-Autumn Moon cake into the moon Lottie animation attempt so far, mainly familiar with the Android Lottie application; If there are mistakes, please give more guidance!

Source: Little Monk A Ce