首页 >苹果相关

即刻APP收藏按钮的实现

2018-02-08 10:21 编辑: 枣泥布丁 分类:苹果相关 来源:Bawn

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

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

  1. 最下层利用 maskLayer 创造一个爱心形状的 View

  2. 中间层添加一个镂空的 ImageView 用于显示爱心边框

  3. 最上层需要一个用于显示填充动画的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,另一张就是用于第二个元素的创建,只需要简单的添加一个 Imageview

- (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;
}
搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:一大波新emoji即将来袭 你可能会在iOS 12上看到它们
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部