一、介绍

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

二、实现原理

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

六、演示截图

 

七、声明

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

转载于:https://www.cnblogs.com/XYQ-208910/p/6686397.html

iOS:创建撒花动画相关推荐

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

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

  2. android 撒花动画,Android仿QQ聊天撒花特效 很真实

    先看看效果图吧 实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?先在这里打个问号 下面就直接写了 1.activity_main.xml xmlns:tools="http://sche ...

  3. bubbles html5游戏源码,html5 canvas弹性气泡爆破 | 撒花动画

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const Util = {}; Util.timeStamp = function() { return ...

  4. Android 常用效果(各种进度条,酷炫loading动画,火箭升空,撒花以及趋势图)...

    最近时间比较充裕一些,总结了下几个项目用到的ui效果,在这边共享给大家,也给自己做个记录(后面会有demo贴出).  主要是以下几种ui效果: 进度条多种展示 开源loading动画 火箭升空 撒花效 ...

  5. Android 常用效果(各种进度条,酷炫loading动画,火箭升空,撒花以及趋势图)

    最近时间比较充裕一些,总结了下几个项目用到的ui效果,在这边共享给大家,也给自己做个记录(后面会有demo贴出).  主要是以下几种ui效果: 进度条多种展示 开源loading动画 火箭升空 撒花效 ...

  6. android 进度图表,Android 常用效果(各种进度条,酷炫loading动画,火箭升空,撒花以及趋势图)...

    [实例简介] 主要是以下几种ui效果: 进度条多种展示 开源loading动画 火箭升空 撒花效果(仿微信) 气温趋势图 [实例截图] [核心代码] ui_animation └── ui_anima ...

  7. 如何在React Native中创建精美的动画加载器

    by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...

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

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

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

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

最新文章

  1. 几个定制 iTerm2 的 tip
  2. JAVA线程池原理以及几种线程池类型介绍
  3. java每个阶段的学习时间_每个Java学习者都会犯的10个最常见的1个错误
  4. shell脚本中用到的条件和循环语句
  5. 签字后被开除_员工虚假报销公司可以开除吗?
  6. 十二届蓝桥杯C++ 1月 中 高级组试题 第4题 病毒繁殖
  7. Docker基础操作,原来这才是正确打开Docker的新方式!
  8. 泡腾片的打开方式:刀割封条,拔下盖子
  9. 强制 转换string 的一个简单方法(笔记)
  10. Python实现CGI环境
  11. Anaconda-Navigator无法打开
  12. 【图解深度学习】【章节:1-1.2 | 神经网络输入输出】连小学生都能看懂的深度学习基础总结
  13. HTML+CSS+JS斗地主 记录局数 可自定义昵称
  14. 大地GhostXP_SP3_2013极速装机5月版
  15. 数据结构:按成绩输出名次排序
  16. excel表格打印每页都有表头_Excel打印时如何实现每一页纸上都有表头?
  17. 暑假训练 The Triangle Game (OpenJ_Bailian - 1574)
  18. mysql find in set 函数在pgsql中的函数写法
  19. 通过token认证的方式来加速OKE集群的访问
  20. 4月9日第壹简报,星期日,农历闰二月十九

热门文章

  1. 非迅雷会员免费看云点播方法,无需软件享官方云点播
  2. cocoscreator 动态创建帧动画
  3. Token一般存放在哪里
  4. 企业内网安全建设的全面解析
  5. 异常System.Threading.Thread.AbortInternal
  6. 1.3.2:计算(a+b)*c的值
  7. 使用v4l2在树莓派上抓取视频图像
  8. 超星计算机应用基础,计算机应用基础_超星_题库2020
  9. 《On Java 8》读书笔记009_多态
  10. 【二】、Linux中mysql的安装并用Navicat连接