iOS 实现波纹Mask动画

先给大家看看最终呈现的效果图

层级介绍

WechatIMG119.jpeg

代码实现

//
//  ViewController.m
//  BB
//
//  Created by lyon Liu on 2018/3/1.
//  Copyright © 2018年 lyon Liu. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *hollowImageView;

@property (weak, nonatomic) IBOutlet UIImageView *soildImageView;

@property (weak, nonatomic) IBOutlet UIView *bgView;
@property (strong, nonatomic) UIView *waveView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    UIImage *soildImage = [UIImage imageNamed:@"icon_love_solid"];//实心图片
    UIImage *waveImage = [UIImage imageNamed:@"icon_love_wave"];    //波浪图片

    //让波浪在心形图片中间
    self.bgView.frame = CGRectMake(0, self.soildImageView.frame.origin.y + 25, self.view.frame.size.width, waveImage.size.height);
    self.waveView = [UIView new];
    self.waveView.backgroundColor = [UIColor colorWithPatternImage:waveImage];
    self.waveView.frame = self.bgView.bounds;
    [self.bgView addSubview:self.waveView];

    //将实心图片作为遮罩层
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = CGRectMake(0, 0, soildImage.size.width, soildImage.size.height);
    maskLayer.position = CGPointMake(self.waveView.center.x, 21);
    maskLayer.contents = (id)(soildImage.CGImage);
    self.bgView.layer.mask = maskLayer;

    //开始做动画
    __block NSInteger maxValue = 0;
    [NSTimer scheduledTimerWithTimeInterval:0.02 repeats:YES block:^(NSTimer * _Nonnull timer) {
        CGRect frame = self.waveView.frame;
        //当最大值大于等于最大宽度时，还原位置
        maxValue +=2;
        if (maxValue >= waveImage.size.width) {
            maxValue = 0;
        }
        frame.origin.x = maxValue;
        self.waveView.frame = frame;
    }];
    
    //这个是小星星不停的波纹中冲击
    [NSTimer scheduledTimerWithTimeInterval:0.5 repeats:YES block:^(NSTimer * _Nonnull timer) {
        UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_love_small"]];
        CGRect frame = imageView.frame;
        frame.origin.x = 300;
        frame.origin.y = 350;
        imageView.frame = frame;
        [self.view insertSubview:imageView belowSubview:self.soildImageView];
        [UIView animateWithDuration:1.5 animations:^{
            CGRect frame = imageView.frame;
            frame.origin.x = self.soildImageView.center.x;
            frame.origin.y = 320;
            imageView.frame = frame;
        }completion:^(BOOL finished) {
            [imageView removeFromSuperview];
        }];
    }];
}

@end