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 ,如需转载请自行联系原作者
相关文章
|
iOS开发
iOS 动画绘制圆形
iOS 动画绘制圆形
114 1
|
编译器 iOS开发 异构计算
读iOS核心动画笔记
读iOS核心动画笔记
74 0
|
4月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
109 1
|
5月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
90 5
|
6月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
100 11
|
7月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
82 7
|
iOS开发
iOS 常用阅读软件打开书籍的转场动画
iOS 常用阅读软件打开书籍的转场动画
122 0
|
10月前
|
iOS开发
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
160 0
|
API iOS开发
iOS 自定义转场动画 UIViewControllerTransitioning
iOS 自定义转场动画 UIViewControllerTransitioning
152 0
|
iOS开发
iOS - 个人中心果冻弹性下拉动画
iOS - 个人中心果冻弹性下拉动画
286 0
iOS - 个人中心果冻弹性下拉动画

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 2
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 4
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 5
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 6
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 7
    iOS各个证书生成细节
  • 8
    uniapp云打包ios应用证书的获取方法,生成指南
  • 9
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
  • 10
    iOS Quartz 2D相关笔记总结笔记 韩俊强的博客
  • 1
    uniapp云打包ios应用证书的获取方法,生成指南
    28
  • 2
    iOS|解决 setBrightness 调节屏幕亮度不生效的问题
    117
  • 3
    iOS|记一名 iOS 开发新手的前两次 App 审核经历
    21
  • 4
    iOS各个证书生成细节
    36
  • 5
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    165
  • 6
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    55
  • 7
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    76
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    55
  • 9
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    66
  • 10
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    174