一、介绍
在很多的游戏中，会有这么一个桥段，就是闯关成功后，会弹出一个奖品同时出现很多的鲜花或者笑脸。例如微信中祝福生日时，出现蛋糕等等。那么，这次我就来实现这个功能。
本人的博文多写在博客园，欢迎浏览：http://www.cnblogs.com/XYQ-208910/
二、实现原理
对外接收一个图片，然后给对应的每一张图片创建CADisplaylink定时器，开启计时器后，在计时器定义的方法中不停的绘制UIImageView，使其从视图顶部下落到顶部后慢慢改变透明度，直至消失。
对外暴露两个方法即可：
(1)开始撒花动画，接收图片参数，开启所有的计时器
(2)结束撒花动画，销毁所有的计时器
三、实现类
FlowFlower(动画)：
@interface FlowFlower : NSObject
/**
类方法创建对象
@param images 花图片数组
*/
+ (FlowFlower *)flowerFLow:(NSArray *)images;
/**
启动落花
@param view 飞行的视图区域
*/
- (void)startFlyFlowerOnView:(UIView *)view;
/**
结束落花
*/
- (void)endFlyFlower;
@end
UIImage (Extension)分类，通过颜色绘制图片，同时可以改变图片尺寸：
@interface UIImage (Extension)
/**
* 按照指定的颜色返回一个图片
* @param color 给定的图片颜色
* @return 图片
*/
+ (UIImage *)imageWithColor:(UIColor *)color;
/**
* 按照指定的大小返回一个图片
* @param itemSize 给定的大小
* @param imageName 给定的名称
* @return 图片
*/
+ (UIImage *)imageWithSize:(CGSize)itemSize imageName:(NSString *)imageName;
/**
* 利用qurazt2D画图的方法返回旋转后的图片
* @param image 原始图片
* @param orientation 旋转方向
*/
+ (UIImage *)image:(UIImage *)image rotation:(UIImageOrientation)orientation;
/**
UIImage:去色功能的实现（图片灰色显示）
@param sourceImage 图片
*/
+ (UIImage *)grayImage:(UIImage *)sourceImage;
@end
四、测试
- (void)viewDidLoad {
[super viewDidLoad];
[self FlyFaceImage];
}
#pragma mark - 鲜花
-(void)FlyColorImage{
//#FFBF00 #038AE6 #73D0F5 #D93600 #FFFF00 #63DB59 彩片颜色值
UIImage *image1 = [UIImage imageWithColor:UIColorFromRGB(0xFFBF00)];
UIImage *image2 = [UIImage imageWithColor:UIColorFromRGB(0x038AE6)];
UIImage *image3 = [UIImage imageWithColor:UIColorFromRGB(0x73D0F5)];
UIImage *image4 = [UIImage imageWithColor:UIColorFromRGB(0xD93600)];
UIImage *image5 = [UIImage imageWithColor:UIColorFromRGB(0xFFFF00)];
UIImage *image6 = [UIImage imageWithColor:UIColorFromRGB(0x3DB59)];
//飞行
_flowFlower = [FlowFlower flowerFLow:@[image1,image2,image3,image4,image5,image6]];
[_flowFlower startFlyFlowerOnView:self.view];
}
#pragma mark - 表情
-(void)FlyFaceImage{
//face
UIImage *faceImage = [UIImage imageNamed:@"face.png"];
//飞行
_flowFlower = [FlowFlower flowerFLow:@[faceImage]];
[_flowFlower startFlyFlowerOnView:self.view];
}
五、源码
github：https://github.com/xiayuanquan/FlowFlower
六、演示截图和视频
flower.png
face.png
网友评论