麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 學院 > 開發設計 > 正文

利用layer的mask屬性實現逐漸揭示的動畫效果

2019-11-14 18:42:38
字體:
來源:轉載
供稿:網友

github上又看到個不錯的動畫(https://github.com/rounak/RJImageLoader),如圖:
所以就想來自己實現以下
不試不知道,這個動畫還真不是看上去那么簡單,我自己想了半天愣是沒做出來,最后還是看了作者的代碼,才知道怎么實現。
不過也從作者哪兒學了一招,就是layer.mask的用法。
自己實現的效果如圖:
(前面的畫圓的動畫,這是一個CAShaperLayer修改其strokeEnd的動畫,比較簡單,就沒有再寫了)
 
 
 
這個動畫說難也不難,其關鍵就在于對layer.mask的特性的運用,如果你不知道layer.mask的特性,那實現起來就相當困難了;相反,如果知道,那思路就豁然開朗了。
關鍵就是這個:
 
 /* A layer whose alpha channel is used as a mask to select between the
 * layer's background and the result of compositing the layer's
 * contents with its filtered background. Defaults to nil. When used as
 * a mask the layer's `compositingFilter' and `backgroundFilters'
 * PRoperties are ignored. When setting the mask to a new layer, the
 * new layer must have a nil superlayer, otherwise the behavior is
 * undefined. Nested masks (mask layers with their own masks) are
 * unsupported. */
@property(strong) CALayer *mask;
 
mask屬性,可以實現很多形狀的遮罩,其基本效果是:
比如layerA是layerB的mask,即layerB.mask = layerA;
那么layerA上透明的部分,會被繪制成白色擋住layerB(貌似都是白色,不知道能不能弄成其他顏色);
layerA上不透明的部分,會被繪制成透明,顯示出layerB的內容。
 
2015-09-07更新
之前理解錯誤,mask不是遮罩,不是add到layer上的另一個layer,而是控制layer本身渲染的一個layer。
效果是:比如imageLayer有一個maskLayer作為mask(注意maskLayer可以不跟imageLayer大小一樣),
那maskLayer透明的地方,imageLayer就不會渲染,而是變透明,顯示出imageLayer之后的內容,
maskLayer不透明的地方,imageLayer就會正常渲染,顯示出imageLayer本來的內容
如果maskLayer比imageLayer要小,那默認的maskLayer之外的地方都是透明的,都不會渲染。
 
注意:作為mask的layer不能有superLayer或者subLayer!
 
知道了這個,動畫的思路就有了:
imageView上有個遮罩,遮罩透明的部分逐漸變大,向外向內同時擴展,使遮罩后面的圖片爆料出來。
 
這里首先需要一個圓形的CAShapeLayer,還需要兩個動畫,使這個layer同時向內向外擴展。
那么問題來了,只有一個layer,還不能有subLayer,怎么讓它同時又變大又變小呢?
答案是:換個方式。
 
 
注意CAShapeLayer是線畫出來,線也有顏色,還有寬度是 lineWidth,而且這些屬性也是可以動畫的。
所以最終的方案是:設置圓的線的顏色為透明,圓的填充色為不透明,園外的顏色不透明(這里的設置指的是看到的效果),讓圓逐漸變大到可以顯示出整個view,同時讓圓的lineWidth逐漸變寬到圓的半徑那么大。
看到的效果就是圖片像上面的效果一樣逐漸顯露出來了。
 
核心動畫代碼如下:
- (void)reveal {
    self.backgroundColor = [UIColor clearColor];
    [self.circleLayer removeFromSuperlayer];//理論上作為mask的layer不能有父layer,所以要remove掉
    self.superview.layer.mask = self.circleLayer;
   
    //讓圓的變大的動畫
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    UIBezierPath *toPath = [self pathWithDiameter:self.bigDiameter];
    //    UIBezierPath *toPath = [self pathWithDiameter:0];//縮小當前path的動畫
    pathAnimation.toValue = (id)toPath.CGPath;
    pathAnimation.duration = 1.0;
 
   
    //讓圓的線的寬度變大的動畫,效果是內圓變小
    CABasicAnimation *lineWidthAnimation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(lineWidth))];
    lineWidthAnimation.toValue = @(self.bigDiameter);
    lineWidthAnimation.duration = 1.0;
   
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[pathAnimation, lineWidthAnimation];
    group.duration = 1.0;
    group.removedOnCompletion = NO;//這兩句的效果是讓動畫結束后不會回到原處,必須加
    group.fillMode = kCAFillModeForwards;//這兩句的效果是讓動畫結束后不會回到原處,必須加
    group.delegate = self;
   
    [self.circleLayer addAnimation:group forKey:@"revealAnimation"];
}
 
/**
 *  根據直徑生成圓的path,注意圓點是self的中心點,所以(x,y)不是(0,0)
 */
- (UIBezierPath *)pathWithDiameter:(CGFloat)diameter {
    return [UIBezierPath bezierPathWithOvalInRect:CGRectMake((CGRectGetWidth(self.bounds) - diameter) / 2, (CGRectGetHeight(self.bounds) - diameter) / 2, diameter, diameter)];
}


#pragma mark - CAAnimationDelegate

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    self.superview.layer.mask = nil;
    [self removeFromSuperview];
}


#pragma mark - property

- (CAShapeLayer *)circleLayer {
    if (!_circleLayer) {
        _circleLayer = [CAShapeLayer layer];
        _circleLayer.fillColor = [UIColor clearColor].CGColor;//這個必須透明,因為這樣內圓才是不透明的
        _circleLayer.strokeColor = [UIColor yellowColor].CGColor;//注意這個必須不能透明,因為實際上是這個顯示出后面的圖片了
        _circleLayer.path = [self pathWithDiameter:self.smallDiameter].CGPath;
    }
    return _circleLayer;
}
 
有什么錯誤歡迎批評指正 
 

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 久久精品国产精品亚洲 | 香蕉国产9 | 国产精品99久久久久久宅女 | 夜夜夜精品视频 | 天海翼无删减av三级在线观看 | 77成人影院 | 欧美日韩亚洲另类 | 久久亚洲春色中文字幕久久 | 91精品久久香蕉国产线看观看 | 色婷婷久久久久久 | 欧美一级高潮片免费的 | 国产成人av一区二区 | 羞羞答答xxdd在线播放 | 国产精品久久久久久久久久久久久久久久 | 国产一级在线看 | 精品国产一区二区久久 | 国产精品自拍99 | 一级黄色影片在线观看 | 全视频tv | 成年人视频在线免费播放 | 九九热精品在线播放 | 欧美一级黄视频 | 国产高清自拍一区 | 久久国产精| 一区二区三区欧美在线观看 | 日本黄色免费观看视频 | 成人精品免费在线观看 | 亚洲国产综合在线观看 | 激情亚洲网 | 91久久久久久久一区二区 | 久久精品亚洲国产奇米99 | 国内精品国产三级国产a久久 | 在线高清中文字幕 | 国产精品免费久久久久 | 欧美成年人视频在线观看 | 国产日韩在线视频 | 国产精品免费久久久久 | 成人精品aaaa网站 | 热re91久久精品国产99热 | 欧美伦理一区二区 | 在线播放免费人成毛片乱码 |