iOS：创建撒花动画-阿里云开发者社区

iOS：创建撒花动画

2017-10-04 1810

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

一、介绍

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

二、实现原理

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