美文网首页
粒子效果

粒子效果

作者: silasjs | 来源:发表于2019-06-24 23:21 被阅读0次

粒子效果

说到粒子效果,iPhone用户应该经常见到的,比如下雨天时天气app中的雨滴效果。还有和小伙聊微信时不小心输入了某些关键字触发了粒子效果,满屏幕的掉表情、红包、元宝什么的。这些很酷炫的动画效果,在iOS中使用起来其实很方便,这都要得益于苹果爸爸一贯封装的便利性。

在图形绘制和动画方面,苹果主要为大家提供了QuartzCore框架。其中基类CALayer下有很多特殊的图层:

CALayer的子类 说明
CATransformlayer 用于渲染3D Layer层次结构
CATiledLayer 用于管理一副可以分割的大图
CATextLayer 用户绘制AttirbuteString
CAShapelayer 用于绘制立体,贝塞尔曲线
CAScorllayer 用于管理可滑动区域
CAReplicationLayer 用于自动复制subLayer
CAEGLayer 用于OpenGLES绘制图层
CAGradientLayer 用于控制颜色渐变
CAEmitterlayer 用于控制粒子效果

这里粒子效果主要用到两个类:CAEmitterLayer和CAEmitterCell。用起来很简单,基本就是创建后给属性赋值,这里就是个简单的例子:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.emitterLayer.emitterCells = @[[self emitterCellWithTextureName:@"jinbi"],
                                       [self emitterCellWithTextureName:@"zongzi2.jpg"],
                                       [self emitterCellWithTextureName:@"zongzi"],
                                       [self emitterCellWithTextureName:@"hongbao"]];
}

- (CAEmitterCell *)emitterCellWithTextureName:(NSString *)textureName {
    CAEmitterCell *cell = [CAEmitterCell emitterCell];
    cell.birthRate = 1.0f;
    cell.lifetime = 30.0f;
    cell.speed = 2.0f;
    cell.velocity = 10.0f;
    cell.velocityRange = 10.0f;
    cell.yAcceleration = 60.0f;
    cell.scale = 0.1f;
    cell.scaleRange = 0.0f;
    cell.contents = (id)[UIImage imageNamed:textureName].CGImage;
    return cell;
}

- (CAEmitterLayer *)emitterLayer {
    if (nil == _emitterLayer) {
        CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
        emitterLayer.emitterShape = kCAEmitterLayerLine;
        emitterLayer.emitterMode = kCAEmitterLayerSurface;
        emitterLayer.emitterSize = self.view.bounds.size;
        emitterLayer.emitterPosition = CGPointMake(self.view.bounds.size.width * 0.5f, -10.0f);
        [self.view.layer addSublayer:emitterLayer];
        _emitterLayer = emitterLayer;
    }
    return _emitterLayer;
}

就这么一点代码,有时间的话,调试调试参数,脑洞大一点就可以做出各种效果。赶快来试试吧!这里就下个红包粽子雨。

红包粽子雨.gif

相关文章

  • 粒子效果

    特效组件(靠材质体现): component-effect 拖尾效果: 镜头光晕(Lens Flars):涉及到后...

  • 粒子效果

    //获取元素 var canvas = document.getElementById('canvas'); va...

  • 粒子效果

    粒子效果(复制层) 开始 重绘 自定义一个DrawView绑定控制器的viewawakeFromNib中添加手势p...

  • 粒子效果

    粒子效果 说到粒子效果,iPhone用户应该经常见到的,比如下雨天时天气app中的雨滴效果。还有和小伙聊微信时不小...

  • iOS --粒子效果简单实现

    前言 :整个粒子动画效果,学习学习... 看看演示效果 Pragma mark — NO.1 创建最简单的粒子效果...

  • 音视频开发之旅(15) OpenGL ES粒子系统 - 喷泉

    目录 粒子和粒子系统 实践:喷泉效果 遇到的问题 资料 收获 通过该篇的实践实现如下效果 一、什么是粒子和粒子系统...

  • vue粒子效果

    粒子效果是一个很好玩很有趣的东西,前几天有人问我vue怎么使用粒子效果,其实vue使用一些简单粒子效果很容易,下面...

  • vue粒子效果

    粒子效果是一个很好玩很有趣的东西,前几天有人问我vue怎么使用粒子效果,其实vue使用一些简单粒子效果很容易,下面...

  • PS一键制作3D人像粒子打散飞溅效果动作(含视频教学)

    给大家分享一款非常酷炫的ps飞溅粒子效果动作插件,使用飞溅粒子效果动作插件,可以制作出非常酷炫的飞溅粒子效果动作,...

  • canvas 会动的粒子效果

    particle-field canvas实现粒子场的动画效果 实现效果:粒子会动并且在一定范围内粒子之间出现连线...

网友评论

      本文标题:粒子效果

      本文链接:https://www.haomeiwen.com/subject/dwzaqctx.html