IOSdrawRect实现雪花飘落效果

本文实例为大家分享了IOSdrawRect实现雪花飘落效果的具体代码,供大家参考,具体内容如下

绘制原理:

雪花效果最主要的思路就是在于循环产生带雪花图片的imageView, 产生的雪花的imageview的 x、y、宽、下落的速度都是随机的,这个可以用随机数来产生数据。

实现代码:

#import <UIKit/UIKit.h>

@interface HHFSnowflakeFallingView : UIView

/**
 * 快速创建一个雪花飘落效果的view
 *
 * @param bgImageName 背景图片的名称
 * @param snowImageName 雪花图片的名称
 * @param frame  frame
 *
 * @return 实例化的 雪花飘落效果的view
 */

@property(nonatomic,strong) UIImageView *bgImageView;

@property(nonatomic,copy) NSString *snowImgName;

+ (instancetype) snowfladeFallingViewWithBackgroundImageName:(NSString *) bgImageName snowImageName:(NSString *)snowImageName initWithFrame:(CGRect)frame;
+
//开始下雪
- (void) beginShow;
@end
#import "HHFSnowflakeFallingView.h"

@implementation HHFSnowflakeFallingView
/**
 * <#Description#>
 *
 * @param bgImageName bgImageName 背景图片
 * @param snowImageName snowImageName 雪花图片
 * @param frame   frame 视图的位置和大小
 *
 * @return view  需要绘制的视图
 */
+ (instancetype) snowfladeFallingViewWithBackgroundImageName:(NSString *) bgImageName snowImageName:(NSString *)snowImageName initWithFrame:(CGRect)frame{

 HHFSnowflakeFallingView *view = [[HHFSnowflakeFallingView alloc] initWithFrame:frame];

 view.bgImageView.image = [UIImage imageNamed:bgImageName];
 view.snowImgName = snowImageName;
 return view;
}

- (instancetype)initWithFrame:(CGRect)frame
{
 self = [super initWithFrame:frame];
 if (self) {
  self.clipsToBounds = YES;

  //添加背景图片的imageview
  self.bgImageView = [[UIImageView alloc] init];
  self.bgImageView.frame = self.bounds;
  self.bgImageView.contentMode = UIViewContentModeScaleAspectFill;
  [self addSubview:self.bgImageView];
 }
 return self;
}

//开始下雪
- (void) beginShow{

 //启动定时器,使得一直调用setNeedsDisplay从而调用- (void) drawRect:(CGRect )rect
 //不得手动调用- (void) drawRect:(CGRect )rect
 CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
 //让定时器循环调用
 [link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}

- (void) drawRect:(CGRect)rect {

 //控制雪花最多的个数
 if (self.subviews.count >250) {
  return;
 }

 //雪花的宽度
 int width = arc4random() % 20;
 while (width < 5) {
  width = arc4random() % 20;
 }
 //雪花的速度
 int speed = arc4random() % 15;
 while (speed < 5) {
  speed = arc4random() % 15;
 }

 //雪花起点y
 int startY = - (arc4random() % 100);
 //雪花起点x
 int startX = arc4random() % (int) [UIScreen mainScreen].bounds.size.width;
 //雪花终点x
 int endX = arc4random() % (int) [UIScreen mainScreen].bounds.size.width;

 UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:self.snowImgName]];
  imageView.frame = CGRectMake(startX, startY, width, width);
 [self addSubview:imageView];

 //设置动画
 [UIView animateWithDuration:speed animations:^{
  //设置雪花最终的frame
  imageView.frame = CGRectMake(endX, [UIScreen mainScreen].bounds.size.height, width, width);
  //设置雪花的旋转
  imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI);
  //设置雪花透明度,使得雪花快落地的时候就像快消失的一样
  imageView.alpha = 0.3;
 } completion:^(BOOL finished) {
  [imageView removeFromSuperview];
 }];

}
@end
#import "ViewController.h"
#import "HHFSnowflakeFallingView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];

 /**
  雪花效果最主要的思路就是在于循环产生带雪花图片的imageView, 产生的雪花的imageview的 x、y、宽、下落的速度都是随机的,这个可以用随机数来产生数据。
  */

 self.navigationItem.title = @"雪花飘落效果";

 //创建雪花飘落效果的view
 HHFSnowflakeFallingView *snowflakeFallingView = [HHFSnowflakeFallingView snowfladeFallingViewWithBackgroundImageName:@"snow_background" snowImageName:@"snow" initWithFrame:self.view.bounds];

 //开始下雪
 [snowflakeFallingView beginShow];

 [self.view addSubview:snowflakeFallingView];
}
@end

