iOS UI 基础

【OC动画效果】粒子动画 -雪花动画效果

2016-10-13  本文已影响277人  偶然ou

前言

具体效果如图:

效果图

代码讲解:

首先是写在viewDidLoad里的:
//背景我们选择黑色,这样更容易看清楚雪花点
self.view.backgroundColor = [UIColor blackColor];
雪花粒子Layer:
// 创建粒子Layer
CAEmitterLayer *snowEmitter = [CAEmitterLayer layer];
// 粒子发射位置
snowEmitter.emitterPosition = CGPointMake(120,-20);
// 发射源的尺寸大小
snowEmitter.emitterSize     = self.view.bounds.size;
// 发射模式
snowEmitter.emitterMode     = kCAEmitterLayerSurface;
// 发射源的形状
snowEmitter.emitterShape    = kCAEmitterLayerLine;
创建雪花粒子:
// 创建雪花类型的粒子
CAEmitterCell *snowflake    = [CAEmitterCell emitterCell];
// 粒子的名字
snowflake.name = @"snow";
// 粒子参数的速度乘数因子
snowflake.birthRate = 20.0;
//粒子纯在时间平均值(毫秒)
snowflake.lifetime  = 60.0;
//粒子纯在时间平均值范围
snowflake.lifetimeRange = 60.0;
// 粒子速度
snowflake.velocity  = 10.0;
// 粒子的速度范围
snowflake.velocityRange = 10;
// 粒子y方向的加速度分量
snowflake.yAcceleration = 2;
// 周围发射角度
snowflake.emissionRange = 0.5 * M_PI;
// 粒子旋转角度范围
snowflake.spinRange = 0.25 * M_PI;
snowflake.contents  = (id)[[UIImage imageNamed:@"snow"] CGImage];

粒子图片如下:

snow.png
粒子颜色(随机):
// 设置雪花形状的粒子的颜色
snowflake.color      = [[UIColor whiteColor] CGColor];
//颜色取值范围
snowflake.redRange   = 2.f;
snowflake.greenRange = 2.f;
snowflake.blueRange  = 2.f;
粒子大小:
//大小平均值和平均值范围
snowflake.scaleRange = 0.6f;
snowflake.scale      = 0.7f;

//阴影透明度,默认0
snowEmitter.shadowOpacity = 1.0;
//阴影半径,默认3
snowEmitter.shadowRadius  = 0.0;
//shadowOffset阴影偏移  这个跟shadowRadius配合使用
snowEmitter.shadowOffset  = CGSizeMake(0.0, 0.0);

// 粒子边缘的颜色
snowEmitter.shadowColor  = [[UIColor whiteColor] CGColor];

// 添加粒子
snowEmitter.emitterCells = @[snowflake];

// 将粒子Layer添加进图层中
[self.view.layer addSublayer:snowEmitter];

到这里我们的粒子雪花动画已经基本做完了,运行即可看到飘落的不同颜色的粒子雪花,如图:

雪花效果

但是,只有雪花是否感觉有些单调了呢?
这时候,我们可以通过添加遮罩层来增加动画的感觉。

首先是图片:
alpha.png
我们先在顶部写一个属性:
@property (nonatomic, strong) CALayer   *movedMask;
然后在viewDidLoad里接着写:
// 形成遮罩
UIImage *image      = [UIImage imageNamed:@"alpha"];
_movedMask          = [CALayer layer];
_movedMask.frame    = (CGRect){CGPointZero, image.size};
_movedMask.contents = (__bridge id)(image.CGImage);
_movedMask.position = self.view.center;
snowEmitter.mask    = _movedMask;

因为这个不是重点,就不逐行解释了。

拖拽的View
UIView *dragView = [[UIView alloc] initWithFrame:(CGRect){CGPointZero, image.size}];
dragView.center  = self.view.center;
[self.view addSubview:dragView];
dragView添加拖拽手势:
UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[dragView addGestureRecognizer:recognizer];

viewDidLoad外写上dragView的拖拽方法

- (void)handlePan:(UIPanGestureRecognizer *)recognizer {
    
    // 拖拽
    CGPoint translation    = [recognizer translationInView:self.view];
    recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                         recognizer.view.center.y + translation.y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
    
    // 关闭CoreAnimation实时动画绘制(核心)
    [CATransaction setDisableActions:YES];
    _movedMask.position = recognizer.view.center;
}

Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画。动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在。
详细请看:http://www.cnblogs.com/tmacforever/p/4316754.html

最后就完成了!


最终效果

完整代码github已上传,欢迎下载:https://github.com/ouranou/snowflake-animation

上一篇下一篇

猜你喜欢

热点阅读