iOS-各种动画特效



661F567F-3399-4227-ACCD-3C0FB6EB966D.png

一、实现功能

  • 1. 广播跑马灯

  • 2. 弹幕动画

  • 3. 直播点赞动画

  • 4. 直播点赞图片动画

  • 5. 烟花动画

  • 6. 雪花动画

二、程序实现

1. 广播动画特效:

思路:

1. 初始化广播视图

2. 设置广播公告广告内容

3. 添加动画效果


初始化广播视图, 广播活动标题按钮 与 广播活动标题标签 控件大小一样

[cpp]  view plain  copy
  1. /** 
  2.  * 设置广播视图 
  3.  */  
  4. - (void)setupBroadcastingView {  
  5.     // 设置广播活动标题按钮  
  6.     UIButton *activityBtn = [UIButton buttonWithType:UIButtonTypeCustom];  
  7.     activityBtn.frame = CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, 30);  
  8.     activityBtn.backgroundColor = [UIColor clearColor];  
  9.     [activityBtn addTarget:self action:@selector(activityDetail) forControlEvents:UIControlEventTouchUpInside];  
  10.     [self.view addSubview:activityBtn];  
  11.     self.activityBtn = activityBtn;  
  12.       
  13.     // 设置广播活动标题文字  
  14.     UILabel *activityLb = [[UILabel alloc] init];  
  15.     activityLb.frame = activityBtn.bounds;  
  16.     [activityLb setFont:[UIFont boldSystemFontOfSize:14]];  
  17.     [activityLb setTextColor:[UIColor colorWithRed:115/255.0 green:125/255.0 blue:134/255.0 alpha:1.0]];  
  18.     [activityLb setBackgroundColor:[UIColor clearColor]];  
  19.     [activityBtn addSubview:activityLb];  
  20.     self.activityLb = activityLb;  
  21.       
  22.     // 设置广播logo  
  23.     UIImageView *speaker = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"broadcasting"]]];  
  24.     speaker.frame = CGRectMake(0, 5, 20, 20);  
  25.     speaker.backgroundColor = self.view.backgroundColor;  
  26.     [activityBtn addSubview:speaker];  
  27.       
  28.     // 设置广播公告广告内容  
  29.     [self setActivityButtonTitle];  
  30. }  

设置广播公告广告内容, 这里是以假数据填充,一般需求会是后台请求得来的活动内容.

添加动画效果: 当文字内容超过显示区域就滚动展示,未超过则居中展示.

[cpp]  view plain  copy
  1. /** 
  2.  * 设置广播公告广告内容 
  3.  */  
  4. - (void)setActivityButtonTitle {  
  5.       
  6.     // 广播公告广告内容(假数据)  
  7.     NSString *title = @"广播公告广告内容(ZL测试内容)广播公告广告内容(测试内容)\r\n广播公告广告内容(测试内容)广播公告广告内容(测试内容)广播公告广告内容(测试内容)";  
  8.       
  9.     title = [title stringByReplacingOccurrencesOfString:@"\r\n" withString:@" "];  
  10.       
  11.     [self.activityLb setText:title];  
  12.       
  13.     [self.activityLb sizeToFit];  
  14.       
  15.     if (self.activityLb.frame.size.width <= self.activityBtn.frame.size.width) {  
  16.           
  17.         [self.activityLb setCenter:CGPointMake(self.activityBtn.frame.size.width/2, self.activityBtn.frame.size.height/2)];  
  18.           
  19.     } else { // 当文字内容超过显示区域就滚动展示  
  20.           
  21.         CGRect frame = self.activityLb.frame;  
  22.         frame.origin.x = self.activityBtn.frame.size.width;  
  23.         frame.origin.y = self.activityBtn.frame.size.height * 0.5 - self.activityLb.bounds.size.height * 0.5;  
  24.         self.activityLb.frame = frame;  
  25.           
  26.         [UIView beginAnimations:@"testAnimation" context:NULL];  
  27.         [UIView setAnimationDuration:frame.size.width/55.f];  
  28.         [UIView setAnimationCurve:UIViewAnimationCurveLinear];  
  29.         [UIView setAnimationRepeatAutoreverses:NO];  
  30.         [UIView setAnimationRepeatCount:INT_MAX];  
  31.           
  32.         frame = self.activityLb.frame;  
  33.         frame.origin.x = - frame.size.width;  
  34.         self.activityLb.frame = frame;  
  35.         [UIView commitAnimations];  
  36.     }  
  37. }  

