工作中有一个需求，就是一个水波扩散动画扫描之后，再把collectionView偏移动画一下，具体效果看下图：

RPReplay_Final1640223028.gif

实现

• 先自定义一个视图继承UIView
• 在-(void)drawRect:(CGRect)rect方法中实现动画效果
• 创建N个CALayer 添加不同时间段的动画，在循环创建中，设置动画时间不同
• 在中间位置添加视图，在上面放入头像做一个缩放动画效果
• 然后scrollView做一个动画偏移的效果

主要的功能点代码

//创建缩放动画
 CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = @1;
    scaleAnimation.toValue = @(3.832);
    scaleAnimation.beginTime = CACurrentMediaTime() + (double)(index * 3) / self.circleIncrement;
    scaleAnimation.duration = 3;
    scaleAnimation.repeatCount = HUGE;// 重复次数设置为无限

//创建CALayer
 CALayer *pulsingLayer = [CALayer layer];
    pulsingLayer.borderWidth = 0.5;
    pulsingLayer.borderColor = [UIColor colorWithDynamicLight:[UIColor colorWithHexString:@"#E1EBF5"] dark:[UIColor colorWithHexString:@"#3C3C3E"]].CGColor;
    pulsingLayer.frame = CGRectMake((rect.size.width - PtOnIPhone6(60))/2, (rect.size.height - PtOnIPhone6(60))/2, PtOnIPhone6(60), PtOnIPhone6(60));
    pulsingLayer.cornerRadius = PtOnIPhone6(30);
    [pulsingLayer addAnimation:animation forKey:@"plulsing"];

//scrollView 偏移动画，这里会存在一个问题，如果内部那个动画设置的时间过长可能会导致回弹时cell消失的效果
  [UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionLayoutSubviews|UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{
            [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.9 animations:^{
                [self.cardCollectionVIew setContentOffset:CGPointMake(80, 0) animated:false];
            }];
            [UIView addKeyframeWithRelativeStartTime:0.9 relativeDuration:0.2 animations:^{
                [self.cardCollectionVIew setContentOffset:CGPointMake(0, 0) animated:false];
            }];
        } completion:^(BOOL finished) {
            //Completion Block
        }];

//UIlabel 加载HTML 这里有个问题 后台返回的直接加载的话，默认其他的颜色为黑色，如果你想改变其他的颜色需要在前边加一个标签包裹起来处理，我们后台返回的是格式是：已有<font color='#0A84FF'>986808</font>人参加测评
  NSString *htmlString = weakSelf.viewModel.testIndexModel.tips;
        htmlString = [NSString stringWithFormat:@"<span style='color:#999999'>%@</span>",htmlString];
        NSAttributedString *attributedString = [[NSAttributedString alloc] initWithData:[htmlString dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType} documentAttributes:nil error:nil];
        weakSelf.tipLabel.attributedText = attributedString;

//添加随机头像，判断随机的点是否与中间的视图fram交叉，有就重新随机,其中205是随机的安全距离 整个父视图的宽减去随机头像的宽

    NSInteger arcRectX = arc4random()%205;
    NSInteger arcRectY = arc4random()%205;
    
    UIImageView *pointImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, PtOnIPhone6(25),PtOnIPhone6(25))];
    pointImage.layer.cornerRadius = PtOnIPhone6(12.5);
    pointImage.layer.masksToBounds = true;
    
    CGRect rect = CGRectMake(arcRectX, arcRectY, PtOnIPhone6(25), PtOnIPhone6(25));
    CGRect iconRect = CGRectMake(PtOnIPhone6(170)/2, PtOnIPhone6(170)/2, PtOnIPhone6(60), PtOnIPhone6(60));
    if (CGRectIntersectsRect(rect, iconRect)) {
        NSLog(@"重叠了-----%@---%@",NSStringFromCGRect(rect),NSStringFromCGRect(iconRect));
        [self addPointView];
        return;
    }