即刻APP收藏按钮的实现
hotangel
9年前
来自: http://bawn.github.io/ios/2015/09/15/StarView.html
前不久即刻更新到了2.0,整体 UI 虽然朴实了不少,但也不乏一些精致的效果,比如收藏按钮,效果如下,代码已上传 github
实现这个效果需要三个元素
- 最下层利用 maskLayer 创造一个爱心形状的 View
- 中间层添加一个镂空的 ImageView 用于显示爱心边框
- 最上层需要一个用于显示填充动画的View
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 工具,浏览里面的内容就可以找到:
很显然第一张图片就是用于创建 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; }