美文网首页
iOS 图形动画

iOS 图形动画

作者: 桃逸 | 来源:发表于2017-11-01 09:26 被阅读37次

https://developer.apple.com/library/content/navigation/index.html#section=Topics&topic=Graphics%20%26amp%3B%20Animation

  • CoreAnimation
  • CoreGraphic
  • OpenGL
  • Quartz

1. 离屏渲染

离屏渲染,通常是在GPU中处理;
设置 CALayer.shouldRasterize 属性将离屏渲染;shouldRasterize =true将layer缓存为bitmap,适合不变的图像处理;
出现离屏渲染的情形有:

  1. Core Graphic 的使用 CPU
  2. 使用drawRect CPU
  3. CALayers 的 shouldRasterize 属性为 YES
  4. CALayers 使用 masksToBounds 和 shadow
  5. Any text including Core Text
  6. UIViewGroupOpacity
    离屏渲染offscreen会影响动画的性能,需要谨慎用之;
    可以使用Instruments在真机上检测UI的哪部分是离屏渲染,Core Animation监测(设置 Color Offscreen-Rendered Yellow 选中);

2. 界面流畅技巧

参考:http://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/
CPU & GPU

image.png
iOS设备视频输出采用双缓冲区+垂直同步( V-Sync信号),来保证画面的流畅与完整性;
  • 界面卡顿:
    CPU处理图像提交给GPU变换、合成和渲染,然后提交缓冲显示,CPU或GPU任何一个在一个vSync信号道来前没有将完整内容提交,都会造成一帧图像无法输出,界面还是显示之前的图像,这就是界面卡顿的原因;
  • CPU消耗:
    对象的创建,可以对象可以复用,可放在一个缓存池中进行复用;
    当视图层次调整时,UIView与CALayer之间会出现很多方法调用与通知,应该避免调整视图层次、添加和移除视图;
    大量的对象释放,放到后台线程去执行;
    视图布局是APP最常见消耗CPU的地方,可以后台线程提前计算好布局并进行缓存,可极大提高性能;
    文本计算及渲染,可放到后台线程,使用CoreText绘制与缓存;
    图片绘制,放到后台线程处理;
  • GPU消耗:
    文理渲染,短时间大量图片显示会导致GPU占用非常高而出现掉帧现象,所以要尽量减少短时间大量图片的显示,尽可能多张照片合成一张;
    视图混合,减少视图数量及层次,在不透明的视图里面标准opaque以避免无用的alpha通道合成;
    CALayer 的 border、圆角、阴影、遮罩(mask),CASharpLayer 的矢量图形显示,通常会触发离屏渲染(offscreen rendering),这些通常发生在GPU里;添加CALayer.shouldRasterize 属性,但这会把原本离屏渲染的操作转嫁到 CPU 上去;

"ASDK(AsyncDisplayLink) 认为,阻塞主线程的任务,主要分为布局、渲染及创建销毁对象这三大类。文本和布局的计算、渲染、解码、绘制都可以通过各种方式异步执行,但 UIKit 和 Core Animation 相关操作必需在主线程进行。ASDK 的目标,就是尽量把这些任务从主线程挪走,而挪不走的,就尽量优化性能。"

3. 自动布局动画

需要用到 layoutIfNeeded来立马刷新约束布局,不是等到下一个需要渲染的时候才刷新;
使用Masonry:
mas_updateConstraints

参考:
https://robots.thoughtbot.com/designing-for-ios-graphics-performance
AsyncDisplayKit - facebook 保持界面流畅的库

The End

相关文章

  • iOS核心动画总结

    基础概念 iOS图形架构 核心动画是 iOS 和 MacOS 上的图形渲染和动画基础结构,用于为应用的视图和...

  • iOS 图形动画

    https://developer.apple.com/library/content/navigation/in...

  • iOS动画总结

    前言 做个知识汇总,日常动画的动画实现,看这篇应该足够了 iOS图形分层 越顶层,动画的封装程度越高,动画api就...

  • iOS核心动画详解1

    一:基本概念 iOS 动画主要是指 Core Animation框架, 它是 iOS 和 OS X 平台上负责图形...

  • iOS CALayer视图图层

    在iOS中都会牵扯到图形转换,动画效果,添加视图,等等的一系列问题,在设计页面,设计图形,添加动画的时候都会使用到...

  • 核心动画一览

    基础 核心动画是 iOS 和 MacOS 上的图形渲染和动画基础结构,用于为应用的视图和其他视觉元素设置动画。 核...

  • CoreAnimation 学习笔记1—CAMediaTimin

    Core Animation:核心动画 iOS和macOS平台上负责图形渲染与动画,后台操作不阻塞主线程,作用在C...

  • iOS图形概论

    iOS与图形图像处理相关的框架都在这里了: 界面图形框架 -- UIKit 核心动画框架 -- Core Anim...

  • iOS - 核心动画(Core Animation)

    核心动画是iOS和OS X上的图形渲染和动画基础设施,可用于为应用程序的视图和其他视觉元素制作动画。对于核心动画,...

  • Core Animation介绍

    关于Core Animation Core Animation是可在iOS和OS X上使用的图形渲染和动画基础结构...

网友评论

      本文标题:iOS 图形动画

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