我想为我的应用程序创建一个自定义仪表，它将显示一个心形，动画以从下到上填充。
我不明白如何创建这种效果。
【问题讨论】：
标签： objective-c image gauge
鉴于问题的模糊性，众多解决方案之一是使用核心动画。 Apple 官方文档是here。
让我们概述三个步骤：
CABasicAnimation并对层进行编程让我们来看看细节。
概念步骤
假设您选择了三层：
此时，如果您正在为 iPad 构建，您的艺术家已经为您提供了 6 个文件。让我们假设以下名称和类型。
| Name | Type|
|:-----:|:––––:|
|background.jpg| background picture for iPad Mini |
|background@2x.jpg|background picture for iPad Retina and up |
|heartenclosure.png| heart border picture for iPad Mini |
|heartenclosure@2x.png|heart border picture for iPad Retina and up |
|heartbody.png| heart contents picture for iPad Mini |
|heartbody@2x.png|heart contents picture for iPad Retina and up |
一旦您拥有这些 JPG/PNG 文件，您就可以将它们导入 Xcode。注意拥有双倍和三倍尺寸的 Retina（和 iPhone 6+）。您将这些拖放到一个名为Images.xcassets 的文件中，该文件（几乎）是您的“图像存储”。
定义步骤
计划是让背景是静态的，心的内容在 jauge 更新时从当前高度动画到新高度，并且心边框作为顶层。
让我们构建背景图像：
UIImage* backgroundImg = [UIImage imageNamed:@"background"];
相同的代码将创建顶部图片：
UIImage* heartshapeImg = [UIImage imageNamed:@"heartenclosure"];
iOS 足够聪明，可以选择正确的图像，您不必传入 JPG 或 @2x 信息。默认情况下，添加到显示中的图像的 z-index 是“最新在顶部”。
图片制作完成后，在我的 iPhone 上看起来像 this（我向原画师道歉）。
我们要做的，这只是众多可能性中的一种，是创建三个CALayers 并将它们添加为UIView 的图层子层。
为了我自己的缘故，我基于一颗善良的心 found with Google 制作了一个 heart shape。在你的项目中，你会想要我之前建议的真实艺术；）
构建层的代码进入- (void) viewDidAppear:(BOOL)animated（因为此时框架已经设置好了）。
注意在心脏层上设置的名称，这将允许我们对其进行动画处理。
UIImage* backgroundImg = [UIImage imageNamed:@"background"]; UIImage* heartImage = [UIImage imageNamed:@"Coeur"]; UIImage* heartShapeImage = [UIImage imageNamed:@"Coeurshape"];
CALayer* backgroundLayer = [CALayer layer];
backgroundLayer.contentsGravity = kCAGravityResizeAspect;
backgroundLayer.opacity = 1;
backgroundLayer.opaque = YES;
backgroundLayer.hidden = NO;
backgroundLayer.cornerRadius = 20.0;
backgroundLayer.frame = CGRectInset(self.view.layer.frame, 20, 20);
backgroundLayer.backgroundColor = [[UIColor colorWithRed:1.1 green:1 blue:0 alpha:1.0]CGColor];
backgroundLayer.contents = (__bridge id) backgroundImg.CGImage;
backgroundLayer.contentsScale = [[UIScreen mainScreen] scale];
[self.view.layer addSublayer:backgroundLayer ];
CALayer* heartLayer =[CALayer layer];
heartLayer.contentsGravity = kCAGravityResizeAspect;
heartLayer.shadowOffset = CGSizeMake(0, 3);
heartLayer.shadowRadius = 5.0;
heartLayer.shadowColor = [UIColor blackColor].CGColor;
heartLayer.shadowOpacity = 0.8;
heartLayer.frame = CGRectInset(self.view.layer.frame, 80, 200);
heartLayer.contents = (__bridge id) heartImage.CGImage;
heartLayer.contentsScale = [[UIScreen mainScreen] scale];
[heartLayer setName:@"heartLayer"];
[self.view.layer addSublayer:heartLayer];
CALayer* heartShapeLayer =[CALayer layer];
heartShapeLayer.contentsGravity = kCAGravityResizeAspect;
heartShapeLayer.frame = heartLayer.frame;
heartShapeLayer.contents = (__bridge id)(heartShapeImage.CGImage);
heartShapeLayer.contentsScale = [[UIScreen mainScreen] scale];
[self.view.layer addSublayer:heartShapeLayer];
* 动画步骤*
通过使用CABasicAnimation 更改heartLayer 的边界，启用遮罩：heartLayer.masksToBounds = YES;，然后您可以显示您想要的心脏数量。
为了访问您的子图层，您需要使用其名称。 这个子程序可以解决问题：
- (CALayer *)findLayerByName:(NSString*) layerTagName inLayer:(CALayer*) layer{
for (CALayer *layer in [layer sublayers]) {
if ([[layer name] isEqualToString:layerTagName]) {
return layer;
}
}
return nil;
}
请注意，根据我之前的评论，使用 Swift 是一个不错的选择。 Ray Wenderlich 的网站上有一篇关于UIView animations in Swift 的精彩文章。
【讨论】：