一、介紹
在很多的游戲中，會有這么一個(gè)橋段，就是闖關(guān)成功后，會彈出一個(gè)獎品同時(shí)出現(xiàn)很多的鮮花或者笑臉。例如微信中祝福生日時(shí)，出現(xiàn)蛋糕等等。那么，這次我就來實(shí)現(xiàn)這個(gè)功能。
本人的博文多寫在博客園，歡迎瀏覽：http://www.cnblogs.com/XYQ-208910/
二、實(shí)現(xiàn)原理
對外接收一個(gè)圖片，然后給對應(yīng)的每一張圖片創(chuàng)建CADisplaylink定時(shí)器，開啟計(jì)時(shí)器后，在計(jì)時(shí)器定義的方法中不停的繪制UIImageView，使其從視圖頂部下落到頂部后慢慢改變透明度，直至消失。
對外暴露兩個(gè)方法即可：
(1)開始撒花動畫，接收圖片參數(shù)，開啟所有的計(jì)時(shí)器
(2)結(jié)束撒花動畫，銷毀所有的計(jì)時(shí)器
三、實(shí)現(xiàn)類
FlowFlower(動畫)：
@interface FlowFlower : NSObject
/**
類方法創(chuàng)建對象
@param images 花圖片數(shù)組
*/
+ (FlowFlower *)flowerFLow:(NSArray *)images;
/**
啟動落花
@param view? 飛行的視圖區(qū)域
*/
- (void)startFlyFlowerOnView:(UIView *)view;
/**
結(jié)束落花
*/
- (void)endFlyFlower;
@end
UIImage (Extension)分類，通過顏色繪制圖片，同時(shí)可以改變圖片尺寸：
@interface UIImage (Extension)
/**
*? 按照指定的顏色返回一個(gè)圖片
*? @param color 給定的圖片顏色
*? @return 圖片
*/
+ (UIImage *)imageWithColor:(UIColor *)color;
/**
*? 按照指定的大小返回一個(gè)圖片
*? @param itemSize? 給定的大小
*? @param imageName 給定的名稱
*? @return 圖片
*/
+ (UIImage *)imageWithSize:(CGSize)itemSize imageName:(NSString *)imageName;
/**
*? 利用qurazt2D畫圖的方法返回旋轉(zhuǎn)后的圖片
*? @param image? ? ? 原始圖片
*? @param orientation 旋轉(zhuǎn)方向
*/
+ (UIImage *)image:(UIImage *)image rotation:(UIImageOrientation)orientation;
/**
UIImage:去色功能的實(shí)現(xiàn)（圖片灰色顯示）
@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
六、演示截圖和視頻