当有活动链接时,需要添加点击效果; 如果没则不需要创建按钮及点击效果.

[cpp]  view plain  copy
  1. // 展示活动详情  
  2. - (void)activityDetail {  
  3.       
  4.     NSLog(@"点击了广播活动公告详情");  
  5. }  

广播跑马灯.gif



2. 弹幕动画特效:

先自定义弹幕标签ZLScrollLabelView:

.h 文件露出开始/停止/暂停/恢复弹幕动画

[cpp]  view plain  copy
  1. @interface ZLScrollLabelView : UIView  
  2. // 代理协议  
  3. @property (nonatomic, weak) id <ZLScrollLabelViewDelegate> delegate;  
  4. // 速度  
  5. @property (nonatomic) CGFloat speed;  
  6. // 方向  
  7. @property (nonatomic) ScrollDirectionType barrageDirection;  
  8. // 容器  
  9. - (void)addContentView:(UIView *)view;  
  10. // 开始  
  11. - (void)startAnimation;  
  12. // 停止  
  13. - (void)stopAnimation;  
  14. // 暂停  
  15. - (void)pauseAnimation;  
  16. // 恢复  
  17. - (void)resumeAnimation;  
  18. @end  

.m 文件初始化:

[cpp]  view plain  copy
  1. - (instancetype)initWithFrame:(CGRect)frame {  
  2.       
  3.     if (self = [super initWithFrame:frame]) {  
  4.           
  5.         _width = frame.size.width;  
  6.         _height = frame.size.height;  
  7.           
  8.         self.speed = 1.f;  
  9.         self.barrageDirection = FromLeftType;  
  10.         self.layer.masksToBounds = YES;  
  11.         self.animationView = [[UIView alloc] initWithFrame:CGRectMake(_width, 0, _width, _height)];  
  12.         [self addSubview:self.animationView];  
  13.     }  
  14.       
  15.     return self;  
  16. }  
  17. - (void)addContentView:(UIView *)view {  
  18.       
  19.     [_contentView removeFromSuperview];  
  20.       
  21.     view.frame = view.bounds;  
  22.     _contentView = view;  
  23.     self.animationView.frame = view.bounds;  
  24.     [self.animationView addSubview:_contentView];  
  25.       
  26.     _animationViewWidth = self.animationView.frame.size.width;  
  27.     _animationViewHeight = self.animationView.frame.size.height;  
  28. }  

开始弹幕动画:

[cpp]  view plain  copy
  1. - (void)startAnimation {  
  2.       
  3.     [self.animationView.layer removeAnimationForKey:@"animationViewPosition"];  
  4.     _stoped = NO;  
  5.       
  6.     CGPoint pointRightCenter = CGPointMake(_width + _animationViewWidth / 2.f, _animationViewHeight / 2.f);  
  7.     CGPoint pointLeftCenter  = CGPointMake(-_animationViewWidth / 2, _animationViewHeight / 2.f);  
  8.     CGPoint fromPoint = self.barrageDirection == FromLeftType ? pointRightCenter : pointLeftCenter;  
  9.     CGPoint toPoint = self.barrageDirection == FromLeftType ? pointLeftCenter  : pointRightCenter;  
  10.       
  11.     self.animationView.center = fromPoint;  
  12.     UIBezierPath *movePath = [UIBezierPath bezierPath];  
  13.     [movePath moveToPoint:fromPoint];  
  14.     [movePath addLineToPoint:toPoint];  
  15.       
  16.     CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  17.     moveAnimation.path = movePath.CGPath;  
  18.     moveAnimation.removedOnCompletion = YES;  
  19.     moveAnimation.duration = _animationViewWidth / 30.f * (1 / self.speed);  
  20.     moveAnimation.delegate = self;  
  21.     [self.animationView.layer addAnimation:moveAnimation forKey:@"animationViewPosition"];  
  22. }  

停止弹幕动画:

[cpp]  view plain  copy
  1. - (void)stopAnimation {  
  2.       
  3.     _stoped = YES;  
  4.     [self.animationView.layer removeAnimationForKey:@"animationViewPosition"];  
  5. }  
  6.   
  7. - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {  
  8.       
  9.     if (self.delegate && [self.delegate respondsToSelector:@selector(barrageView:animationDidStopFinished:)]) {  
  10.           
  11.         [self.delegate barrageView:self animationDidStopFinished:flag];  
  12.     }  
  13.       
  14.     if (flag && !_stoped) {  
  15.           
  16.         [self startAnimation];  
  17.     }  
  18. }  

