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

 

六、演示截图

  

 

七、声明

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

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/6686397.html ,如需转载请自行联系原作者
相关文章
|
10月前
|
iOS开发
iOS 动画绘制圆形
iOS 动画绘制圆形
62 1
|
iOS开发
iOS - 个人中心果冻弹性下拉动画
iOS - 个人中心果冻弹性下拉动画
228 0
iOS - 个人中心果冻弹性下拉动画
|
存储 数据安全/隐私保护 开发者
iOS创建苹果证书、制作p12证书流程
iOS创建苹果证书、制作p12证书流程
iOS创建苹果证书、制作p12证书流程
|
iOS开发
iOS开发-导航栏标题动画
iOS开发-导航栏标题动画
174 0
iOS开发-导航栏标题动画
|
iOS开发
iOS开发 - 柱状图动态展现动画
iOS开发 - 柱状图动态展现动画
141 0
iOS开发 - 柱状图动态展现动画
|
JSON iOS开发 数据格式
iOS开发 - 关于启动页动画的杂谈
iOS开发 - 关于启动页动画的杂谈
235 0
iOS开发 - 关于启动页动画的杂谈
|
iOS开发
iOS开发- 分屏动画
iOS开发- 分屏动画
116 0
iOS开发- 分屏动画
|
前端开发 iOS开发
React Native | 创建IOS原生模块
React Native | 创建IOS原生模块
342 0
|
存储 数据安全/隐私保护 开发者
iOS创建苹果证书、p12证书申请流程
iOS创建苹果证书、p12证书申请流程
iOS创建苹果证书、p12证书申请流程
|
安全 数据安全/隐私保护 iOS开发
uniapp开发,window下创建ios打包证书的详情流程
uniapp开发,window下创建ios打包证书的详情流程