如何在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];
    }
}