iOS與macOS中一款優雅的數字/金額增減動效控制元件(支付寶內金額增加效果)

jkpang發表於2017-02-27
iOSMac控制元件

iOS與macOS中一款優雅的數字/金額增減動效控制元件(支付寶內金額增加效果)
iPhone
iOS與macOS中一款優雅的數字/金額增減動效控制元件(支付寶內金額增加效果)
Mac.gif

PPCounter

前言

在新的專案中UI妹子設計出了一個類似於支付寶金額不斷增加的動畫,如下圖:

iOS與macOS中一款優雅的數字/金額增減動效控制元件(支付寶內金額增加效果)
動效圖

然後就找度娘學習下了相關經驗,受到這篇部落格的啟發:ios核心動畫高階技巧,使用CADisplayLink定時器來做此動效的引擎(其實使用NSTimer和GCD定時器也可以做到,但使用CADisplayLink最佳)。

現在我已經將此效果從專案中分拆出來,獨立封裝好了,呼叫一句程式碼就可以實現數字加減的動效 :

  • 支援iOS/macOS雙平臺(pods版本v0.5.0, 2017.03.07更新)
  • 支援UILable/UIButton/自定義文字 控制元件的數字加減動畫;
  • 支援一般文字屬性以及富文字屬性的字型顯示;
  • 支援四種時間曲線函式動畫:由慢到快再到慢、由慢到特別快、由快到慢、勻速;
  • 支援自定義的文字格式,例如:數字格式化千分位顯示;
  • 支援CocoaPods匯入

程式碼部分

1.1 設定一般字型屬性UILabel

....
[label pp_fromNumber:0 toNumber:100 duration:1.5 animationType:PPCounterAnimationTypeEaseOut formatBlock:^NSString *(CGFloat number) {
    // 此處自由拼接內容
    return [NSString stringWithFormat:@"%.2f",number];
} completeBlock:^{
    // 完成的回撥
}];複製程式碼

1.2 設定富文字字型屬性UILabel

....
[label pp_fromNumber:0 toNumber:100 duration:1.5 animationType:PPCounterAnimationTypeEaseOut attributedFormatBlock:^NSAttributedString *(CGFloat number) {

    // 此處自由設定富文字屬性的內容
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@""];
    return attributedString;
} completeBlock:^{
    // 完成的回撥
}];複製程式碼

2. UIButton

2.1 設定一般字型屬性UIButton

....
[button pp_fromNumber:0 toNumber:100 duration:1.5 animationType:PPCounterAnimationTypeEaseOut formatBlock:^NSString *(CGFloat number) {
    // 此處自由拼接內容
    return [NSString stringWithFormat:@"%.2f",number];
} completeBlock:^{
    // 完成的回撥
}];複製程式碼

2.2 設定富文字字型屬性UIButton

....
[button pp_fromNumber:0 toNumber:100 duration:1.5 animationType:PPCounterAnimationTypeEaseOut attributedFormatBlock:^NSAttributedString *(CGFloat number) {

    // 此處自由設定富文字屬性的內容
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@""];
    return attributedString;
} completeBlock:^{

    // 完成的回撥
}];複製程式碼

3, macOS Platform 使用

[[PPCounterEngine counterEngine] fromNumber:0
                                   toNumber:999
                                   duration:2.f
                          animationOptions:PPCounterAnimationOptionCurveEaseOut
                              currentNumber:^(CGFloat number) {
        // lable控制元件
        self.numberLabel.stringValue = [NSString stringWithFormat:@"%ld",(NSInteger)number];
    } completion:^{
            // 計數完成的回撥
        self.numberLabel.textColor = [NSColor redColor];
    }];複製程式碼

以上就是PPCounter的簡單使用方法,更詳細的用法請看Demo : github.com/jkpang/PPCo…, 歡迎Star,歡迎Fork!

相關文章