模仿Yahoo 天气自定义降水量的雨滴效果

模仿Yahoo 天气自定义降水量的雨滴效果

1、第一种方法：

当然最简单的，直接使用几张图片，而且这种有不需要太精确，基本上准备11张图片就可以，我破解了Yahoo的天气app，发现里面有这种图片。类似于下面这种，所以我猜测他是使用图片实现的：

2、第二种方法：

使用CALayer的mask属性实现，如果你对mask不了解，可以参考下面的链接去看看：

1. http://stackoverflow.com/questions/9595479/adding-a-mask-with-calayers
2. http://stackoverflow.com/questions/5757386/how-to-mask-an-uiimageview
3. 关于使用CALayer中mask的一些技巧
4. http://stackoverflow.com/questions/25738296/particular-shape-image-on-uiimageview
5. https://www.raywenderlich.com/2502/calayers-tutorial-for-ios-introduction-to-calayers-tutorial
   

使用上面三个图片就可以实现我们的效果，如下所示，不要关注背景的红色，那是我调试设置的：

具体实现：
1. 先自定义一个UIPrecipitationRaindropView继承自View
2. 把第一张图片作为一个UIImageView放在底部
3. 把第二张图片也作为一个UIImageView，放在第一个imageView上面
4. 把第三张图，设置为一个CALayer的contents,这里一定要设置CALayer的bounds属性
5. 然后就是根据雨量大小，调整CALayer的位置了。
具体代码如下：

- (void)initializeUI{    self.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];    //背景，第一张图    UIImageView* raindropImgView = ({        UIImageView* imgView = [[UIImageView alloc]init];        UIImage* img = [UIImage imageNamed:@"raindrop"];        imgView.image = img;        [self addSubview:imgView];        [imgView mas_makeConstraints:^(MASConstraintMaker *make) {            make.edges.equalTo(self);        }];        imgView;    });    self.raindropImgView = raindropImgView;    //遮罩，第三张图    CALayer* maskLayer = [CALayer layer];    UIImage* mask = [UIImage imageNamed:@"wave2"];    maskLayer.contents = (id)mask.CGImage;    maskLayer.bounds = CGRectMake(0, 0, mask.size.width, mask.size.height);//    maskLayer.frame = CGRectMake(0, 30, mask.size.width, mask.size.height);    maskLayer.anchorPoint = CGPointMake(0.5, 0);    self.maskLayer = maskLayer;    //雨滴，第二张图    UIImageView* raindropBlueImgView = ({        UIImageView* imgView = [[UIImageView alloc]init];        imgView.image = [UIImage imageNamed:@"raindrop_blue"];        imgView.layer.mask = maskLayer;        imgView.layer.masksToBounds = YES;//        [imgView.layer addSublayer:maskLayer];        [self addSubview:imgView];        [imgView mas_makeConstraints:^(MASConstraintMaker *make) {            make.edges.equalTo(self);        }];        imgView;    });    maskLayer.position = CGPointMake(raindropBlueImgView.intrinsicContentSize.width*0.5, raindropBlueImgView.intrinsicContentSize.height);    [self bringSubviewToFront:raindropImgView];    MASAttachKeys(raindropImgView, raindropBlueImgView);}