Lottie-ios: Support Even-Odd Fill Rule

[ghost]

Archive.zip

[ghost]

Bodymovin's player animates properly, but Lottie SDK does not. Also tested with Squall and it looks great in the iOS renderer. Any ideas?

[therealsalih]

Hi Rkim! Just checked out your Ae file. Animation fill works properly but what Lottie doesnt support "Even-Odd" fill rule when you have multiple paths in a group with one fill

Thats why instead of seeing this

You're going to see this:

We're still working on that feature!

One temporary workaround is if you know your BG color to separate each of the cutouts into its own shape in its own group like this

[ghost]

@therealsalih, thanks for the feedback. Useful tip to know. My belief is that this may be a side effect of AE's Create shapes from Vector layers. My workflow is a bit complex and I'm curious what sort of work flow you folks use. Do you create the raw paths and vectors directly in AE?

My designer started from Sketch and my experimental workflow currently looks like this.
Sketch > export SVG
AI > import SVG > Release to Layers (Sequence) > rearrange layers as top-most > save file
AE > import saved AI > on each AI layer Create Shapes from Vector Layer.

If I skip Create Shapes from Vector Layer, bodymovin will export JSON + PNG images which I want to avoid. Any ideas?

[Audiobrad]

@rkim-homma I am using the same workflow. I find from time to time that sketch makes the vector files a lot more complex than they need to be and sometimes break in AE.

I will often spend some extra time in AI going though the layers and doing as much cleanup as possible. This typically entails getting rid of all of the container boxes and excess junk brought over from sketch so only the clean assets remain. I will also combine as many related shapes with the pathfinder tool.

If necessary, after converting the AI layers to shapes I'll use the Explode Shape Layers script from AE scripts to break up the layer and give me more control.

[therealsalih]

My workflow is similar.
Sometimes I go Sketch > PDF > AE (Create shapes from Vector Layer)
Yes there is extra container boxes and junk and sometimes depending on the complexity of the asset its easier to through deleting junk directly in AE.

Sometimes I do Sketch > PDF > AI (deleting junk in illustrator) > AE (Create shapes from Vector Layer)

And actually sometimes if there are things like circles and rectangles i'll remake some of those layers in AE to get some more control instead of just having paths for everything

Hopefully one day we can all have a better Sketch > AE workflow

[Audiobrad]

Interesting. I'll have to give the PDF route a shot. I agree. Looking forward to a better Sketch > AE workflow

[ghost]

@Audiobrad @therealsalih
Glad to hear my workflow wasn't too far off. I ended up re-drawing all of the vector paths in AI and imported them into AE without any use of odd-even fills. Works like a charm in the Lottie sample app.

Thanks!

[therealsalih]

Maybe Lottie will spur some genius sketch plugin writers to write a sketch > AE plugin... 🙏

[johnkeese]

The following process, while tedious, worked for me.

1. Start with text in Illustrator (you might be able to pull in stuff from Sketch as well?)
2. Outline the text
3. For each character that requires "Merged paths" when outlining in After Effects place a hidden cut. This is easiest using the knife tool.
4. Import AI file into After Effects and "Create Shapes from Vector Layer"

I've also run into issues using Pre-Comps. Seemed to work best when everything what in the root comp.

[wiille]

I drew my element from scratch in Illustrator and it did not work either, I dont think it is a sketch problem.

Thank you @johnkeese for your solution until the problem is solved. It works!

[buba447]

Should be fixed in Lottie 2.0! If you still have a problem please create a new issue!