• iOS核心动画学习整理


      最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一些知识做了相应的整理,整理为demo(https://github.com/PurpleSweetPotatoes/Layer_learn)。此demo中都是基于教程书籍中的编程示例,并加上了注解以方便各位iOS爱好者学习使用。

      在这里利用此教程中的基础知识做了2个小demo,活动指示器效果和火焰效果。先让我们看看效果图

      

      在这里我需要使用到CALayer的两个子类CAReplicatorLayerCAEmitterLayer

      1.CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层,并在每个复制体上应用不同的变换。此处直接搬出运行代码

     1 //需要实例化的个数
     2         int numofInstance = 10;
     3         //动画时长
     4         CGFloat duration = 1.0f;
     5         //创建repelicator对象
     6         CAReplicatorLayer *repelicator = [CAReplicatorLayer layer];
     7         //设置其位置
     8         repelicator.frame = self.view.bounds;
     9         //需要生成多少个相同实例
    10         repelicator.instanceCount = numofInstance;
    11         //代表实例生成的延时时间;
    12         repelicator.instanceDelay = duration / numofInstance;
    13         //设置每个实例的变换样式
    14         repelicator.instanceTransform = CATransform3DMakeRotation(M_PI * 2.0 / 10.0, 0, 0, 1);
    15         
    16         //创建repelicator对象的子图层,repelicator会利用此子图层进行高效复制。并绘制到自身图层上
    17         CALayer *layer = [CALayer layer];
    18         //设置子图层的大小位置
    19         layer.frame = CGRectMake(0, 0, 10, 10);
    20         //子图层的仿射变换是基于repelicator图层的锚点,因此这里将子图层的位置摆放到此锚点附近。
    21         CGPoint point = [repelicator convertPoint:repelicator.position fromLayer:self.view.layer];
    22         layer.position = CGPointMake(point.x, point.y - 20);
    23         //设置子图层的背景色
    24         layer.backgroundColor = [UIColor whiteColor].CGColor;
    25         //将子图层切圆
    26         layer.cornerRadius = 5;
    27         //将子图层添加到repelicator上
    28         [repelicator addSublayer:layer];
    29         //对layer进行动画设置
    30         CABasicAnimation *animaiton = [CABasicAnimation animation];
    31         //设置动画所关联的路径属性
    32         animaiton.keyPath = @"transform.scale";
    33         //设置动画起始和终结的动画值
    34         animaiton.fromValue = @(1);
    35         animaiton.toValue = @(0.1);
    36         //设置动画时间
    37         animaiton.duration = duration;
    38         //设置动画次数
    39         animaiton.repeatCount = INT_MAX;
    40         //添加动画
    41         [layer addAnimation:animaiton forKey:nil];

      2.CAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果。CAEmitterLayer看上去像是许多CAEmitterCell的容器,这些CAEmitterCell定义了一个粒子效果。下面直接上代码

     1 - (CAEmitterLayer *)emitter {
     2     if (_emitter == nil) {
     3         //创建粒子图层容器
     4         CAEmitterLayer *layer = [CAEmitterLayer layer];
     5         //设置发射器位置
     6         layer.emitterPosition = self.view.center;
     7         //设置发射器范围
     8         layer.emitterSize = CGSizeMake(50, 30);
     9         //设置发射器形状
    10         layer.emitterShape = kCAEmitterLayerLine;
    11         //设置发射器发射模式
    12         layer.emitterMode = kCAEmitterLayerSurface;
    13         //设置发射器的渲染模式
    14         layer.renderMode = kCAEmitterLayerAdditive;
    15     
    16         _emitter = layer;
    17     }
    18     return _emitter;
    19 }

    接着创建CAEmitterCell粒子图层并放入CAEmitterLayer容器中

     1 //创建粒子
     2     CAEmitterCell *cell = [CAEmitterCell emitterCell];
     3     //配置粒子图像
     4     cell.contents = (__bridge id)[UIImage imageNamed:@"火焰"].CGImage;
     5     //粒子每秒发射个数
     6     cell.birthRate = 400;
     7     //粒子生命周期
     8     cell.lifetime = 3.0;
     9     //粒子旋转角度
    10     cell.spin = M_PI / 2;
    11     //粒子颜色
    12     cell.color = [UIColor colorWithRed:1.000 green:0.681 blue:0.178 alpha:1.000].CGColor;
    13     //粒子衰减过程
    14     cell.alphaSpeed -= 1;
    15     //粒子发射速度
    16     cell.velocity = 40;
    17     //粒子发射速度可变范围,如果此处设置为10 则速度值在30 - 50 之类变动
    18     cell.velocityRange = 10;
    19     //粒子缩放比例
    20     cell.scaleSpeed -= 1;
    21     //cell发射角度范围
    22     cell.emissionLongitude =  0;
    23     //cell发射偏转角度
    24     cell.emissionRange = M_PI / 4;
    25     //将配置好的粒子放入容器中
    26     self.emitter.emitterCells = @[cell];

      此处编写这两种效果图旨在引起各位iOS爱好者的对动画和layer层学习的兴趣,如想深入学习请点击上面链接自行学习。另外欢迎大家与笔者一起学习交流,对于只求代码者一律不回,谢谢!上述有任何错误欢迎指正!

  • 相关阅读:
    解决 el-table在ie11中默认状态下不是百分百展开的问题
    在vue中使用lexible.js 通过props传的style样式无法转换成rem
    解决 el-select 与 el-radio 组合字体发生闪烁问题
    解决element生成的下拉菜单,不在父级之下,而是在body之下,通过父级控制该下拉菜单的样式,达到不跟别的地方冲突的目的
    解决nvm use提示切换node版本成功,实际却没有切换过对应版本
    vue-element-admin安装失败的问题
    今天转正了,感谢博客园让我找到工作!
    electron-vue中点击按钮,实现打开程序目录里面的某个文件
    项目实战---模拟站酷网站
    vue实现选项卡切换效果
  • 原文地址:https://www.cnblogs.com/purple-sweet-pottoes/p/5003295.html
Copyright © 2020-2023  润新知