前言
你肯定见过很酷炫的ios动画吧，例如微信的表情雨😘，红包雨，下雪，烟花等，但是有时候确不知道从何下手，ios动画内容有很多，这次我们就来学习下酷炫的粒子动画。
先上效果图给大伙瞧瞧
知识点
本文用了两大知识点
1.cagradientlayer 创建渐变的背景色
2.caemitterlayer、caemittercell ios中的粒子效果有两部分组成，一部分为发射器caemitterlayer，另一部分是粒子单元caemittercell，用于设置相应的粒子属性。
代码详解
1.渐变背景色的生成
cagradientlayer继承自calayer，它主要功能是能实现渐变的颜色
@property(copy) nsarray *colors 渐变颜色的数组 @property(copy) nsarray *locations 渐变颜色的区间分布， locations的数组长度和color一致，一般不用设置，默认是nil，会平均分布。 //[nsarray arraywithobjects:[nsnumber numberwithfloat:0.0], // [nsnumber numberwithfloat:0.3], // [nsnumber numberwithfloat:0.8], // [nsnumber numberwithfloat:1.0], // nil]; @property cgpoint startpoint 映射locations中第一个位置， 用单位向量表示，比如（0，0）表示从左上角开始变化。默认值是(0.5,0.0)。 @property cgpoint endpoint 映射locations中最后一个位置 ,用单位向量表示，比如（1，1）表示到右下角变化结束。默认值是(0.5,1.0)。
demo背景色代码
//渐变色 cagradientlayer *gradientlayer = [cagradientlayer layer]; gradientlayer.frame = self.view.bounds; [self.view.layer addsublayer:gradientlayer]; uicolor *lightcolor = [uicolor colorwithred:40.0 / 255.0 green:150.0 / 255.0 blue:200.0 / 255.0 alpha:1.0]; uicolor *whitecolor = [uicolor colorwithred:255.0 / 255.0 green:250.0 / 255.0 blue:250.0 / 255.0 alpha:1.0]; //可以设置多个colors, gradientlayer.colors = @[(__bridge id)lightcolor.cgcolor,(__bridge id)whitecolor.cgcolor]; //45度变色(由lightcolor－>white) gradientlayer.startpoint = cgpointmake(0, 0); gradientlayer.endpoint = cgpointmake(1, 1);
雪花粒子发射器
caemittercell *cell = [[caemittercell alloc] init]; //展示的图片 cell.contents = (__bridge id _nullable)([uiimage imagenamed:@"white"].cgimage); //每秒粒子产生个数的乘数因子，会和layer的birthrate相乘，然后确定每秒产生的粒子个数 cell.birthrate = 2000; //每个粒子存活时长 cell.lifetime = 5.0; //粒子生命周期范围 cell.lifetimerange = 0.3; //粒子透明度变化，设置为－0.4，就是每过一秒透明度就减少0.4，这样就有消失的效果,一般设置为负数。 cell.alphaspeed = -0.2; cell.alpharange = 0.5; //粒子的速度 cell.velocity = 40; //粒子的速度范围 cell.velocityrange = 20; //周围发射的角度，如果为m_pi*2 就可以从360度任意位置发射 //cell.emissionrange = m_pi*2; //粒子内容的颜色 // cell.color = [[uicolor whitecolor] cgcolor]; //设置了颜色变化范围后每次产生的粒子的颜色都是随机的 cell.redrange = 0.5; cell.bluerange = 0.5; cell.greenrange = 0.5; //缩放比例 cell.scale = 0.2; //缩放比例范围 cell.scalerange = 0.02; //粒子的初始发射方向 cell.emissionlongitude = m_pi; //y方向的加速度 cell.yacceleration = 70.0; //x方向加速度 // cell.xacceleration = 20.0; _emitterlayer = [caemitterlayer layer]; //发射位置 _emitterlayer.emitterposition = cgpointmake(screen_width/2.0, 0); //粒子产生系数，默认为1 _emitterlayer.birthrate = 1; //发射器的尺寸 _emitterlayer.emittersize = cgsizemake(screen_width, 0); //发射的形状 _emitterlayer.emittershape = kcaemitterlayerline; //发射的模式 _emitterlayer.emittermode = kcaemitterlayerline; //渲染模式 _emitterlayer.rendermode = kcaemitterlayeroldestfirst; _emitterlayer.maskstobounds = no; //_emitterlayer.zposition = -1; _emitterlayer.emittercells = @[cell]; //emitterview是自己创建的一个view [self.emitterview.layer addsublayer:_emitterlayer];
代码中都有注释，这里进行简单的解释
caemittercell粒子单元
caemitterlayer发射器
ca_extern nsstring * const kcaemitterlayerpoint//点 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayerline//线 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayerrectangle//矩形 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayercuboid//立方体 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayercircle//圆形 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayersphere//球形 ca_available_starting (10.6, 5.0, 9.0, 2.0);
emittermode 发射的模式，有4种值，分别是
ca_extern nsstring * const kcaemitterlayerpoints//从发射器中 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayeroutline//边缘 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayersurface//表面 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayervolume//中点 ca_available_starting (10.6, 5.0, 9.0, 2.0);
rendermode 渲染模式,有5种取值，分别是(我更改体验了下，暂没找出啥不同😄)
ca_extern nsstring * const kcaemitterlayerunordered//粒子是无序出现的，多个发射源将混合 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayeroldestfirst//声明久的粒子会被渲染在最上层 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayeroldestlast//年轻的粒子会被渲染在最上层 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayerbacktofront//粒子的渲染按照z轴的前后顺序进行 ca_available_starting (10.6, 5.0, 9.0, 2.0); ca_extern nsstring * const kcaemitterlayeradditive//进行粒子混合 ca_available_starting (10.6, 5.0, 9.0, 2.0);
demo
demo中的烟花实现的就是更改了发射形状为圆形获得的,雪花发射形状改为圆形得到下图的样子，更多的自己去探索吧，有什么问题请留言探讨，共同进步，最后奉上demo地址，大家也可以通过进行学习。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
iOS14Beta3续航怎么样 iOS14Beta3续航能力介绍
iOS14Beta3稳定性怎么样 iOS14Beta3升级建议介绍
uniapp编写H5界面放入IOS全面屏原生导航栏盖住H5界面
游戏APP解决方案，8月1日起下架无版号ios手游的出路在哪？
我要评论
网友评论