一、介绍
在很多的游戏中,会有这么一个桥段,就是闯关成功后,会弹出一个奖品同时出现很多的鲜花或者笑脸。例如微信中祝福生日时,出现蛋糕等等。那么,这次我就来实现这个功能。
本人的博文多写在博客园,欢迎浏览: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