iOS：创建撒花动画

一、介绍

在很多的游戏中，会有这么一个桥段，就是闯关成功后，会弹出一个奖品同时出现很多的鲜花或者笑脸。例如微信中祝福生日时，出现蛋糕等等。那么，这次我就来实现这个功能。

 

二、实现原理

对外接收一个图片，然后给对应的每一张图片创建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

 

四、测试 

//
//  ViewController.m
//  FlowFlower
//
//  Created by 夏远全 on 2017/3/29.
//  Copyright © 2017年 夏远全. All rights reserved.
//

#import "ViewController.h"
#import "FlowFlower.h"
#import "UIImage+Extension.h"

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]


@interface ViewController ()
@property (strong,nonatomic)FlowFlower *flowFlower;
@end

@implementation ViewController


- (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];
}

@end

 

五、源码

github：https://github.com/xiayuanquan/FlowFlower

简书： http://www.jianshu.com/p/011c9522cae3

 

六、演示截图

  

 

七、声明

本博文为原创，如转载请注明出处，希望对大家有所帮助~~~~