Dynamic · Matte Layer

Matte Layer

You may add matte layers between elements just like this:

Or you may add masks above elements like this:

Now you can do it at SVGAPlayer V2.5.0.

Download Sample File

You can download a sample file from SVGA-Samples to try.

Step

Mask

1. Draw a pureColor layer;
2. Select the pureColor layer, add a mask above it;

Matte

1. Draw a pureColor layer;
2. Draw a masked shape layer;
3. Set the masked layer as a matte for the pureColor layer;

Dynamic Matte Layer

Download Sample File

You can download a sample file from SVGA-Samples to try.

Step

Load animation as usual.

// Setup a SVGAPlayer by yourself.
SVGAParser *parser = [[SVGAParser alloc] init];
[parser parseWithURL:[NSURL URLWithString:@"https://github.com/svga/SVGA-Samples/raw/master_aep/BitmapColorArea1.svga"] completionBlock:^(SVGAVideoEntity * _Nullable videoItem) {

} failureBlock:nil];

Setup replacing UIImage.

[...aPlayer setImage:iconImage forKey:@"matte_EEKdlEml.matte"];
// or
[...aPlayer setImageWithURL:[NSURL URLWithString: @"https://i.imgur.com/vd4GuUh.png"] forKey:@"matte_EEKdlEml.matte"];

ImageKey

The imageKey is the name of element, ask your designer tell you the element name.

For example, the layer element name is xck_basket, imageKey is xck_basket. The element should always use English name, do not use Chinese or Japanese etc.