您的位置:首页 > 产品设计 > UI/UE

数字金额加减动效 - PPCounter

2016-10-25 06:16 489 查看

前言

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



然后就找度娘学习下了相关经验,受到这篇博客的启发:ios核心动画高级技巧,使用CADisplayLink定时器来做此动效的引擎(其实使用NSTimer和GCD定时器也可以做到,但使用CADisplayLink最佳)。

现在我已经将此效果从项目中分拆出来,独立封装好了,调用一句代码就可以实现数字加减的动效

支持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

1.1 设置一般字体属性UIButton

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

1.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:^{

// 完成的回调
}];
以上就是PPCounter的简单使用方法,更详细的用法请看Demo : https://github.com/jkpang/PPCounter, 欢迎Star,欢迎Fork!

你的star是我持续更新的动力!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息