Question

我正在尝试在学习的精神上在iPhone上实现一个简单的测验应用程序，这个应用程序的一部分是一个计时器。

我希望我的计时器从10倒数到0.我有一个简单的NSTimer重复并每秒调用一个方法，在这个方法中我更新一个显示剩余时间的标签，这很好用。

现在我没有使用标签来显示计时器，而是想使用图形进度条，所以我创建了10个图像，一个是完整的（代表10个），下一个是9/10的大小，依此类推我的重复计时器方法而不是更新标签我用适当的图像更新UIImage所以随着时间的推移，进度条变得越来越小。

我的问题是，由于我实现进度条的方式，它每秒更新时看起来不太顺畅。我还有另一种方法来开发这种功能吗？我听说您可以使用可伸缩的图像来获得更平滑的效果，但我看不到任何好的例子。

欢迎任何建议和代码示例，只是想在这里学习。

Answer 1

在调查了几个选项后，我决定使用UIProgressView（在评论中由sudo建议）加上NSTimer，每秒十次更新进度十秒，我使用此解决方案是因为：

这是apple提供的标准元素。
此选项没有创建和加载100张图像的开销（如评论中Krypton所建议的那样）。
通过NSTimer，我可以在函数updateProgressBar中添加一个检查，以便在计时器达到低电平时向用户添加一些反馈，例如：振动最后三秒等（使用动画我不认为我会有这个选项）。

使用下面的代码假设我有一个名为'progressView'的UIProgressView变量，一个名为'timer'的NSTimer和一个名为'time'的浮点变量，然后：

-(void)updateProgressBar
{
    if(time <= 0.0f)
    {
        //Invalidate timer when time reaches 0
        [timer invalidate];
    }
    else
    {
        time -= 0.01;
        progressView.progress = time;
    }
}

-(void)animateProgressView2
{
    progressView.progress = 1;
    time = 1;
    timer = [NSTimer scheduledTimerWithTimeInterval: 0.1f
                                             target: self
                                           selector: @selector(updateProgressBar)
                                           userInfo: nil
                                            repeats: YES];
}

我调查的另一种方式（在看到迪斯科的评论之后）但决定不使用动画。在这个例子中，我创建了两个png图像，名为'redbar.png'和'greenbar.png'，这个想法带来了它们将被放置在彼此之上（绿色条位于顶部/前景中），并且在整个过程中绿色条收缩的动画，露出背景中的红色条。

UIImage *green= [UIImage imageNamed:@"greenbar.png"];
UIImage *red= [UIImage imageNamed:@"redbar.png"];

redBar.image = red; // allocate the red image to the UIImageView
redBar.frame = CGRectMake(20,250,220,30);// set the size of the red image

greenBar.image = green; // allocate the green image to the UIImageView
greenBar.frame = CGRectMake(20,250,220,30);//set the size of the green image

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:10]; //the time you want the animation to last for
[UIView setAnimationDidStopSelector:@selector(animationFinished)];//the method to be called once the animation is finished
    //at the end of the animation we want the greenBar frame to disappear
    greenBar.frame = CGRectMake(20,250,0,30);
[UIView commitAnimations];

理想的解决方案是组合UIProgressView和UIAnimation块，但目前这不是一个选项（请参阅此问题animate a UIProgressView's change）。

希望这有助于将来。

修改::

我上面提到的理想解决方案现在可以在iOS5中使用，取自苹果参考站点：

setProgress：动画：调整接收器显示的当前进度，可选择为更改设置动画。

（void）setProgress :( float）progress animated：（BOOL）animated

Answer 2

可能不是您正在寻找的但可能对您有所帮助。为什么不使用UIImageView将图片设置为完整尺寸，然后在设定的持续时间内为其应用一些UIView动画？这样收缩就会很顺利。

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"YourImage.png"]];
imageView.frame = CGRectMake(0,0,320,30);//starts big
[self.view addSubview:imageView];
[UIView beginAnimations:@"Progress Bar Animation" Context:nil];
[UIView setAnimationDuration:10]; //whatever time you want
imageView.frame = CGRectMake(0,0,10,30);//ends small
[UIView commitAnimations];

这可能是你正在寻找的，我不确定。看起来比使用十个不同的图像要容易一些。

Answer 3

我将设置进度从（0.01 - 1.00）增加到（0.001 - 1.000）并减少设置进度值之间的时差。

这是我的下面的代码，有三种不同的动画速度。

{{1}}

iPhone使用进度条计时器实现流畅的动画

3 个答案: