airbnb / lottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native
http://airbnb.io/lottie/
Apache License 2.0
35.02k stars 5.41k forks source link

lottie-android and lottie-web has different behavior. #2211

Closed Hawk-Song closed 1 year ago

Hawk-Song commented 1 year ago

I am using this json file as input: https://www.gstatic.com/quartz/broadcast/animations/DEFAULT/phase2.json

This animation has several sub animations, let's say they are A, B, C. A has 60s, B and C has 20s. On android, the B and C will stop after 20s, and A will continue to play until 60s. then they will repeat again. On web, the B and C will repeat immediately after 20s.

the android code:

    <com.airbnb.lottie.LottieAnimationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_rawRes="@raw/phase2"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

the web code:

<div style="width:1067px;height:600px" id="lottie"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('lottie'), 
    path: 'https://www.gstatic.com/quartz/broadcast/animations/DEFAULT/phase2.json', 
    renderer: 'html', 
    loop: true, 
    autoplay: true, 
    name: "Hello World", 
  })
</script>

How could I solve this problem ? Any response will be greatly appreciated! Thank you!

gpeal commented 1 year ago

@Hawk-Song This uses a loopOut() expression. Expressions aren't supported on Android.

"x": "var $bm_rt;\n$bm_rt = loopOut();"
Hawk-Song commented 1 year ago

Thank you!