MSNumberScrollAnimatedView 0.0.2

MSNumberScrollAnimatedView 0.0.2

测试已测试
语言语言 Obj-CObjective C
许可证 MIT
发布最后发布2016年5月

mrsong 维护。




  • 作者:
  • mrsong

使用 MSNumberScrollAnimatedView 显示数字时,可以添加数字滚动效果。

该项目是在 JTNumberScrollAnimatedView 的基础上修改的,感谢原作者。

主要修改了以下几点

  1. 移除了 startAnimation 方法中调用 prepareAnimations 方法,此方法的作用是为滚动内容做准备,已经在 setValue 方法中调用过了。

  2. createAnimations 方法中的 duration 计算错误,应该减去 [numbersText count] - 1 个 durationOffset,因为 durationOffset 是相对于上一个 layer 动画结束的间隔,当有 n 个 layer 时,有 n-1 个间隔。

  3. 数字的排序是降序排序,isAscending 属性表示滚动的方向,默认为 NO,向下滚动。

演示

screen

系统要求

  • iOS7 以上的系统。

安装

手动安装

  1. MSNumberScrollAnimatedView 文件夹中的所有文件拖入项目中
  2. 导入头文件:#import "MSNumberScrollAnimatedView.h"

使用

您可以使用和普通视图相同的方式来使用 MSNumberScrollAnimatedView

您可以在 xib 中使用

@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,向上

设置数字(注意:在设置数字之前,需要将这些属性设置好,例如 textColor、font、density、minLength 等)

[self.numberAnimatedV setNumber:@1234];

播放动画(注意:在 setNumber 之后,播放动画才会有效)

[self.numberAnimatedV startAnimation];

许可证

MSNumberScrollAnimatedView 使用 MIT 许可证,详情见 LICENSE 文件。

下次更新

  • 支持 CocoaPods 进行安装
  • 在 setNumber 之后设置的其他属性都可以生效

原理

将数字拆分,每个数字对应一个滑动视图,在滑动视图上添加不同的数字,通过滑动滑动视图来实现数字滚动的效果,然后针对每个滑动视图设置不同的动画持续时间来实现数字滚动的视差效果。

项目实现的一些细节

  1. 在 configNumbersText 中的第一个 for 循环中,需要强制转换为 NSInteger,因为 minLength 和 length 都是 NSUInteger 类型(无符号整型),如果相减得到负数的话比较会存在问题,因为忽略了符号,所以会得到一个非常大的正整数。

  2. 为什么使用 CAScrollLayer 而不是 UIScrollerView?因为 CAScrollLayer 提供了与 UIScrollView 的基本功能。只不过它是 layer,只负责显示,不响应用户事件。项目中不需要响应用户事件,对 layer 做动画也较为灵活,所以使用 CAScrollLayer。

  3. 为什么使用 UILabel 而不是 CATextLayer?因为数字需要垂直和水平居中,UILabel 本身就是垂直居中的,而 CATextLayer 本身不支持垂直居中,如果要实现这种效果,就必须进行一些额外的操作。

  4. 在 createAnimations 方法中,使用 keyPath.sublayerTransform 而不是 transform,因为动画是应用在 CAScrollLayer 的子图层上的,而不是它本身。

疑问

  1. 如果不使用 _scrollLabels 数组来保存 label,label 就会被回收,即使 layer 被添加了也不会显示,这是 layer 被回收了吗?