美文网首页常用的第三方橙红科技有限公司收录iOS 10优秀文章
iOS与macOS中一款优雅的数字/金额增减动效控件(支付宝内金

iOS与macOS中一款优雅的数字/金额增减动效控件(支付宝内金

作者: jkpang | 来源:发表于2016-10-20 19:38 被阅读1701次
PPCounter.gif

PPCounter

前言

在新的项目中UI妹子设计出了一个金额不断增加的动画,如下图:

动效图.gif

然后就找度娘学习下了相关经验,受到这篇博客的启发: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 :
https://github.com/jkpang/PPCounter, 欢迎Star,欢迎Fork!

(注: 我的使用了PPCounter组件的Mac APP开源项目: PPRows --在Mac上优雅的计算你写了多少行代码)

相关文章

网友评论

  • 7b3f15cccda8:发现你的好几遍文章都是讲如何使用,却没有讲如何实现的
    jkpang:@coding_chen 这是我的错,你把PPCount的版本指向0.2.0版本就可以了。因为昨天我在重构版本,好让0.5.0版本的PPCounter支持Mac OS X,在重新上传 CocoaPods 的时候遇到了麻烦,我会尽快解决!
    coding_chen:你好 我今天更新了cocoaPods之后, 一直没有办法安装成功PPCounter 我想问一下是什么情况
    以下是错误码:

    ```
    - `PPCounter/PPCounter.h (= 0.5.0)` required by `PPCounter/UIKit (0.5.0)`

    None of your spec sources contain a spec satisfying the dependency: `PPCounter/PPCounter.h (= 0.5.0)`.

    You have either:
    * out-of-date source repos which you can update with `pod repo update`.
    * mistyped the name or version.
    * not added the source repo that hosts the Podspec to your Podfile.

    Note: as of CocoaPods 1.0, `pod repo update` does not happen on `pod install` by default.
    ```
    jkpang:@GavinOY0123 抽时间我会补上:smile:

本文标题:iOS与macOS中一款优雅的数字/金额增减动效控件(支付宝内金

本文链接:https://www.haomeiwen.com/subject/txxquttx.html