我是 iOS 开发的新手。当我按下秒表开始按钮时,我想显示计时器,如计数器令牌效果。我附上了图片供您参考。我已经完成显示秒和分钟但我不知道,如何动画自动滚动效果? 我怎样才能做到这一点?
当计数器移动时,它不应该从一个数字跳到另一个数字,而是应该从一个数字平稳地移动到下一个数字,就像汽油泵表一样。谢谢
我以前做过类似的事情 - 这段代码不一定干净,但它可以完成工作。
您想UILabel
在 .h 文件中创建两个 s:
IBOutlet UILabel *figureLabel1;
IBOutlet UILabel *figureLabel2;
然后你想创建一个BOOL
,这样我们就可以知道哪个UILabel
对用户可见。
BOOL firstLabel;
因此,让我们假设初始标签(显示数字 1)是,而要显示figureLabel1
的未来(显示数字 2)是。然而,当计数器加一时,则向上移动并取代'。然后,虽然是隐藏的,但它取代了when是可见的。UILabel
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
}
正如我所说,这并不漂亮,但它显示了基本概念。一切顺利!
您需要手动滚动 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;
}
看看时间计数器
从图像可以假设您正在尝试获得倒计时计时器之类的效果。在这里查看倒数计时器。它可能会以某种方式帮助你。
享受编程!
到目前为止,这里有几个好主意,但我会添加另一个。
首先,确保使用 Interface Builder 中的 Clip Subviews 复选框将容器视图(您的蓝色矩形)设置为剪辑子视图。
其次,为要呈现的每个数字添加一组带有每个数字的图像的子视图(在您的情况下为 4 * 10 = 40 个子视图)。在 IB 中使用标签,这样您就可以轻松访问每个标签。将初始边界设置为刚好低于下边距。
调用 UIView animateWithDuration。在动画块中,将新数字视图的框架设置为出现在剪辑父视图的边界中,并将旧数字视图的框架设置为刚好在容器边界的上方。由于两个视图的帧变化都是在同一个块中进行动画处理的,这将产生新数字滑入到位的效果,而旧数字滑出顶部。
在完成块中,将旧数字的框架设置回容器视图下方的原始位置。
使用这种方法,您可以使用持续时间和时间曲线,以便模拟在转换之间完全显示每个数字时发生的暂停。
类似的方法也可以用于 CALayer 或 sprite,但 UIView 是轻量级的,性能良好,并且最容易在 Interface Builder 中组装。