暂停弹幕动画:

[cpp]  view plain  copy
  1. - (void)pauseAnimation {  
  2.       
  3.     [self pauseLayer:self.animationView.layer];  
  4. }  
  5.   
  6. - (void)pauseLayer:(CALayer*)layer {  
  7.       
  8.     CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];  
  9.     layer.speed = 0.0;  
  10.     layer.timeOffset = pausedTime;  
  11. }  

恢复弹幕动画:

[cpp]  view plain  copy
  1. - (void)resumeAnimation {  
  2.       
  3.     [self resumeLayer:self.animationView.layer];  
  4. }  
  5.   
  6. - (void)resumeLayer:(CALayer*)layer {  
  7.       
  8.     CFTimeInterval pausedTime = layer.timeOffset;  
  9.     layer.speed = 1.0;  
  10.     layer.timeOffset = 0.0;  
  11.     layer.beginTime = 0.0;  
  12.     CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;  
  13.     layer.beginTime = timeSincePause;  
  14. }  

在所需控制器里, 添加代理ZLScrollLabelViewDelegate实现开始动画方法

[cpp]  view plain  copy
  1. - (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     self.navigationItem.title = @"弹幕动画";  
  4.     self.view.backgroundColor = [UIColor grayColor];  
  5.       
  6.     ZLScrollLabelView *barrageView0 = [[ZLScrollLabelView alloc] initWithFrame:CGRectMake(0, 104, self.view.frame.size.width, 20)];  
  7.     barrageView0.delegate = self;  
  8.     // add  
  9.     [self.view addSubview:barrageView0];  
  10.     // text  
  11.     [barrageView0 addContentView:[self createLabelWithText:@"超喜欢赵丽颖,只因她的踏实!"  
  12.                                                      textColor:[self randomColor]]];  
  13.     // start  
  14.     [barrageView0 startAnimation];  
  15. }  

代理ZLScrollLabelViewDelegate:

[cpp]  view plain  copy
  1. - (UILabel *)createLabelWithText:(NSString *)text textColor:(UIColor *)textColor {  
  2.       
  3.     NSString *string = [NSString stringWithFormat:@" %@ ", text];  
  4.     CGFloat width = [string widthWithStringAttribute:@{NSFontAttributeName : [UIFont systemFontOfSize:14.f]}];  
  5.     UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, 20)];  
  6.     label.font = [UIFont systemFontOfSize:14.f];  
  7.     label.text = string;  
  8.     label.textColor = textColor;  
  9.     return label;  
  10. }  
  11.   
  12. #pragma mark - ZLScrollLabelViewDelegate  
  13.   
  14. - (void)barrageView:(ZLScrollLabelView *)barrageView animationDidStopFinished:(BOOL)finished {  
  15.       
  16.     [barrageView stopAnimation];  
  17.     dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{  
  18.         [barrageView addContentView:[self createLabelWithText:[self randomString]  
  19.                                                         textColor:[self randomColor]]];  
  20.         [barrageView startAnimation];  
  21.     });  
  22. }  
  23.   
  24. - (NSString *)randomString {  
  25.       
  26.     NSArray *array = @[@"猜猜我是谁?",  
  27.                        @"哈哈",  
  28.                        @"猜不着吧",  
  29.                        @"我是程序媛",  
  30.                        @"噜啦啦啦啦~"];  
  31.     return array[arc4random() % array.count];  
  32. }  

弹幕动画.gif


3. 直播点赞效果

先自定义ZLLiveHeartView,露出liveHeartAnimateInView方法:

