即刻APP收藏按鈕的實現

前不久即刻更新到了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，另外一張就是用於第二個元素的建立，只須要簡單的添加一個 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;
}