Tag: 核心动画
Swift：在视图中添加波纹效果
当您需要用户注意应用程序的任何部分时，吸引用户注意的最佳方法是什么？ 动画是我能想到的…。有多种选择，例如 摇动视线 比例动画 不透明度动画 自定义动画（如Ripple） 在本文中，我将讨论在视图周围添加Ripple动画。 我将创建一个占用引用视图的函数，该视图将是UIView或其子类，并且我将使用Coregraphics和CoreAnimation 让我们创建一个函数名称addRippleEffect func addRippleEffect（to referenceView：UIView）{ } 在视图周围创建圆形路径 让路径= UIBezierPath（ovalIn：CGRect（x：0，y：0，宽度：referenceView.bounds.size.width，高度：referenceView.bounds.size.height）） 2.创建一个ShapeLayer并放置它，并提供我们创建的颜色和椭圆形路径 / *！ 形状层应为* / let的位置shapePosition = CGPoint（x：referenceView.bounds.size.width / 2.0，y：referenceView.bounds.size.height / 2.0）let波纹形状= CAShapeLayer（）rippleShape.bounds = CGRect（ x：0，y：0，宽度：referenceView.bounds.size.width，高度：referenceView.bounds.size.height）rippleShape.path = path.cgPathrippleShape.fillColor = UIColor.clear.cgColorrippleShape.strokeColor = UIColor.yellow。 cgColorrippleShape.lineWidth = 4rippleShape.position = shapePositionrippleShape.opacity = 0 3.将纹波层添加为参考视图的子层 referenceView.layer.addSublayer（rippleShape） 4.创建涟漪的比例动画 让scaleAnim = CABasicAnimation（keyPath：“ transform.scale”）scaleAnim.fromValue = NSValue（caTransform3D：CATransform3DIdentity）scaleAnim.toValue = […]
平滑核心动画雪景效果
最近，我决定制作一个雪景动画以纪念即将到来的假期！ 实际的动画比下面的gif平滑得多，但可以给您一个提示🙂 令人惊讶的是，不需要很多代码。 创建动画的步骤 从雪花资产创建CAEmitterCell 从CAEmitterCell创建一个CAEmitterCell 下雪了！ CAEmitterCell CAEmitterCell类表示由CAEmitterLayer对象发射的粒子的一种来源。 发射器单元定义了发射粒子的方向和属性。 发射器单元可以具有一个子单元阵列，该单元可以使粒子本身发射粒子。 通过此类，可以非常轻松地配置雪花的外观。 我强烈建议您阅读他们的文档以了解更多信息！ 让flakeEmitterCell = CAEmitterCell（） flakeEmitterCell.contents = UIImage（named：“ snowFlake”）?. cgImage flakeEmitterCell.scale = 0.06 flakeEmitterCell.scaleRange = 0.3 flakeEmitterCell.emissionRange = .pi flakeEmitterCell.lifetime = 20.0 flakeEmitterCell.birthRate = 40 flakeEmitterCell.velocity = -30 flakeEmitterCell.velocityRange = -20 flakeEmitterCell.yAcceleration = 30 flakeEmitterCell.xAcceleration = 5 flakeEmitterCell.spin = -0.5 flakeEmitterCell.spinRange = 1.0 CAEmitterLayer […]
您的（和我的）第一个带有核心动画的贝塞尔曲线
我很高兴学习Xcode中的动画。 这是我的背景，也是我的热情。 但是当我们学习UIView动画时，我非常失望。 这个过程感觉很笨拙，就像我无法在Maya或After Effects中所能控制的地方一样。 我决定学习Core Animation，这就是我要带您了解的内容。 这是一个用于bezier动画的非常简单的教程，只是让您不知所措。 什么是贝塞尔曲线？ 让我们从这里开始。 在设计工作时要理解这是一个非常重要的概念。 Adobe Creative Suite会大量使用它们。 贝塞尔曲线简单且可扩展，非常适合矢量图像。 如果您使用过Illustrator或Photoshop，则可能已经看到过贝塞尔手柄： 贝塞尔曲线也是计算机动画的基础。 可以沿贝塞尔曲线移动对象。 速度图使用贝塞尔曲线手柄。 它们允许轻松控制动画流，同时仍保持事物的紧密和流畅。 但是，贝塞尔实际上是什么？ 长的答案在于函数，但这不是您必须记住的东西。 我能找到的最好的视觉解释来自博客文章（如果您想深入研究贝塞尔曲线及其背后的微积分，则值得一读）： 简短的答案以及您需要了解的所有内容是， 贝塞尔曲线是具有起点和终点的直线，在点之间平滑插值以创建曲线。 如何为Core Animation制作动画？ 在探讨如何沿贝塞尔曲线进行动画处理之前，让我们研究一下Core Animation。 核心动画（用于与之关联的类，协议等的缩写CA）是一种基础结构，可用于为应用程序的视图和其他可视元素制作动画。 导入QuartzCore ，但是如果您已经包含在UIKit中 ，则不需要这样做，它是其中的一部分 设置要更改的视图。 我通过将变量声明为UIView并将其添加到主视图并设置其框架来以编程方式进行操作。 别忘了也给它加上背景色！ 和我一起玩，变黑。 输入以下代码： 让changeColor = CABasicAnimation（keyPath：“ backgroundColor”） changeColor.fromValue = backgroundView.backgroundColor changeColor.toValue = UIColor.white.cgColor changeColor.duration = 2 backgroundView.layer.add（changeColor，forKey：“ backgroundColor”） 这里发生了什么事？ 首先，将一个变量声明为CABasicAnimation（keypath […]
NSView和CALayer
我最近在构建macOS应用时遇到了动画问题。 我无法正确显示转换后的图层。 事情变得很时髦。 因此，我决定花一些时间再次阅读文档。 它带给我以下几点： 查看编程指南 核心动画编程指南 他们有这样的关系： NSView位于AppKit Framework内部，它可以成为层支持的视图，并添加硬件支持以渲染图形。 重要学习 使用CALayer后，视觉效果将由硬件渲染。 也就是说，纯NSView由CPU处理 与UIView相比，NSView具有翻转的坐标系。 NSView中的点（0，0）指向左下角 AppKit和NSView无法提供简单的方法来制作内容动画 实际上，Core Animation在macOS和iOS上是相同的。 但是，大多数iOS用户会使用UIView进行动画处理 核心动画利用keyPath定义要进行动画处理的内容 CATransaction可用于显式设置多个属性的动画 动画完成后，动画属性仍将保持原始值，因此视觉效果将在动画结束时跳回 在动画代码之后将动画属性设置为最终值 在设置锚点和其他转换之前，将子视图添加到视图层次结构 CATransform本身是一个值，而不是动画。 进行设置，图层将转换为该特定值。 我已经完成了一个示例项目，以通过沿x轴进行3D变换来展示上述知识。 harryworld / RenderedImageView RenderedImageView –学习CALayer github.com
Mac App动画外卖
我正在开发需要完成一些动画的Mac App。 实际上，我对Mac App上的动画主题还很陌生。 例如，我的动画代码可以在iOS中使用，但是我想移植到Mac App。 这是动画的一些要点，动画沿x轴旋转图层。 应用3D变换 只是从iOS复制代码，我遇到的第一个问题是初始转换无法正常工作。 我想将初始状态设置为旋转45度，但是该层保持在朝前的位置。 最后，我意识到在Cocoa中，必须在应用转换之前将视图添加到视图层次结构中。 如果不添加为子视图，则不会渲染相应的视图。 因此，应用变换对其没有影响。 转换所有子视图 在寻找上一个问题的解决方案时，我认为这可能是默认情况下不支持CALayer的问题。 我什至以为可能无法将转换应用于相应视图的根层。 我最终知道，如果我为转换创建了另一个CALayer，并将该层插入到层层次结构中。 仅此层将被转换，所有子视图（如NSTextField）将保持不变。 另一个发现是，可以在将根视图添加到视图层次结构之前转换此层。 比较iOS动画API 在iOS中，可以使用“ UIView.animateWithDuration（）” API进行动画处理。 该方法允许我设置持续时间，延迟，阻尼系数以及完成块。 但是，这个漂亮的API或类似的东西在Cocoa中不可用。 我最终使用“ CABasicAnimation”为旋转动画，然后使用“ CATransaction”应用完成块。 我可以选择使用委托方法来在动画完成时引起注意，但是我认为完成块使代码更清晰。 动画转换 如前所述，我使用CABasicAnimation对旋转进行动画处理。 它正在使用keyPath。 由于我要使图层沿x轴旋转，因此必须使用“ transform.rotation.x”。 该API非常简单，但是不够迅速。 keyPath的使用不是类型安全的。 自Swift 3起，此类API将会有巨大的改进。 Swift 3的API已变得稳定。 这将在Xcode 8公开发布中正式提供。 这是此职位的示例操场。 参考文献： 如何将适用于UIView的视图转换应用于NSView？ 将NSImageView的CALayer旋转90度 CATransform3DRotate旋转360度 CATransform3D关键路径 XCPlayground基础🎪
[核心动画]您对CAEmitterLayer有什么了解？
CAEmitterLayer是一种高性能的粒子引擎，旨在创建诸如火，雨，烟，雪等的粒子动画。 CAEmitterLayer是用于定义粒子效果的CAEmitterCell实例集合的容器。 您可以创建一个或多个CAEmitterCell对象作为模板 对于不同的粒子类型。 CAEmitterLayer负责根据这些模板实例化粒子流。 发射极层和电池特性如何？ CAEmitterLayer属性 CAEmitterLayer的属性控制粒子系统的位置和形状。 在birthRate上指定的属性诸如birthRate ， lifetime和velocity重复值。 它们作为乘数工作。 您可以使用单个值来加快或增加整个粒子系统。 其他重要特性： renderMode ：定义如何将粒子单元渲染到图层中。 preservesDepth ：定义3D粒子系统是扁平化为单层（默认情况下）还是可以与其容器层的3D空间中的其他层融合。 您可以在此处检查CAEmitterLayer的许多其他可配置属性。 CAEmitterCell属性 CAEmitterCell的属性分为三类： 粒子特定属性的起始值 。 例如， color属性定义将与contents图像中的颜色组合的混合颜色。 特定属性的值在粒子之间变化的范围。 例如，如果将emissionRange属性设置为2π，则可以在360度半径内的任何方向上发射粒子。 如果指定较小的值，则可以为粒子创建圆锥形漏斗。 特定值随时间的变化 。 例如，如果将alphaSpeed设置为-0.1，则粒子的alpha值将每秒减少0.1。 当粒子从发射器离开时，它还会为粒子创建淡入淡出效果。 最重要的属性是： CGImage ：分配一个CGImage用作图像。 color ：设置要应用于每个粒子的颜色。 alphaSpeed ：设置在单元的整个生命周期内，粒子淡出或淡入（以秒为单位）的速度。 birthRate ：设置birthRate要创建多少个粒子。 lifetime ：设置每个粒子应生存的时间（以秒为单位）。 velocity ：设置每个粒子的基本移动速度。 velocityRange ：设置可改变像元速度的量。 scale ：设置应有多大的粒子（全尺寸为1.0）。 scaleRange ：设置可改变单元格规模的数量。 spin ：设置应用于单元的旋转速度。 spinRange ：设置单元格旋转的数量。 […]
核心动画示例
什么核心动画可以帮助您： 高帧率和流畅的动画效果，而不会给CPU造成负担，也不会降低应用程序的运行速度。 对应用程序的动画进行更细粒度的控制。 UIView样式较高，例如拐角半径，阴影… 您可以下载最终项目，以在阅读本教程时了解更多信息 核心动画管理您应用的内容 核心动画本身不是绘图系统。 它是用于在硬件中合成和处理应用程序内容的基础结构。 该基础结构的核心是图层对象 ，您可以使用这些对象来管理和操作内容。 图层将您的内容捕获到位图中，图形硬件可以轻松地对其进行操作。 在大多数应用程序中，图层用作管理视图内容的一种方式，但是您也可以根据需要创建独立的图层。 您可以通过调用视图的layer属性来访问此layer对象。 以下示例通过更改视图图层的背景色来更改视图的背景色： 您还需要将UIColor转换为CGColor以获得图层的backgroundColor属性值 可以将层组织到层次结构中 可以按层次排列图层以创建父子关系。 层的排列以类似于视图的方式影响它们管理的视觉内容。 附加到视图的一组图层的层次结构反映了相应的视图层次结构。 您还可以将独立图层添加到图层层次结构中，以将应用程序的视觉内容扩展到视图之外。 我们将查看以下示例。 我们将创建一个新层并将其添加到主要视图层： 图层支持角半径 您可以通过在图层上添加圆角半径来为图层创建圆角矩形效果。 要将角半径应用到图层，请为该图层的cornerRadius属性指定一个值。 您指定的半径值以磅为单位测量，并在显示之前应用于图层的所有四个角。 图层支持内置阴影 CALayer类包含几个用于配置阴影效果的属性。 阴影使图层看起来像是漂浮在其基础内容之上，从而增加了图层的深度。 您可以控制阴影的颜色，相对于图层内容的位置，不透明度和形状。 动画化对图层属性的简单更改 您可以根据需要隐式或显式执行简单的动画。 隐式动画使用默认的时间和动画属性执行动画，而显式动画需要您自己使用动画对象配置这些属性。 因此，隐式动画非常适合您希望无需大量代码即可进行更改且默认计时适合您的情况。 要使用动画对象显式进行相同的更改，请创建一个CABasicAnimation对象，然后使用该对象配置动画参数。 在将动画添加到图层之前，可以设置动画的开始和结束值，更改持续时间或更改任何其他动画参数。 下面的示例演示如何使用动画对象淡出图层。 创建对象时，可以为要设置动画的属性指定关键路径，然后设置动画参数。 要执行动画，请使用addAnimation:forKey:方法将其添加到要设置动画的图层中。 使用关键帧动画更改图层属性 基于属性的动画将属性从开始值更改为结束值，而CAKeyframeAnimation对象使您可以以线性或非线性方式对一组目标值进行动画处理。 关键帧动画由一组目标数据值和应达到每个值的时间组成。 在最简单的配置中，您可以使用数组指定值和时间。 对于图层位置的更改，您还可以使更改遵循路径。 动画对象采用您指定的关键帧，并通过在给定的时间段内从一个值插入下一个值来构建动画。 以下示例显示了图层的position属性的5秒钟动画。 对该位置进行动画处理以遵循使用CGPath数据类型指定的路径。 指定关键帧值 关键帧值是关键帧动画中最重要的部分。 这些值定义了动画执行过程中的行为。 指定关键帧值的主要方法是作为对象数组。 放入数组的内容取决于属性所需的数据类型。 对于采用CGRect属性（例如边界和框架属性）， NSValue每个矩形包装在NSValue对象中。 对于图层的transform属性，将每个CATransform3D矩阵包装在NSValue对象中。 […]
使用Xcode Instruments诊断和解决性能问题
我们将创建一个简单的iOS应用程序，该应用程序在表视图中使用名称和头像来显示模拟动物列表。 阿凡达图片存储在我们的应用程序捆绑包中。 为了使应用程序表现得更真实，我们将实时分别加载化身图像，而不是使用imageNamed:方法预加载化身图像。 我们可以假设瓶颈是图像加载。 我们正在从闪存驱动器中实时加载图像，而不是对其进行缓存。 所以这可能就是为什么它很慢吧？ 可以使用一些很棒的代码来修复该问题，这些代码将使用GCD异步地推测性加载我们的图像，然后对其进行缓存。 在开始编写代码之前，让我们测试一下我们的假设。 让我们使用仪器工具来分析应用，以识别问题。 首先，我们对工具感兴趣，例如： Time Profiler：用于测量CPU使用率，按方法/功能细分。 核心动画：用于调试各种核心动画性能问题。 时间分析器 Time Profiler是用于监视CPU使用率的工具。 它使我们可以了解应用程序中哪些方法消耗最多的CPU时间。 高CPU使用率并不总是您应该意识到的-您最可能希望动画例程非常占用CPU，因为动画往往是iOS设备上最苛刻的任务之一。 如果您遇到性能问题，那么查看CPU时间是确定性能是否受CPU限制以及哪些方法需要优化的好方法。 核心动画 核心动画工具用于监视核心动画性能。 它给出了定期采样的FPS的细分，并考虑了发生在我们应用程序之外的部分动画。 核心动画工具还提供了许多调试选项，以帮助调试渲染瓶颈。 我们对选项感兴趣，例如： 颜色混合层：此选项突出显示正在发生混合的屏幕的任何区域，根据严重程度从绿色变为红色。 混合不利于GPU性能。 它会导致透支，并且是滚动或动画帧速不佳的常见原因。 颜色 shouldRasterize 绿色， shouldRasterize 红色：使用shouldRasterize属性时，将缓存昂贵的图层图形并将其渲染为单个展平的图像。 当必须重新生成缓存时，此选项以红色突出显示栅格化的图层。 如果频繁重新生成缓存，则表明光栅化可能会对性能产生负面影响。 屏幕外渲染的颜色为黄色：以黄色突出显示需要屏幕外渲染的任何层。 这些层可能是使用诸如shadowPath或shouldRasterize优化的候选shouldRasterize 。 我们的考虑可以归结为这种问题可能与图像加载有关的想法，所以让我们从Time Profiler工具开始。 在tableView: cellForRowAtIndexPath:方法（这是我们加载图像）中花费的CPU时间的总百分比仅为6％。 那真的不是那么高。 这可能是一个建议，说明CPU / IO不是此处的限制因素。 让我们看看这是否是GPU问题。 我们将检查GPU利用率。 GPU的平均硬件利用率约为72％。 看起来GPU不得不非常努力地渲染动物列表。 为什么GPU使用率如此之高？ 让我们使用“核心动画”工具的调试选项检查屏幕。 首先，启用“ 颜色混合图层”选项。 屏幕上所有的红色表示文本标签上的混合水平很高，这并不奇怪，因为我们必须使背景透明才能应用阴影效果。 这就解释了为什么渲染器利用率如此之高。 […]
核心动画宝石：在Swift中使用复制器层
要阅读所有代码示例的语法突出显示的帖子，请 转到Swift By Sundell ，您还可以在其中找到我的所有其他每周帖子和新播客👍 如果您曾经将像素推到Apple设备的屏幕上，则可以直接或间接使用Core Animation。 像苹果公司大多数核心框架系列一样，它是那些必不可少的技术之一，这些技术支撑着我们每天使用的众多工具-无论我们针对的是哪个平台。 尽管有大量关于核心动画的最常用API的出色教程和资源，例如使用CALayer为UIView执行更底层的渲染，或使用动画API（例如CAKeyframeAnimation ，但也有一些非常有用的尚未广为人知的功能。 在这个新的（非连续的）系列文章“核心动画宝石”中，我们将仔细研究其中的一些功能和API，以及如何使用它们来很好地解决与动画和渲染相关的问题。办法。 这周，让我们从第一个💎CAReplicatorLayer CAReplicatorLayer 。 专业化 Core Animation的图层类的体系结构非常围绕专业化的思想。 您拥有根类CALayer ，该类基本上是可以在其上绘制任何内容的通用画布，然后您可以拥有一系列专门用于某种渲染的子类。 CAReplicatorLayer专门以一种有效的，硬件加速的方式绘制原始层的多个副本（因此它是“复制者” ）。 当绘制平铺背景，图案或其他应重复多次的内容时，此功能非常有用。 我什至用它来实现我即将发布的开源Swift游戏引擎的纹理平铺功能。 您的UIColor可以做到吗？ 使用重复图像实现背景的一种非常常见的方法是使用UIColor ，它具有一个采用patternImage的初始化patternImage 。 它使您可以将重复的图像序列视为一种颜色，并将其用作背景，如下所示： view.backgroundColor = UIColor(patternImage: image) 在某些情况下，尽管绘制重复图像的方式可能正是您所需要的，但在其他情况下，您可能需要做一些更复杂的事情-这就是CAReplicatorLayer用武之地。 假设我们要绘制一个由重复图像组成的图案，但是我们也想用蓝色阴影对其进行着色，从而使该图案从图像的原始颜色形成渐变，直到完全着色为止，如下所示： 使用复制器层，无需任何自定义Core Graphics绘图代码即可轻松完成此操作。 让我们深入研究一下实现的外观。 设置东西 我们将从将复制器层设置为UIView层的子层开始，以便在屏幕上进行渲染（本文中的示例代码将针对iOS / tvOS，但其工作方式几乎完全相同苹果系统）： let replicatorLayer = CAReplicatorLayer() replicatorLayer.frame.size = view.frame.size replicatorLayer.masksToBounds = true view.layer.addSublayer(replicatorLayer) 我们 masksToBounds 上面 […]
