即刻APP收藏按鈕的實現
來自： 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;
}
</code></code></div>
本文由用戶 hotangel 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！