Effect:

Recently I was working on a music clipping project, and I made a Lottie animation because the static images needed for the launch page were too stiff. The specific process is as follows:

Animation after Effects

Tools to prepare

  1. Adobe After Effects CC animation tool, I used here is Mac, download address and cracking is described here at http://www.sdifen.com/mac-adobe-after-effecs-cc.html.
  2. Export animation json file, need to download the bodymovin AE plugins at http://www.mq2014.com/bodymovin-ae-cha-jian-mac-win-an-zhuang-xia-zai.html.

First open the AFTER Effects tool and create a composition with duration set to 0. 00; 03. 00 is 3 seconds

To import image materials, do the following:

After importing the image, it will look like this

Next, create a new mask

Next click on the triangle and the shape shows the mask shape window

Set the left and right initial values to 0 pixels, then click the small alarm to the left of the mask path, and the next action will trigger the keyframe.

Slide the event slider to the far right (3 seconds), click the Unmask Shape popup again, set the right value to 500 pixels, then check Reset to Rectangle, and then OK.

Now that our animation is complete, you can click the play button in the preview box to see the effect.

Now that the animation is done, but not yet, let’s export json. Click on the toolbar create library oh, expand, Bodymovin.

Next, select the animation to export JSON, then select the location of the data.json to export, and then click Render.

If the following output is displayed, the export is successful

Export the following files

Android Lottie loads animations

  1. Start by putting the generated files into the project Assets folder.

  2. Build. Add depend on the compile gradle ‘com. Reality. Android: Lottie: 2.0.0 – beta4’

  3. Add LottieAnimationView to XML. Here we need to set the name of the Assets file where the image used by Lottie resides. You can also set whether to play in a loop. The default value is false. Here, because our scene is a startup page, there is no need for autoplay and looping.

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lottie_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="data.json"
            app:lottie_imageAssetsFolder="images/"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="35dp"/ > <! --app:lottie_loop="true"-- > <! --app:lottie_autoPlay="true"-->
Copy the code
  1. Set events in the Activity
private void setListener() {
        ValueAnimator animator = new ValueAnimator().ofFloat(0f, 1f).setDuration(3000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mBinding.lottieImageview.setProgress(Float.parseFloat (animation.getAnimatedValue().toString())); }}); animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                Logger.d("onAnimationStart");
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Logger.d("onAnimationEnd");
                goToMainActivity();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                Logger.d("onAnimationCancel");
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                Logger.d("onAnimationRepeat"); }}); animator.start(); }Copy the code

Combining ValueAnimator attribute animation here we LottieAnimationView. SetProgress () in 3 seconds to finish our animation, here is over. Limited ability, more advice.

After Effects animation and project code

  • The AE animation project has been posted to Github
  • The Android Lottie project code is the SplashActivity startup page for Mp3Cutter

Blog

If you are interested in the MP3 clipper project, there is a detailed introduction to the MP3 clipper Blog