iOS创建撒花动画

一、介绍

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

本人的博文多写在博客园,欢迎浏览:http://www.cnblogs.com/XYQ-208910/


二、实现原理

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


四、测试

- (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];

}

五、源码

github:https://github.com/xiayuanquan/FlowFlower


六、演示截图和视频

iOS创建撒花动画_第1张图片
flower.png
iOS创建撒花动画_第2张图片
face.png

你可能感兴趣的:(iOS创建撒花动画)