一、介绍

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

二、实现原理

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

六、演示截图

 

七、声明

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

iOS:创建撒花动画的更多相关文章

  1. iOS 烟花撒花效果,图层渐变,图层倒影特效。CAEmitterLayer粒子发射器

    iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器 上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些使用方法,详细看这里,就是我们在处理视图 ...

  2. Android——仿QQ聊天撒花特效

    实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?其实就是曲线,嘿嘿,关于曲线的概念大家可以去 Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和 ...

  3. Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命

    Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...

  4. iOS 自定义转场动画浅谈

    代码地址如下:http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索 前记 想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差不 ...

  5. 仿QQ撒花特效--第三方开源--FllowerAnimation

    点此下载资源 xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  6. 【原】iOS学习44之动画

    1. 简单动画 1> UIImageView GIF 动画 GIF图的原理是:获取图片,存储在图片数组中,按照图片数组的顺序将图片以一定的速度播放 UIImageView *showGifima ...

  7. iOS 开发--转场动画

    "用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下:" 本文主讲SWIFT版,OC版在后面会留下Demo下载 在iOS中,在同 ...

  8. IOS开发系列 --- 核心动画

    原始地址:http://www.cnblogs.com/kenshincui/p/3972100.html 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥i ...

  9. Windows Phone 8初学者开发—第22部分:用演示图板创建卷盘的动画

    原文 Windows Phone 8初学者开发—第22部分:用演示图板创建卷盘的动画 第22部分: 用演示图板创建卷盘的动画 原文地址:http://channel9.msdn.com/Series/ ...

随机推荐

  1. linux学习笔记-11.正则表达式

    1.cut截取以:分割保留第七段 grep hadoop /etc/passwd | cut -d: -f7 2.排序 du | sort -n 3.查询不包含hadoop的 grep -v hado ...

  2. js数据结构之列表的详细实现方法

    * 列表用于存放数据量较少的数据结构* 当数据量较大时,不需要对其进行查找.排序的情况下,使用列表也比较方便. 本数据结构在node环境下运行,需要对node有个基本是了解. 1. listSize: ...

  3. android弹出对话框

    我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等 ...

  4. NOI.AC NOIP模拟赛 第四场 补记

    NOI.AC NOIP模拟赛 第四场 补记 子图 题目大意: 一张\(n(n\le5\times10^5)\)个点,\(m(m\le5\times10^5)\)条边的无向图.删去第\(i\)条边需要\ ...

  5. [USACO08OCT]Watering Hole

    [USACO08OCT]Watering Hole 题目大意: Farmer John 有\(n(n\le300)\)个牧场,他希望灌溉他的所有牧场.牧场编号为\(1\sim n\),要灌溉一个牧场有 ...

  6. 使用 IntraWeb (15) - 基本控件之 TIWEdit、TIWMemo、TIWText

    TIWEdit //单行文本框, 通过 PasswordPrompt 属性可以作为密码框 TIWMemo //多行文本框 TIWText //相当于多行的 TIWLabel 或不能编辑的 TIWMem ...

  7. 如何用万用表判断一个12V蓄电池是否没电

    常用的方法如下: 1.找一根细铜丝,接触电瓶的正负极柱,冒火花说明电瓶有电,不冒火花说明没有电. 2.用万用表测量电瓶的电压,12.7V说明满电,11.50V一下说明没有电. 3.找一个12V的灯泡或 ...

  8. MongoDB数组修改器更新数据(转)

    MongoDB数组修改器更新数据    这里,我们将了解一下数组修改器.数组,是我们经常看到和使用到的且非常有用的数据结构:它不仅可以通过索进行引用,还可以作为集合来使用.数组修改器,顾名思义,它是用 ...

  9. Virtualenv教程

    虚拟环境简介 VirtualEnv用于在一台机器上创建多个独立的Python虚拟运行环境,多个Python环境相互独立,互不影响,它能够: 在没有权限的情况下安装新套件 不同应用可以使用不同的套件版本 ...

  10. .Net Discovery系列之十二-深入理解平台机制与性能影响(下)

    上一篇文章中Aicken为大家介绍了.Net平台的垃圾回收机制.即时编译机制与其对性能的影响,这一篇中将继续为大家介绍.Net平台的异常捕获机制与字符串驻留机制. 三.关于异常捕获机制 虽然我们已经很 ...