[cpp]  view plain  copy
  1. - (void)liveHeartAnimateInView:(UIView *)view {  
  2.       
  3.     NSTimeInterval totalAnimationDuration = 8;  
  4.     CGFloat heartSize = CGRectGetWidth(self.bounds);  
  5.     CGFloat heartCenterX = self.center.x;  
  6.     CGFloat viewHeight = CGRectGetHeight(view.bounds);  
  7.       
  8.     // Pre-Animation setup  
  9.     self.transform = CGAffineTransformMakeScale(0, 0);  
  10.     self.alpha = 0;  
  11.       
  12.     // Bloom  
  13.     [UIView animateWithDuration:0.5 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveEaseOut animations:^{  
  14.         self.transform = CGAffineTransformIdentity;  
  15.         self.alpha = 0.9;  
  16.     } completion:NULL];  
  17.       
  18.     NSInteger i = arc4random_uniform(2);  
  19.     // -1 OR 1  
  20.     NSInteger rotationDirection = 1 - (2 * i);  
  21.     NSInteger rotationFraction = arc4random_uniform(10);  
  22.     [UIView animateWithDuration:totalAnimationDuration animations:^{  
  23.         self.transform = CGAffineTransformMakeRotation(rotationDirection * M_PI / (16 + rotationFraction * 0.2));  
  24.     } completion:NULL];  
  25.       
  26.     UIBezierPath *heartTravelPath = [UIBezierPath bezierPath];  
  27.     [heartTravelPath moveToPoint:self.center];  
  28.       
  29.     // random end point  
  30.     CGPoint endPoint = CGPointMake(heartCenterX + (rotationDirection) * arc4random_uniform(2 * heartSize), viewHeight/6.0 + arc4random_uniform(viewHeight / 4.0));  
  31.       
  32.     // random Control Points  
  33.     NSInteger j = arc4random_uniform(2);  
  34.     NSInteger travelDirection = 1- (2*j);  
  35.       
  36.     // randomize x and y for control points  
  37.     CGFloat xDelta = (heartSize/2.0 + arc4random_uniform(2*heartSize)) * travelDirection;  
  38.     CGFloat yDelta = MAX(endPoint.y ,MAX(arc4random_uniform(8*heartSize), heartSize));  
  39.     CGPoint controlPoint1 = CGPointMake(heartCenterX + xDelta, viewHeight - yDelta);  
  40.     CGPoint controlPoint2 = CGPointMake(heartCenterX - 2*xDelta, yDelta);  
  41.       
  42.     [heartTravelPath addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];  
  43.       
  44.     CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  45.     keyFrameAnimation.path = heartTravelPath.CGPath;  
  46.     keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  47.     keyFrameAnimation.duration = totalAnimationDuration + endPoint.y/viewHeight;  
  48.     [self.layer addAnimation:keyFrameAnimation forKey:@"positionOnPath"];  
  49.       
  50.     // Alpha & remove from superview  
  51.     [UIView animateWithDuration:totalAnimationDuration animations:^{  
  52.         self.alpha = 0.0;  
  53.     } completion:^(BOOL finished) {  
  54.         [self removeFromSuperview];  
  55.     }];  
  56.       
  57. }  