运行效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • IOS动画效果源代码整理(粒子、雪花、火焰、河流、蒸汽)

    学习神奇的粒子发射器,雪花纷纷落下的动画效果,就是通过CAEmitterLayer来实现的,这个layer还能创建火焰,河流,蒸汽的动画效果,常用于游戏开发. Creating your emitter layer let rect = CGRect(x: 0.0, y: -70.0, width: view.bounds.width, height: 50.0) let emitter = CAEmitterLayer() emitter.backgroundColor = UIColor.b

  • iOS实现大雪纷飞动画

    本文实例为大家分享了iOS实现大雪纷飞动画的具体代码,供大家参考,具体内容如下 1.结果展示 美丽的雪花,勾起了多少美好的回忆. 2.制作思路 其实创作这样一个大学纷飞的场景是十分简单的,简单到你看了教程之后想不会都不行.OK,下面国际惯例,讲解一下思路吧. 1.创建一个数组用来保存大量的雪花 _imagesArray = [[NSMutableArray alloc] init]; for (int i = 0; i < 1000; ++ i) { UIImageView *imageView

  • IOSdrawRect实现雪花飘落效果

    本文实例为大家分享了IOSdrawRect实现雪花飘落效果的具体代码,供大家参考,具体内容如下 绘制原理: 雪花效果最主要的思路就是在于循环产生带雪花图片的imageView, 产生的雪花的imageview的 x.y.宽.下落的速度都是随机的,这个可以用随机数来产生数据. 实现代码: #import <UIKit/UIKit.h> @interface HHFSnowflakeFallingView : UIView /** * 快速创建一个雪花飘落效果的view * * @param bg

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • JS实现模拟风力的雪花飘落效果

    本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • OpenGL Shader实例分析(7)雪花飘落效果

    研究了一个雪花飘落效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0", 2D) = "white" {} iChannelReso

  • jQuery实现雪花飘落效果

    本文实例为大家分享了jQuery实现雪花飘落效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现雪花飘落</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js&qu

  • JavaScript实现雪花飘落效果特效

    没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽.雪,是冬天的灵魂,为大地铺好背景,之后发生的都如梦似幻,就像童话般的存在.冬天没有雪,能难倒程序猿吗,没有雪自己造,这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

  • JS和JQuery实现雪花飘落效果

    很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式. 我们先来看一下需要实现的雪花效果: 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 解释 setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = setT

  • python实现雪花飘落效果实例讲解

    在学习pygame模块过程中,我们可以通过使用 pygame模块实现很多功能性的东西,但是很多人应该没有利用pygame实现过雪花飘落的效果吧,有时候可能是不知道从何入手或者是没有时间写,接下来我就教大家如何利用pygame模块实现雪花飘落的效果吧,总共都用不到40行代码就可以实现哦,希望对你们有所帮助 第一步:我们先打开我们的pycharm软件,然后新建一个Python文件 第二步:建立好文件之后,我们在编辑页面输入以下代码: import pygame import sys #导入模块 im

  • 手写简单的jQuery雪花飘落效果实例

    前言 最近闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿来用了,改起来更是容易. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>雪花飘落</title> </head> <

  • 使用js实现雪花飘落效果

    今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head>  <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var

随机推荐