search

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

Alpha channel not applied to the layer with mode=Multiply #2306

Closed mateuszkwiecinski closed 1 year ago

mateuszkwiecinski commented 1 year ago

Checklist

  1. My animation doesn't use any unsupported features.

I don't know for sure, but it works on web and iOS and I don't believe this relies on Skew transformation

  1. I know what part of my animation doesn't work.

I know ✅

  1. I have created a simplified version of my animation

I did ✅

  1. I have attached the AEP file (as a zip file, so it can be attached) that only has the part of the animation that doesn't work.

I did ✅

Describe the bug AEP: repro.aep.zip Animation JSON: repro.json.zip

The following animation renders differently on Android when compared with Web and iOS clients (see screenshot below)

I hope there isn't an obvious reason why this doesn't work. I tried to go through the documentation, but I quickly get lost in what layer or shape means in the context. This is the first time I see Adobe After Effect software 😅

What version of Lottie did you test this on? 5.0.1

What version of Android did you test this on? API level 26 and 33

Steps To Reproduce Steps to reproduce the behavior: I'm not sure how this is unique 🤷 I haven't created the resource, and I don't see anything obvious there. I don't see any transition or anything like that applied. I tried shooting in the dark and used the Merge Paths and Apply Opacity to Layers option, but I don't see any difference in how the animation behaves 👀

Screenshots

Web & iOS Android
image image
mateuszkwiecinski commented 1 year ago

After another round of debugging, it looks like the not-working part is the Mode=Multiply toggle? image

but again, I'm shooting in the dark. I'm just clicking random stuff in After Effect and see what happens 😅

The documentation seems to mention Multiply mode once: https://airbnb.io/lottie/#/after-effects?id=no-blending-modes-or-luma-mattes as a limitation of BodyMovin plugin, which doesn't seem to be applicable here since a) I used the "LottieFiles for After Effects" plugin, b) the animation works on iOS (which I interpreted as "it exports correctly).

gpeal commented 1 year ago

@mateuszkwiecinski the Lottiefiles plugin just wraps the bodymovin plugin so the limitations are the same. My guess is that iOS actually isn't rendering this correctly but may be failing more gracefully.

mateuszkwiecinski commented 1 year ago

Thanks for reply 🙏 Here's a recording from iOS demo app:

https://github.com/airbnb/lottie-android/assets/36954793/c236950a-7f76-4a19-a755-01f9d9204d14

Looks like iOS fully supports the feature, as the result is exactly the same as on Web client.

Also, one thing I realized I don't fully get: if this is a bodymovin limitation, why would other platforms (Web & iOS) handle the same output resource correctly, shouldn't After Effect's plugin limitation affect all platforms? 🤔

gpeal commented 1 year ago

Duplicate of #1055