[cpp]  view plain  copy
  1. - (void)drawRect:(CGRect)rect {  
  2.       
  3.     [_strokeColor setStroke];  
  4.     [_fillColor setFill];  
  5.       
  6.     CGFloat drawingPadding = 4.0;  
  7.     CGFloat curveRadius = floor((CGRectGetWidth(rect) - 2*drawingPadding) / 4.0);  
  8.       
  9.     // Creat path  
  10.     UIBezierPath *heartPath = [UIBezierPath bezierPath];  
  11.       
  12.     // Start at bottom heart tip  
  13.     CGPoint tipLocation = CGPointMake(floor(CGRectGetWidth(rect) / 2.0), CGRectGetHeight(rect) - drawingPadding);  
  14.     [heartPath moveToPoint:tipLocation];  
  15.       
  16.     // Move to top left start of curve  
  17.     CGPoint topLeftCurveStart = CGPointMake(drawingPadding, floor(CGRectGetHeight(rect) / 2.4));  
  18.       
  19.     [heartPath addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];  
  20.       
  21.     // Create top left curve  
  22.     [heartPath addArcWithCenter:CGPointMake(topLeftCurveStart.x + curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];  
  23.       
  24.     // Create top right curve  
  25.     CGPoint topRightCurveStart = CGPointMake(topLeftCurveStart.x + 2*curveRadius, topLeftCurveStart.y);  
  26.     [heartPath addArcWithCenter:CGPointMake(topRightCurveStart.x + curveRadius, topRightCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];  
  27.       
  28.     // Final curve to bottom heart tip  
  29.     CGPoint topRightCurveEnd = CGPointMake(topLeftCurveStart.x + 4*curveRadius, topRightCurveStart.y);  
  30.     [heartPath addQuadCurveToPoint:tipLocation controlPoint:CGPointMake(topRightCurveEnd.x, topRightCurveEnd.y + curveRadius)];  
  31.       
  32.     [heartPath fill];  
  33.     heartPath.lineWidth = 1;  
  34.     heartPath.lineCapStyle = kCGLineCapRound;  
  35.     heartPath.lineJoinStyle = kCGLineCapRound;  
  36.     [heartPath stroke];  
  37. }  

再在所需控制器里添加ZLLiveHeartView.

[cpp]  view plain  copy
  1. - (void)showLiveHeartView {  
  2.       
  3.     ZLLiveHeartView *heart = [[ZLLiveHeartView alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];  
  4.     [self.view addSubview:heart];  
  5.     CGPoint fountainSource = CGPointMake(self.view.frame.size.width - 80, self.view.bounds.size.height - 30 / 2.0 - 10);  
  6.     heart.center = fountainSource;  
  7.     [heart liveHeartAnimateInView:self.view];  
  8. }  

直播点赞动画.gif


4. 直播图片点赞动画

先自定义ZLLikeAnimation,animatePictureInView方法:

[cpp]  view plain  copy
  1. - (void)animatePictureInView:(UIView *)view Image:(UIImage *)image {  
  2.       
  3.     self.imageView.image = image;  
  4.     NSTimeInterval totalAnimationDuration = 8;  
  5.     CGFloat heartSize = CGRectGetWidth(self.bounds);  
  6.     CGFloat heartCenterX = self.center.x;  
  7.     CGFloat viewHeight = CGRectGetHeight(view.bounds);  
  8.       
  9.     // Pre-Animation setup  
  10.     self.transform = CGAffineTransformMakeScale(0, 0);  
  11.     self.alpha = 0;  
  12.       
  13.     // Bloom  
  14.     [UIView animateWithDuration:0.5 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveEaseOut animations:^{  
  15.         self.transform = CGAffineTransformIdentity;  
  16.         self.alpha = 0.9;  
  17.     } completion:NULL];  
  18.       
  19.     NSInteger i = arc4random_uniform(2);  
  20.     // -1 OR 1  
  21.     NSInteger rotationDirection = 1 - (2 * i);  
  22.     NSInteger rotationFraction = arc4random_uniform(10);  
  23.     [UIView animateWithDuration:totalAnimationDuration animations:^{  
  24.         self.transform = CGAffineTransformMakeRotation(rotationDirection * M_PI / (16 + rotationFraction * 0.2));  
  25.     } completion:NULL];  
  26.       
  27.     UIBezierPath *heartTravelPath = [UIBezierPath bezierPath];  
  28.     [heartTravelPath moveToPoint:self.center];  
  29.       
  30.     // random end point  
  31.     CGPoint endPoint = CGPointMake(heartCenterX + (rotationDirection) * arc4random_uniform(2 * heartSize), viewHeight/6.0 + arc4random_uniform(viewHeight / 4.0));  
  32.       
  33.     // random Control Points  
  34.     NSInteger j = arc4random_uniform(2);  
  35.     NSInteger travelDirection = 1 - (2 * j);  
  36.       
  37.     // randomize x and y for control points  
  38.     CGFloat xDelta = (heartSize / 2.0 + arc4random_uniform(2 * heartSize)) * travelDirection;  
  39.     CGFloat yDelta = MAX(endPoint.y ,MAX(arc4random_uniform(8 * heartSize), heartSize));  
  40.     CGPoint controlPoint1 = CGPointMake(heartCenterX + xDelta, viewHeight - yDelta);  
  41.     CGPoint controlPoint2 = CGPointMake(heartCenterX - 2 * xDelta, yDelta);  
  42.       
  43.     [heartTravelPath addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];  
  44.       
  45.     CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  46.     keyFrameAnimation.path = heartTravelPath.CGPath;  
  47.     keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  48.     keyFrameAnimation.duration = totalAnimationDuration + endPoint.y / viewHeight;  
  49.     [self.layer addAnimation:keyFrameAnimation forKey:@"positionOnPath"];  
  50.       
  51.     // Alpha & remove from superview  
  52.     [UIView animateWithDuration:totalAnimationDuration animations:^{  
  53.         self.alpha = 0.0;  
  54.     } completion:^(BOOL finished) {  
  55.         [self removeFromSuperview];  
  56.     }];  
  57.       
  58. }  

再在所需控制器里添加ZLLikeAnimation.

[cpp]  view plain  copy
  1. - (void)showLikePictureView {  
  2.       
  3.     ZLLikeAnimation *heart = [[ZLLikeAnimation alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];  
  4.     [self.view addSubview:heart];  
  5.     CGPoint fountainSource = CGPointMake(self.view.frame.size.width - 80, self.view.bounds.size.height - 30 / 2.0 - 10);  
  6.     heart.center = fountainSource;  
  7.     int count = round(random() % 12);  
  8.     [heart animatePictureInView:self.view Image:[UIImage imageNamed:[NSString stringWithFormat:@"resource.bundle/heart%d.png",count]]];  
  9. }  

直播点赞图片动画.gif


5. 烟花特效:

设置烟花

[cpp]  view plain  copy
  1. - (void)setupFireworks {  
  2.       
  3.     self.caELayer = [CAEmitterLayer layer];  
  4.       
  5.     // 发射源  
  6.     self.caELayer.emitterPosition = CGPointMake(self.view.frame.size.width / 2, self.view.frame.size.height - 50);  
  7.     // 发射源尺寸大小  
  8.     self.caELayer.emitterSize = CGSizeMake(50, 0);  
  9.     // 发射源模式  
  10.     self.caELayer.emitterMode = kCAEmitterLayerOutline;  
  11.     // 发射源的形状  
  12.     self.caELayer.emitterShape = kCAEmitterLayerLine;  
  13.     // 渲染模式  
  14.     self.caELayer.renderMode = kCAEmitterLayerAdditive;  
  15.     // 发射方向  
  16.     self.caELayer.velocity = 1;  
  17.     // 随机产生粒子  
  18.     self.caELayer.seed = (arc4random() % 100) + 1;  
  19.       
  20.     // cell  
  21.     CAEmitterCell *cell = [CAEmitterCell emitterCell];  
  22.     // 速率  
  23.     cell.birthRate = 1.0;  
  24.     // 发射的角度  
  25.     cell.emissionRange = 0.11 * M_PI;  
  26.     // 速度  
  27.     cell.velocity = 300;  
  28.     // 范围  
  29.     cell.velocityRange = 150;  
  30.     // Y轴 加速度分量  
  31.     cell.yAcceleration = 75;  
  32.     // 声明周期  
  33.     cell.lifetime  = 2.04;  
  34.     // 是个CGImageRef的对象,既粒子要展现的图片  
  35.     cell.contents = (id)[[UIImage imageNamed:@"ring"] CGImage];  
  36.     // 缩放比例  
  37.     cell.scale = 0.2;  
  38.     // 粒子的颜色  
  39.     cell.color = [[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:1.0] CGColor];  
  40.     // 一个粒子的颜色green 能改变的范围  
  41.     cell.greenRange = 1.0;  
  42.     // 一个粒子的颜色red 能改变的范围  
  43.     cell.redRange = 1.0;  
  44.     // 一个粒子的颜色blue 能改变的范围  
  45.     cell.blueRange = 1.0;  
  46.     // 子旋转角度范围  
  47.     cell.spinRange = M_PI;  
  48.       
  49.     // 爆炸  
  50.     CAEmitterCell *burst = [CAEmitterCell emitterCell];  
  51.     // 粒子产生系数  
  52.     burst.birthRate = 1.0;  
  53.     // 速度  
  54.     burst.velocity = 0;  
  55.     // 缩放比例  
  56.     burst.scale = 2.5;  
  57.     // shifting粒子red在生命周期内的改变速度  
  58.     burst.redSpeed = -1.5;  
  59.     // shifting粒子blue在生命周期内的改变速度  
  60.     burst.blueSpeed= +1.5;  
  61.     // shifting粒子green在生命周期内的改变速度  
  62.     burst.greenSpeed = +1.0;  
  63.     // 生命周期  
  64.     burst.lifetime = 0.35;  
  65.       
  66.       
  67.     // 火花 and finally, the sparks  
  68.     CAEmitterCell *spark = [CAEmitterCell emitterCell];  
  69.     // 粒子产生系数,默认为1.0  
  70.     spark.birthRate = 400;  
  71.     // 速度  
  72.     spark.velocity = 125;  
  73.     // 360 deg //周围发射角度  
  74.     spark.emissionRange = 2 * M_PI;  
  75.     // gravity //y方向上的加速度分量  
  76.     spark.yAcceleration = 75;  
  77.     // 粒子生命周期  
  78.     spark.lifetime = 3;  
  79.     // 是个CGImageRef的对象,既粒子要展现的图片  
  80.     spark.contents = (id)  
  81.     [[UIImage imageNamed:@"fireworks"] CGImage];  
  82.     // 缩放比例速度  
  83.     spark.scaleSpeed = -0.2;  
  84.     // 粒子green在生命周期内的改变速度  
  85.     spark.greenSpeed = -0.1;  
  86.     // 粒子red在生命周期内的改变速度  
  87.     spark.redSpeed = 0.4;  
  88.     // 粒子blue在生命周期内的改变速度  
  89.     spark.blueSpeed = -0.1;  
  90.     // 粒子透明度在生命周期内的改变速度  
  91.     spark.alphaSpeed = -0.25;  
  92.     // 子旋转角度  
  93.     spark.spin = 2 * M_PI;  
  94.     // 子旋转角度范围  
  95.     spark.spinRange = 2 * M_PI;  
  96.       
  97.     self.caELayer.emitterCells = [NSArray arrayWithObject:cell];  
  98.     cell.emitterCells = [NSArray arrayWithObjects:burst, nil];  
  99.     burst.emitterCells = [NSArray arrayWithObject:spark];  
  100.     [self.view.layer addSublayer:self.caELayer];  
  101. }  

烟花效果.gif


6. 雪花特效:

设置雪花

- (void)setupSnowflake {
    
    // 创建粒子Layer
    CAEmitterLayer *snowEmitter = [CAEmitterLayer layer];
    
    // 粒子发射位置
    snowEmitter.emitterPosition = CGPointMake(120,0);
    
    // 发射源的尺寸大小
    snowEmitter.emitterSize = self.view.bounds.size;
    
    // 发射模式
    snowEmitter.emitterMode = kCAEmitterLayerSurface;
    
    // 发射源的形状
    snowEmitter.emitterShape = kCAEmitterLayerLine;
    
    // 创建雪花类型的粒子
    CAEmitterCell *snowflake = [CAEmitterCell emitterCell];
    
    // 粒子的名字
    snowflake.name = @"snow";
    
    // 粒子参数的速度乘数因子
    snowflake.birthRate = 20.0;
    snowflake.lifetime = 120.0;
    
    // 粒子速度
    snowflake.velocity = 10.0;
    
    // 粒子的速度范围
    snowflake.velocityRange = 10;
    
    // 粒子y方向的加速度分量
    snowflake.yAcceleration = 2;
    
    // 周围发射角度
    snowflake.emissionRange = 0.5 * M_PI;
    
    // 子旋转角度范围
    snowflake.spinRange = 0.25 * M_PI;
    snowflake.contents  = (id)[[UIImage imageNamed:@"snow"] CGImage];
    
    // 设置雪花形状的粒子的颜色
    snowflake.color = [[UIColor whiteColor] CGColor];
    snowflake.redRange = 1.5f;
    snowflake.greenRange = 2.2f;
    snowflake.blueRange = 2.2f;
    
    snowflake.scaleRange = 0.6f;
    snowflake.scale = 0.7f;
    
    snowEmitter.shadowOpacity = 1.0;
    snowEmitter.shadowRadius = 0.0;
    snowEmitter.shadowOffset = CGSizeMake(0.0, 0.0);
    
    // 粒子边缘的颜色
    snowEmitter.shadowColor = [[UIColor whiteColor] CGColor];
    
    // 添加粒子
    snowEmitter.emitterCells = @[snowflake];
    
    // 将粒子Layer添加进图层中
    [self.view.layer addSublayer:snowEmitter];
    
    // 形成遮罩
    UIImage *image = [UIImage imageNamed:@"alpha"];
    _layer = [CALayer layer];
    _layer.frame = (CGRect){CGPointZero, self.view.bounds.size};
    _layer.contents = (__bridge id)(image.CGImage);
    _layer.position = self.view.center;
    snowEmitter.mask = _layer;
}

雪花效果.gif

三、压缩文件截图

1、压缩文件截图

C13A68F1-C6FC-492B-A7DC-B0D28285B032.png

2.项目截图:

0E1F6A16-FEC9-4B57-9D09-C1F268860182.png

四、其他补充

持续更新添加动画特效~

界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!



猜你喜欢

转载自blog.csdn.net/Mr_tangIT/article/details/80619342