一、介绍

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

二、实现原理

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

    priority_queue<int>q;//默认不递增q.size();//q中有几个元素q.pop();//删除队首q.top();//返回队首元素q.push();//在队列中插入一 ...

  2. 基于图文界面的蓝牙扫描工具btscanner

    基于图文界面的蓝牙扫描工具btscanner   btscanner是Kali Linux内置的一款蓝牙扫描工具.它提供图文界面,更便于渗透测试人员查看扫描信息.该工具会自动使用主机所有的蓝牙接口,并 ...

  3. 回顾JavsScript对象的克隆

    JS对象的数据类型分为两大类:原始类型(string, boolean, number,undefined, function)和 对象类型(array, object, null). 1.浅度克隆 ...

  4. spring cloud 学习(4) - hystrix 服务熔断处理

    hystrix 是一个专用于服务熔断处理的开源项目,当依赖的服务方出现故障不可用时,hystrix有一个所谓的断路器,一但打开,就会直接拦截掉对故障服务的调用,从而防止故障进一步扩大(类似中电路中的跳 ...

  5. Android的设计尺寸

    术语和概念 屏幕尺寸 指实际的物理尺寸,为屏幕对角线的测量.为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大. 像素(PX) 代表屏幕上一个物理的像素点代表屏幕上一个物 ...

  6. Ubuntu 中启用 root 帐号

    参考:http://linuxtoy.org/archives/howto_enable_ubuntu_root_account.html 如果你实在需要在 Ubuntu 中启用 root 帐号的话, ...

  7. C程序设计的抽象思维-递归过程-砝码称重

    [问题] 在狄更斯时代,商人们用砝码和天平来称量商品的重量,假设你仅仅有几个砝码,就仅仅能精确地称出一定的重量.比如,假定仅仅有两个砝码:各自是1kg和3kg. 仅仅用1kg的砝码能够称出1kg重量的 ...

  8. EF+Sqlite 动态设置连接字符串

    摘要 在做c/s项目的时候,如果使用ef+sqlite,我们不知道客户端会安装在哪里,需要动态的来设置db所在路径. 解决办法 /// <summary> /// 数据上下文 /// &l ...

  9. 集群服务器下使用SpringBoot @Scheduled注解定时任务

    原文:https://blog.csdn.net/huyang1990/article/details/78551578 SpringBoot提供了 Schedule模块完美支持定时任务的执行 在实际 ...

  10. Odoo进销存(采购、销售、仓库)入门教程 - 下

    转帖地址:http://blog.csdn.net/wangnan537/article/details/46475105 2. 进销存实务 2.1 销售产品 李逍遥接到客户苏州美尚邻里超市购买10只 ...