iOS雪花飘落效果
2016-07-31 本文已影响1615人
chenfanfang
源码地址:https://github.com/chenfanfang/CollectionsOfExample
本文主要介绍CADisplayLink和- (void)drawRect:(CGRect)rect的配合使用,不建议大家这么处理,因为很耗性能(因为创建了太多的控件),建议大家使用粒子发射器。
首先先附上几张效果图
雪花飘落效果.gif普通图片
雪花效果图1.png雪花效果图2.png
雪花效果的思路:
雪花效果最主要的思路就是在于循环产生带雪花图片的imageView, 产生的雪花的imageview的 x、y、宽、下落的速度都是随机的,这个可以用随机数来产生数据。
附上源码:
FFSnowflakesFallingView.h文件内容
//
// FFSnowflakesFallingView.h
// CollectionsOfExample
//
// Created by mac on 16/7/30.
// Copyright © 2016年 chenfanfang. All rights reserved.
//
#import <UIKit/UIKit.h>
/**
* 雪花飘落效果的view
*/
@interface FFSnowflakesFallingView : UIView
/**
* 快速创建一个雪花飘落效果的view
*
* @param bgImageName 背景图片的名称
* @param snowImageName 雪花图片的名称
* @param frame frame
*
* @return 实例化的 雪花飘落效果的view
*/
+ (instancetype)snowflakesFallingViewWithBackgroundImageName:(NSString *)bgImageName snowImageName:(NSString *)snowImageName frame:(CGRect)frame;
/** 开始下雪 */
- (void)beginSnow;
@end
FFSnowflakesFallingView.m 文件内容
//
// FFSnowflakesFallingView.m
// CollectionsOfExample
//
// Created by mac on 16/7/30.
// Copyright © 2016年 chenfanfang. All rights reserved.
//
#import "FFSnowflakesFallingView.h"
@interface FFSnowflakesFallingView ()
/** 背景图片imageView */
@property (nonatomic, strong) UIImageView *bgImageView;
/** 雪花图片的名称 */
@property (nonatomic, copy) NSString *snowImgName;
@end
@implementation FFSnowflakesFallingView
+ (instancetype)snowflakesFallingViewWithBackgroundImageName:(NSString *)bgImageName snowImageName:(NSString *)snowImageName frame:(CGRect)frame {
FFSnowflakesFallingView *view = [[FFSnowflakesFallingView alloc] initWithFrame:frame];
view.bgImageView.image = [UIImage imageNamed:bgImageName];
view.snowImgName = snowImageName;
return view;
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self == [super initWithFrame:frame]) {
self.clipsToBounds = YES;
//添加背景图片的imageView
self.bgImageView = [[UIImageView alloc] init];
self.bgImageView.frame = self.bounds;
self.bgImageView.contentMode = UIViewContentModeScaleAspectFill;
[self addSubview:self.bgImageView];
}
return self;
}
/** 开始下雪 */
- (void)beginSnow {
//启动定时器,使得一直调用setNeedsDisplay从而被动调用 - (void)drawRect:(CGRect)rect
//不能手动调用 - (void)drawRect:(CGRect)rect
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)drawRect:(CGRect)rect {
//控制雪花最多的个数
if (self.subviews.count > 250) {
return;
}
//雪花的宽度
int width = arc4random() % 20;
while (width < 5) {
width = arc4random() % 20;
}
//雪花的速度
int speed = arc4random() % 15;
while (speed < 5) {
speed = arc4random() % 15;
}
//雪花起点y
int startY = - (arc4random() % 100);
//雪花起点x
int startX = arc4random() % (int)[UIScreen mainScreen].bounds.size.width;
//雪花终点x
int endX = arc4random() % (int)[UIScreen mainScreen].bounds.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:self.snowImgName]];
imageView.frame = CGRectMake(startX, startY, width, width);
[self addSubview:imageView];
[UIView animateWithDuration:speed animations:^{
//设置雪花最终的frame
imageView.frame = CGRectMake(endX, [UIScreen mainScreen].bounds.size.height, width, width);
//设置雪花的旋转
imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI );
//设置雪花透明度,使得雪花快落地的时候像快消失的一样
imageView.alpha = 0.3;
} completion:^(BOOL finished) {
//完成动画,就将雪花的imageView给移除掉
[imageView removeFromSuperview];
}];
}
@end
控制器的.m文件的内容
//
// FFSnowflakesFallingVC.m
// CollectionsOfExample
//
// Created by mac on 16/7/30.
// Copyright © 2016年 chenfanfang. All rights reserved.
//
#import "FFSnowflakesFallingVC.h"
//view
#import "FFSnowflakesFallingView.h"
@interface FFSnowflakesFallingVC ()
@end
@implementation FFSnowflakesFallingVC
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.title = @"雪花飘落效果";
//创建雪花飘落效果的view
FFSnowflakesFallingView *snowflakesFallingView = [FFSnowflakesFallingView snowflakesFallingViewWithBackgroundImageName:@"snow_background" snowImageName:@"snow" frame:self.view.bounds];
//开始下雪
[snowflakesFallingView beginSnow];
[self.view addSubview:snowflakesFallingView];
}
@end
最后附上两张图片素材
snow.png snow_background.png