工作中有一个需求,就是一个水波扩散动画扫描之后,再把collectionView偏移动画一下,具体效果看下图:
实现
- 先自定义一个视图继承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;
}