JDFlipNumberView & JDFlipImageView

目标值动画	动画时间显示

FlipNumberView 模拟了像机场或火车站那样类似的老式电子翻牌显示器。这是一个非常好的抽象，并且非常容易使用。FlipImageView 允许您在任意视图上运行类似动画，例如图像。请查看示例项目获取工作示例（您可以运行 pod try JDFlipNumberView 以快速打开示例项目）。如果您认为有任何遗漏或有错误，请提交 GitHub 问题。

使用 CocoaPods 进行安装

• pod 'JDFlipNumberView' 所有翻牌视图，SwiftUI 视图以及默认的图像集

要进一步限制您的依赖项，使用以下子 Pod。它们不包含默认的图像包，因此它们更轻量。请在下面的 定制 中查看如何使用您自己的图像。

• pod 'JDFlipNumberView/NoImageBundle' 除默认图像包之外所有内容
• pod 'JDFlipNumberView/NoImageBundle-NoSwiftUI' 除默认图像包和 SwiftUI 视图之外所有内容

更精确的

• pod 'JDFlipNumberView/Core' 仅 JDFlipNumberView
• pod 'JDFlipNumberView/FlipImageView' 仅 JDFlipImageView
• pod 'JDFlipNumberView/FlipClockView' /Core + JDFlipClockView
• pod 'JDFlipNumberView/DateCountdownFlipView' /Core + JDDateCountdownFlipView
• pod 'JDFlipNumberView/DefaultImageBundle' 默认图像包，因为它未自动包含在其他子 Pod 中

(有关cocoapods的信息，请查看cocoapods网站)

手动安装

1. 将JDFlipNumberView/JDFlipNumberView/*.{h,m}中的所有文件添加到您的项目中
2. 如果您想使用默认的图片，请添加JDFlipNumberView.bundle
3. 链接到QuartzCore.framework

内容

主要类包括

• JDFlipNumberView (SwiftUI: FlipNumberView)

  • 标准翻页数字视图。它以翻转视图的形式显示整数值。它具有可选择的数字数量。可以以本文档中描述的任何方式进行动画处理。

• JDFlipImageView (SwiftUI: FlipImageView)

  • 具有翻转动画的图片视图。使用方法与常规UIImageView相同，但通过setImageAnimated:duration:completion:设置新的图像进行动画处理。

• JDDateCountdownFlipView (SwiftUI: DateCountdownFlipView)

  • 日期倒计时。使用目标日期创建它，它将显示一个具有动画效果的翻转倒计时，显示直到该日期为止剩余的天、小时、分钟和秒数。

• JDFlipClockView (SwiftUI: FlipClockView)

  • 数字时钟。显示当前小时和分钟作为动画翻转视图。也可以启用秒数。始终显示当前时间。

• UIView+JDFlipImageView

  • 一种UIView类别，它使您可以使用翻转动画在任意两个视图之间进行转换。

使用示例

安装后，您只需遵循一些简单的步骤即可开始。这里有一个工作示例：一个4位FlipNumberView每秒翻转一次。

Objective-C + UIKit

// create a new FlipNumberView, set a value, start an animation
JDFlipNumberView *flipNumberView = [[JDFlipNumberView alloc] initWithDigitCount:4];
flipNumberView.value = 1337;
[flipNumberView animateDownWithTimeInterval: 1.0];

// add to view hierarchy and resize
[self.view addSubview: flipNumberView];
flipNumberView.frame = CGRectMake(20,100,300,100);

在SwiftUI中，这更简单

struct SwiftExample: View {
    @State var value = 1337

    var body: some View {
        FlipNumberView(value: $value, animationStyle: .interval(interval: 1.0, direction: .down))
          .frame(height: 80)
    }
}

就这么多。这将显示一个正常工作、翻转并动画的倒计时视图！
查看示例项目以获取其他示例。

可用的动画

• 简单（一次翻转）

- (void)setValue:(NSInteger)newValue animated:(BOOL)animated;
- (void)animateToNextNumber;
- (void)animateToPreviousNumber;

• 连续（翻转通过所有数字，直到达到目标）

- (void)animateToValue:(NSInteger)newValue duration:(CGFloat)duration;

• 间隔（无目标值的计时动画，每timeInterval翻转一次）

- (void)animateUpWithTimeInterval:(NSTimeInterval)timeInterval;
- (void)animateDownWithTimeInterval:(NSTimeInterval)timeInterval;

在SwiftUI中，请参阅这些

public enum FlipNumberViewAnimationStyle {
    case none
    case simple
    case continuous(duration: Double)
    case interval(interval: Double, direction: FlipNumberViewIntervalAnimationDirection)
}

自定义

A) 替换原始图像
替换 JDFlipNumberView.bundle 中的图像。（在 Finder 中，只需 右键单击 > 显示内容 就可以查看图像。）

当使用 Pods 时，请确保使用 pod 'JDFlipNumberView/Core'，这样就不会复制默认的包。只需在您的项目中自己创建一个名为 JDFlipNumberView.bundle 的包即可。

B) 使用多个包
将另一个图像包添加到您的项目中。包 nothing else，但比有扩展名 .bundle 的普通文件夹。每个数字需要一个图像 0.png, 1.png, 2.png, etc. 见下一节了解如何使用多个包。

实现自定义包

要使用您自己的包，请使用 imageBundle: 初始化器

[[JDFlipNumberView alloc] initWithDigitCount:<#count#> 
                                 imageBundle:[JDFlipNumberViewImageBundle imageBundleNamed:@"<#imageBundleName#>"]];
[[JDDateCountdownFlipView alloc] initWithDayDigitCount:<#count#> 
                                           imageBundle:[JDFlipNumberViewImageBundle imageBundleNamed:@"<#imageBundleName#>"]];

SwiftUI

FlipNumberView(value: <#valueBinding#>, imageBundle: JDFlipNumberViewImageBundle(named: "<#imageBundleName#>"))

您可以使用 gfx 文件夹中的原始 .psd 文件来创建自定义数字。

Twitter

我是 Twitter 上的 @calimarkus。如果你喜欢 JDFlipNumberView，也许可以 推文！