Not long ago immediately updated to 2.0, the overall UI although a lot of simple, but there are also some exquisite effects, such as the collection button, the effect is as follows, the code has been uploaded to Github

Three elements are required to achieve this effect

  1. The lowest layer uses maskLayer to create a View in the shape of a heart
  2. Add a hollowed-out ImageView to the middle layer to show the heart border
  3. The top layer needs a View to display the fill animation

Creating a maskLayer with the shape of a heart is too much trouble. Although paintcode is available, creating a maskLayer with an image is the best solution:

- (void)setMaskImage:(UIImage *)maskImage{ _maskImage = maskImage; if (! _maskLayer) { self.maskLayer = [CALayer layer]; Self.masklayer. frame = CGRectMake(0,0, _maskimage.sie.width, _maskimage.sie.height); self.layer.mask = _maskLayer; // Frame} self.masklayer.contents = (id)[_maskImage CGImage]; }Copy the code

To verify that maskLayer is created using an image, extract the assets. car file from the IPA package, which is actually images. xcassets. Browse through the contents to find:

Obviously, the first image is used to create the maskLayer and the other is used to create the second element, simply by adding an Imageview

- (void)setBorderImage:(UIImage *)borderImage{ _borderImage = borderImage; if (! _borderImageView) { self.borderImageView = [[UIImageView alloc] init]; Self. BorderImageView. Frame = CGRectMake (0, 0, _borderImage. Size. Width, _borderImage. The size, height); [self addSubview:_borderImageView]; } self.borderImageView.image = _borderImage; [self sendSubviewToBack:_borderImageView]; }Copy the code

Finally, the fillView is created using the setFillColor method and the Transform is set to match the subsequent animation

- (void)setFillColor:(UIColor *)fillColor{ _fillColor = fillColor; if (! _fillView) { self.fillView = [[UIView alloc] initWithFrame:self.bounds]; Self. FillView. Layer. The cornerRadius = self. Bounds. Size. The width * 0.5 f; self.fillView.transform = CGAffineTransformMakeScale(0, 0); [self addSubview:_fillView]; } self.fillView.backgroundColor = _fillColor; }Copy the code