转载

即刻APP收藏按钮的实现

前不久即刻更新到了2.0，整体 UI 虽然朴实了不少，但也不乏一些精致的效果，比如收藏按钮，效果如下，代码已上传 github

即刻APP收藏按钮的实现

实现这个效果需要三个元素

最下层利用 maskLayer 创造一个爱心形状的 View
中间层添加一个镂空的 ImageView 用于显示爱心边框
最上层需要一个用于显示填充动画的View

即刻APP收藏按钮的实现

maskLayer 这里就不过多介绍了，如果用代码创建一个爱心形状的 maskLayer 也未免太麻烦，虽然有 paintcode 这样的工具存在，所以直接用图片创建 maskLayer 是最佳方案：

- (void)setMaskImage:(UIImage *)maskImage{     _maskImage = maskImage;     if (!_maskLayer) {         self.maskLayer = [CALayer layer];         self.maskLayer.frame = CGRectMake(0,0, _maskImage.size.width, _maskImage.size.height);         self.layer.mask = _maskLayer;// 必须设置frame     }     self.maskLayer.contents = (id)[_maskImage CGImage]; }

这里也验证下即刻是用图片创建 maskLayer 的事实，从 ipa 包中提取 Assets.car 文件，实际上这个文件就是 Images.xcassets ，但是 Mac 上不能直接打开，所以就需要用到 ThemeEngine 工具，浏览里面的内容就可以找到：

即刻APP收藏按钮的实现

很显然第一张图片就是用于创建 maskLayer，另一张就是用于第二个元素的创建，只需要简单的添加一个 Iamgeview

- (void)setBorderImage:(UIImage *)borderImage{     _borderImage = borderImage;     if (!_borderImageView) {         self.borderImageView = [[UIImageView alloc] init];         self.borderImageView.frame = CGRectMake(0,0, _borderImage.size.width, _borderImage.size.height);         [self addSubview:_borderImageView];     }     self.borderImageView.image = _borderImage;     [self sendSubviewToBack:_borderImageView]; }

最后，利用 setFillColor 方法创建 fillView，设置 transform 来配合之后的动画

- (void)setFillColor:(UIColor *)fillColor{     _fillColor = fillColor;     if (!_fillView) {         self.fillView = [[UIView alloc] initWithFrame:self.bounds];         self.fillView.layer.cornerRadius = self.bounds.size.width * 0.5f;         self.fillView.transform = CGAffineTransformMakeScale(0, 0);         [self addSubview:_fillView];     }     self.fillView.backgroundColor = _fillColor; }