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

iPhone

Mac.gif

PPCounter

前言

在新的項目中UI妹子設計出了一個相似於支付寶金額不斷增長的動畫,以下圖:

動效圖

而後就找度娘學習下了相關經驗,受到這篇博客的啓發: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!