我想在 iOS 上模仿 Apple 风格的翻转计数器。
具体来说，这个东西会飞得很快。它不会是一个闹钟，想象一下玩家一次获得高分的分数块。计数器可能从 0 跳到 100，再跳到 5000，它不会按顺序递增，但当它递增时，它会以漂亮的剪辑动画到下一个数字，并且将在一两秒内跳到下一个目标值。它也没有固定的位数，如果需要的话，它可以从 0 数到 2,000,000。就像一个高分玩家一样，你不知道他们最终会得到什么。由于它不能为负，理论上最大值将为 UINT_MAX
我做了一些搜索，发现了一些很棒的资源，但在我看来，这两种资源都不是正确的方法。
这是一种 js/css 方法，理论上可以在 UIWebView 中运行：
本文介绍了如何在 Core Animation 中进行翻页。它足够详细，但在我看来，它缺少一些关键组件，并且会导致翻转时 UI 上的触摸被忽略。
现在，读完这些之后，我对如何自己做动画有了一些不同的想法，尝试权衡每种方法的优缺点：
1）加载UIWebView 中的 html 计数器批发。
- 明显的好处：可能大量的代码重用，快速而肮脏
- 明显的缺点：
UIWebView的开销以及从具有下一个数字的主机应用程序不断调用stringByEvaluatingJavaScriptFromString愚蠢的
2) 创建自定义精灵表并使用核心动画
- 明显的好处：本机代码，似乎比使用 Web 视图是一个不那么麻烦的方法
- 明显的缺点：此时创建自定义精灵表似乎有点面对自定义绘图毫无意义，因为无论如何我已经使用自定义绘图创建了视图。似乎让它表现良好的唯一方法是将图像绘制到子层，而不是使用 UIImageViews
3) 使用 Core Graphics 渲染文本/圆角矩形
- 明显的好处：100% 本机代码解决方案，无图像
- 明显的缺点：需要加载更多代码有一些 UIImage 实例。真的不知道在没有图像的情况下我是否可以获得正确的外观
4) 使用 OpenGL ES 2.0 渲染整个事物
- 明显的好处：完全控制渲染，可能是最佳性能
- 明显的缺点：在我看来，我仍然会这样做可能需要一些图像来绑定到纹理，可能比#3中的核心图形渲染堆积更多的代码
一方面，我可以合理化它并说动画只会持续半秒或一秒，所以最好的事情要做的就是只是用模糊的图像以某种方式伪造它，而不是真正为任何东西制作动画。另一方面，在我看来，这正是 Core Animation + Core Graphics 的设计初衷，我应该使用它们。
I'd like to mimic an Apple style flip counter on iOS.
Specifically, this thing is going to be FLYING FAST. It's not going to be an alarm clock, think player high-score where you are racking up points chunks at a time. The counter may jump from 0 to 100, to 5000, it will not increment sequentially, but when it does increment it will animate to the next number at a nice clip and it's going to be jumping to the next target value in a second or two. It will not have a set number of digit places either, it can count from 0 to 2,000,000 if it wanted to. Like a player high-score, you don't know what they will end up getting. Since it can't be negative, theoretically maximum would be UINT_MAX
I did some searching, and I found a couple of great resources, neither of which seems to me like the correct approach.
This is a js/css approach the theoretically could run inside a UIWebView:
And this article explains how to do page turning in Core Animation. It's detailed enough, but it seems to me like it's missing some key components, and would cause touches to get ignored on the UI while it's flipping.
Now, after reading these I've got some different ideas on how to do it on my own, trying to weigh the pluses and minuses of each approach:
1) Load up the html counter whole-sale in the UIWebView.
- Apparent benefits: possibly tons of code reuse, quick and dirty
- Apparent downsides: the overhead of a
UIWebView and constant calls to stringByEvaluatingJavaScriptFromString from the host app which has the next number just seems silly
2) Create a custom sprite sheet and use core animation
- Apparent benefits: native code, seems like it would be a less fugly approach than using the web view
- Apparent downsides: creating a custom sprite sheets at this point seems a bit pointless in the face of custom drawing since I'm already creating a view with custom drawing anyway. Seems like the only way to get it to perform well would be to draw images to sublayers rather than using UIImageViews
3) Render text/rounded rects with Core Graphics
- Apparent benefits: 100% native code solution, no images
- Apparent downsides: boatloads more code that having some UIImage instances. Don't really know if I can get the right look I'm after without the images
4) Render the whole thing with OpenGL ES 2.0
- Apparent benefits: complete control over rendering, possibly best performance
- Apparent downsides: seems to me like I would still probably need some images to bind to textures, probably piles more code than core graphics rendering in #3
On the one hand, I can rationalize it and say the animation is only going to last a half a second or a second, so the best thing to do is to just fake it somehow with blurry images and not actually animate anything. On the other hand it seems to me this is precisely what Core Animation + Core Graphics was designed to do well, and I ought to use them.
发布评论
评论（3）
最终使用图像精灵对图像进行绘图。
代码在这里
https://github.com/reklis/flipcounter
Ended up doing the drawing with images using image sprites.
code here
https://github.com/reklis/flipcounter
我正在等待积极答复。
谢谢你的建议
i am waiting for Positive Reply.
Thanks advane
如果是我，我会走核心图形路线，然后用drawrect方法将文本绘制到视图中。我可能会构建某种背景和前景图像，我可以将它们覆盖在文本上以实现 UIPickerView 的外观。由于您实际上只需要对文本进行动画处理，因此您可能可以覆盖某种半透明的渐变图像，使其看起来像是数字在翻转并进入阴影。
如果您不使用 OpenGL 编写游戏，那么 OpenGL 路线似乎有点过多。 （另外，您还必须编写一堆样板代码来渲染文本并将图像加载到纹理等中）
If it were me, I'd go the core graphics route and just draw the text into the view in the drawrect method. I'd probably construct some kind of background and foreground images that I can overlay the text with to achieve the UIPickerView look. Since you'd only really have to animate the text, you could probably overlay some kind of semi-transparent gradient image that will make it look like the numbers are flipping around and going into shadow.
The OpenGL route seems a bit excessive if you're not programming the game in OpenGL. (plus you'll have to write a bunch of boilerplate code to render text and load images into textures, etc.)