使用 MSNumberScrollAnimatedView 显示数字时,可以添加数字滚动效果。
该项目是在 JTNumberScrollAnimatedView 的基础上修改的,感谢原作者。
移除了 startAnimation 方法中调用 prepareAnimations 方法,此方法的作用是为滚动内容做准备,已经在 setValue 方法中调用过了。
createAnimations 方法中的 duration 计算错误,应该减去 [numbersText count] - 1 个 durationOffset,因为 durationOffset 是相对于上一个 layer 动画结束的间隔,当有 n 个 layer 时,有 n-1 个间隔。
数字的排序是降序排序,isAscending 属性表示滚动的方向,默认为 NO,向下滚动。
iOS7
以上的系统。MSNumberScrollAnimatedView
文件夹中的所有文件拖入项目中#import "MSNumberScrollAnimatedView.h"
您可以使用和普通视图相同的方式来使用 MSNumberScrollAnimatedView
@property (nonatomic, weak) IBOutlet MSNumberScrollAnimatedView *numberAnimatedV;
MSNumberScrollAnimatedView *numberAnimatedV = [[MSNumberScrollAnimatedView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
// 样式相关
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) UIFont *font;
// 动画相关
@property (nonatomic, assign) NSTimeInterval duration; // 动画总持续时间
@property (nonatomic, assign) NSTimeInterval durationOffset; // 相邻两个数字动画持续时间间隔
@property (nonatomic, assign) NSUInteger density; // 滚动数字的密度
@property (nonatomic, assign) NSUInteger minLength; // 最小显示长度,不够补零
@property (nonatomic, assign) BOOL isAscending; // 方向,默认为NO,向上
[self.numberAnimatedV setNumber:@1234];
[self.numberAnimatedV startAnimation];
MSNumberScrollAnimatedView 使用 MIT 许可证,详情见 LICENSE 文件。
将数字拆分,每个数字对应一个滑动视图,在滑动视图上添加不同的数字,通过滑动滑动视图来实现数字滚动的效果,然后针对每个滑动视图设置不同的动画持续时间来实现数字滚动的视差效果。
在 configNumbersText 中的第一个 for 循环中,需要强制转换为 NSInteger,因为 minLength 和 length 都是 NSUInteger 类型(无符号整型),如果相减得到负数的话比较会存在问题,因为忽略了符号,所以会得到一个非常大的正整数。
为什么使用 CAScrollLayer 而不是 UIScrollerView?因为 CAScrollLayer 提供了与 UIScrollView 的基本功能。只不过它是 layer,只负责显示,不响应用户事件。项目中不需要响应用户事件,对 layer 做动画也较为灵活,所以使用 CAScrollLayer。
为什么使用 UILabel 而不是 CATextLayer?因为数字需要垂直和水平居中,UILabel 本身就是垂直居中的,而 CATextLayer 本身不支持垂直居中,如果要实现这种效果,就必须进行一些额外的操作。
在 createAnimations 方法中,使用 keyPath.sublayerTransform 而不是 transform,因为动画是应用在 CAScrollLayer 的子图层上的,而不是它本身。