Question

我是iOS开发的新手。当我按下秒表开始按钮时，我想显示计时器，如计数器令牌效果。我有附加图像供您参考。我已经完成显示秒和分钟，但我不知道，如何动画自动滚动效果？我怎么能这样做？

当计数器移动时，它不应该从一个数字跳到另一个数字，而是应该平稳地从一个数字移动到下一个数字，就像汽油泵计量器一样。谢谢 Default state

start 1

enter image description here

Answer 1

之前我做过类似的事情 - 这段代码不一定干净，但是它可以完成这项工作。

您想在.h文件中创建两个UILabel：

IBOutlet UILabel *figureLabel1;
IBOutlet UILabel *figureLabel2;

然后，您要创建BOOL，以便我们可以告知用户可以看到哪个UILabel。

BOOL firstLabel;

因此，假设初始标签（显示数字1）为figureLabel1，将来显示的UILabel（显示数字2）为figureLabel2。但是，当计数器添加一个时，figureLabel2会向上移动并占据figureLabel1的位置。然后，在figureLabel1被隐藏的同时，当figureLabel2可见时，它取代figureLabel1。

见这里：

    // Check what label is showing
    if (firstLabel == YES) {

    // Following code the hide and move the figureLabel1

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationDelegate: self]; //or some other object that has necessary method
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

    // Slowing fade out the figureLabel1
    [figureLabel1 setAlpha:0];

    // Move the figureLabel1 up and out of the way
    [figureLabel1 setFrame:CGRectMake(20, 108, 287, 55)];

    [UIView commitAnimations];

    // Following code the show and move the figureLabel2

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.5];

    // Slowing fade in the figureLabel2
    [figureLabel2 setAlpha:1];

    // Move the figureLabel2 up and into position
    [figureLabel2 setFrame:CGRectMake(20, 141, 287, 55)];

    [UIView commitAnimations];

    // Update BOOL for next label
    firstLabel = NO;

} else {
    // Exactly the same but opposite

}

正如我所说，这并不漂亮，但它显示了基本概念。一切顺利！

Answer 2

您需要手动滚动tableView而不是scrollToRowAtIndexPath，因为此动画使用自己的计时器间隔并且非常困难，或者我们可以说无法更改其时间间隔。

所以，我正在为这类问题实现一个API，并为你制作了一个演示应用程序，可以根据需要进行平滑滚动。

你需要使用一个每1秒触发一次的外部计时器和一个内部计时器，每隔0.03秒会触发一次，因为我的tableRow高度是30我计算的内部计时器间隔为：---

移动30个像素，持续1秒在内部计时器内移动1个像素0.33秒。

内部计时器将在外部计时器内初始化时每1秒失效并触发一次。

内部计时器将执行单元格的移动。

dial4是一个tableView

查看我的代码。

#define rowHeight 30

-(void)startCounter
{
    outertimer=[NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(snapCell) userInfo:nil repeats:YES];
}

-(void)stopCounter
{
    [outertimer invalidate];
}

-(void)snapCell
{
    NSLog(@"Initialize Internal timer %i",secLsb);
    secLsb++;

    if (secLsb==10) {
        [dial4 setContentOffset:CGPointMake(0, 0) animated:NO];
        secLsb=0;
         NSLog(@"dial content offset y is %f",dial4.contentOffset.y);
    }

    [internaltimer invalidate];
    internaltimer=[NSTimer scheduledTimerWithTimeInterval:0.03
                                     target:self
                                   selector:@selector(automaticScroll)
                                   userInfo:nil
                                    repeats:YES];
}

-(void)automaticScroll
{
    NSLog(@"val is & y ======== %f",dial4.contentOffset.y);

    [dial4 setContentOffset:CGPointMake(dial4.contentOffset.x,dial4.contentOffset.y+1) animated:NO];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return rowHeight;
}

查看Time Counter

Answer 3

从图像中可以假设您正在尝试获得倒计时器等效果。在这里查看countdown timer。它可能会以某种方式帮助你。

享受编程!!

Answer 4

请参阅两个链接以获取输出。它可以帮助你

UIPickerView that looks like UIDatePicker but with seconds

和

How can I make my UIPickerView show labels after the selected value?

感谢。

Answer 5

到目前为止，有几个好主意，但我会添加另一个。

首先，请务必使用Interface Builder中的Clip Subviews复选框将容器视图（您的蓝色矩形）设置为剪辑子项。

其次，添加一组子视图，其中包含每个要呈现的数字的每个数字的图像（在您的情况下，4 * 10 = 40个子视图）。在IB中使用标签，以便您轻松访问每个标签。将初始边界设置为低于底部边距。

调用UIView animateWithDuration。在动画块中，将新数字视图的帧设置为显示在剪切的父视图边界中，并将旧数字视图的帧设置在容器边界的正上方。由于两个视图的帧更改都在同一个块中进行了动画处理，因此当旧数字滑出顶部时，这将创建新数字滑动到位的效果。

在完成程序段中，将旧数字框架设置回容器视图下方的原始位置。

使用这种方法，您可以播放持续时间和时间曲线，以便您可以模拟在转换之间完全显示的每个数字发生的暂停。

类似的方法也可以与CALayer一起使用，或者与sprite一起使用，但UIViews是轻量级的，性能良好，最容易在Interface Builder中组装。

显示秒表定时器使用NSTimer像汽油泵仪表一样动画

5 个答案: