Question

我想为我的应用程序创建一个自定义仪表，它将显示一个心形，动画从下到上填充。

我不明白如何创造这种效果。

Answer 1

考虑到问题的模糊性，众多解决方案之一就是使用Core Animation。官方Apple文档是here。

让我们概述三个步骤：

概念步骤定义您将使用的图层（概念）或面具，并创建将在其中导入的图像
定义步骤定义您的CABasicAnimation并对图层进行编程
动画步骤应用修改

让我们详细介绍一下。

概念步骤

我们假设你选择了三层：

背景
空心的形状（例如，漂亮的银色线条，或者可能只是没有）
心形丰满（例如，一颗切成心形的宝石，或果冻，或苹果红皮......请问你的艺术家）

此时，如果您正在为iPad构建，您的艺术家已经为您提供了6个文件。我们假设以下名称和类型。

将这些文件作为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的图层子图层。为了我自己的缘故，我基于一颗善良的心heart shape做了一个found with Google。在你的项目中，你会想要我之前建议的真实艺术;）

构建图层的代码进入- (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的好文章。

使用图像Objective C创建自定义仪表

1 个答案: