ios - iPhone开发中如何制作这个动画效果？ Quartz2d，核心动画？

Question

我想做的是一个带有不断增长的动画的条形图，文本(数字)也随着条形图长度的值而增长。看起来像:

条形应该水平增长，带有数字的文本也应该增长。并且用户可能想要通过点击“重播”再次播放动画。

阅读苹果编程指南和一些很棒的教程后，我有了一个大概的想法。使用 Quartz2d，我可以绘制条形图和垂直线，还可以绘制文本。但是 Quartz2d 没有动画效果。使用 Core Animation，我可以根据时间和指定的属性值更改条形。我说得对吗？

所以我想我想要的是结合 Quartz2d 和 Core Animation，先用 Quartz2d 绘制条形，然后使用 CA 对其进行动画处理？这是正确的方法吗？或者，如果有任何其他可用的轻量级解决方案，我将不胜感激。

PS:我对iPhone绘图很陌生，据我所知做动画最轻的方法是UIView动画，最轻的是CALayer动画。整个绘图工作是由 Quartz2d 完成的，我说得对吗？即使在我阅读之后还是有点困惑 this post .但实际上，我没有(或不能)对整个图形系统过于概念化。但是在写了一些关于这个的实际代码之后，我肯定会继续挖掘。

所以，现在，我只想知道这是否是实现这个动画效果的最佳方式。

谢谢大家 :)

Answer 1

我会使用像我在下面写的那样的东西。它会在 1.5 秒的过程中增加你的框架(当然，你可以改变持续时间)。我不确定您使用的是哪种对象。您可以只使用类似 UIView 的东西，并将 backgroundColor 设置为您想要的任何值。

// calculate your new frame - not sure what your parameters are as you've not explained it in your question.
CGRect newFrame = CGRectMake(10, 10, 300, 40);  // arbitrary values to demonstrate process... 

[UIView animateWithDuration:1.5 animations:^{
    // grow your rect (assuming yourShape is a UIView)
    yourShape.frame = newFrame;
    yourLabel.center = CGPointMake(newFrame.size.width - yourLabel.frame.size.width, yourLabel.center.y)
} completion:^(BOOL finished) {
    // do anything here that needs to occur after..

}];

不确定“增加文本”(增加文本或增加字体大小)到底是什么意思，所以我给出了一个示例，将文本保留在单杠的末尾(右侧)) .这应该为试验 UIView 动画提供一个良好的起点。

---

增量标签更新

您需要使用 NSTimer 来递增您的标签。试试这段代码。

在你的.h

int maxNum;
NSTimer *numTimer;

在你的.m

用它来开始你的计数。您可能希望将它放在 UIView 动画之前。

maxNum = 100;  // make this whatever number you need..
// you can change the TimeInterval to whatever you want..
numTimer = [NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(growNumbers:) userInfo:nil repeats:YES];

这是定时器每次触发时调用的选择器(每 0.03 秒):

- (void)growNumbers:(id)sender {
    int i = self.numberLabel.text.intValue;
    if (i >= maxNum) {
        [numTimer invalidate];
        maxNum = 0;
    } else {
        i++;
        self.numberLabel.text = [NSString stringWithFormat:@"%i",i];
    }
}