在我的开源商城项目的广告标题的滚动，在这里又简单的封装了一下，大致实现了三种格式的滚动类型：
效果截图
-
实现方面，我利用
UIView animateWithDuration结合CALayer的CATransform3D坐标变换做上下翻滚动画。
UIView animateWithDuration 就不做介绍了，简单介绍下CATransform3D以及两者相结合如果形成上下翻滚的立体动画的。
-
CATransform3D：在苹果的文档中它是定义在核心动画中使用的标准转换矩阵，用于旋转、缩放、转换、倾斜和投射图层内容。CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
angle：旋转的弧度，要把角度转换成弧度：角度 * M_PI / 180
x：向X轴方向旋转，值范围-1 — 1之间
y：向Y轴方向旋转，值范围-1 — 1之间
z：向Z轴方向旋转，值范围-1 — 1之间
-
翻滚核心实现代码：
#pragma mark - 标题滚动
- (void)titleRolling{
if (self.saveMiddleArray.count > 1) { //所存的每组滚动
__weak typeof(self)weakSelf = self;
[UIView animateWithDuration:self.rollingTime animations:^{
[self getMiddleArrayWithIndex:0 WithAngle:- M_PI_2 Height:- RollingViewHeight / 2]; //第0组
[self getMiddleArrayWithIndex:1 WithAngle:0 Height:0]; //第一组
} completion:^(BOOL finished) {
if (finished == YES) { //旋转结束
UIButton *newMiddleView = [weakSelf getMiddleArrayWithIndex:0 WithAngle:M_PI_2 Height: -RollingViewHeight / 2];
[weakSelf.saveMiddleArray addObject:newMiddleView];
[weakSelf.saveMiddleArray removeObjectAtIndex:0];
}
}];
}
}
#pragma mark - CATransform3D翻转
- (UIButton *)getMiddleArrayWithIndex:(NSInteger)index WithAngle:(CGFloat)angle Height:(CGFloat)height
{
if (index > _saveMiddleArray.count) return 0;
UIButton *middleView = self.saveMiddleArray[index];
CATransform3D trans = CATransform3DIdentity;
trans = CATransform3DMakeRotation(angle, 1, 0, 0);
trans = CATransform3DTranslate(trans, 0, height, height);
middleView.layer.transform = trans;
return middleView;
}
-
使用方式：导入头文件
CDDTitleRolling
DCTitleRolling.h文件中可以发现我重写了自定义View的initFrame方法,通过新建TitleRolling对象对titleDataBlock中的参数进行可选赋值来完成
/**
数据
*leftImage 左边图片
*rolTitles 标题数组
*rolTags tag数组
*rightImages 右边图片数组
*rightbuttonTitle 右边按钮（支持点击回调）
*interval 定时器滚动间隔
*rollingTime 滚动一次时间的长短
*titleFont 标题尺寸
*titleColor 标题颜色
*isShowTagBorder 是否展示tag标题边框（默认不）
@param frame 滚动标题的frame
@param titleDataBlock 设置滚动内部的数据
@return 数据展示
*/
- (instancetype)initWithFrame:(CGRect)frame WithTitleData:(void(^)(CDDRollingGroupStyle *rollingGroupStyle, NSString **leftImage,NSArray **rolTitles,NSArray **rolTags,NSArray **rightImages,NSString **rightbuttonTitle,NSInteger *interval,float *rollingTime,NSInteger *titleFont,UIColor **titleColor,BOOL *isShowTagBorder))titleDataBlock;
初始之外，我在.h中提供代理，回调和开始、结束方法等方法供使用选择
/** 点击代理 */
@property (nonatomic , assign) iddelegate;
/** 更多点击回调 */
@property (nonatomic, copy) dispatch_block_t moreClickBlock;
/**
开始滚动
*/
- (void)dc_beginRolling;
/**
结束滚动
*/
- (void)dc_endRolling;
-
demo调用展示三种不同类型的电商标题滚动,GIF效果图
/* 京东头条 */
@property (strong , nonatomic)DCTitleRolling *jdRollingView;
/* 国美在线 */
@property (strong , nonatomic)DCTitleRolling *gmRollingView;
/* 淘宝 */
@property (strong , nonatomic)DCTitleRolling *tbRollingView;
#pragma mark - JD
- (void)setUpJDRolling {
_jdRollingView = [[DCTitleRolling alloc] initWithFrame:CGRectMake(15, 100, self.view.frame.size.width - 30, 44) WithTitleData:^(CDDRollingGroupStyle *rollingGroupStyle, NSString *__autoreleasing *leftImage, NSArray *__autoreleasing *rolTitles, NSArray *__autoreleasing *rolTags, NSArray *__autoreleasing *rightImages, NSString *__autoreleasing *rightbuttonTitle, NSInteger *interval, float *rollingTime, NSInteger *titleFont, UIColor *__autoreleasing *titleColor, BOOL *isShowTagBorder) {
*rollingTime = 0.2; //可选，默认为0.5
*rolTags = @[@"HOT",@"HOT",@"",@"HOT"];
*rolTitles = @[@"小丑女的拍照秘籍竟然是？",@"2000热门手机推荐",@"好奇么？点进去哈",@"这套家具比房子还贵"];
*leftImage = @"shouye_img_toutiao";
*rightbuttonTitle = @"更多";
*interval = 3.0;
*titleFont = 14;
*titleColor = [UIColor darkGrayColor];
}];
_jdRollingView.moreClickBlock = ^{
NSLog(@"jd----more");
};
[_jdRollingView dc_beginRolling];
_jdRollingView.layer.cornerRadius = 15;
[_jdRollingView.layer masksToBounds];
_jdRollingView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_jdRollingView];
}
#pragma mark - GM
- (void)setUpGMRolling
{
_gmRollingView = [[DCTitleRolling alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 44) WithTitleData:^(CDDRollingGroupStyle *rollingGroupStyle, NSString *__autoreleasing *leftImage, NSArray *__autoreleasing *rolTitles, NSArray *__autoreleasing *rolTags, NSArray *__autoreleasing *rightImages, NSString *__autoreleasing *rightbuttonTitle, NSInteger *interval, float *rollingTime, NSInteger *titleFont, UIColor *__autoreleasing *titleColor, BOOL *isShowTagBorder) {
*rolTags = @[@"object",@"github",@"java/php"];
*rolTitles = @[@"DCTitleRolling 欢迎留言",@"喜欢的话可以给我点个Star✨✨",@"一门面向对象编程语言"];
*leftImage = @"shouye_img_toutiao";
*interval = 3.0;
*titleFont = 14;
*titleColor = [UIColor orangeColor];
*isShowTagBorder = YES;
}];
_gmRollingView.delegate = self;
[_gmRollingView dc_beginRolling];
_gmRollingView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_gmRollingView];
}
#pragma mark - TB
- (void)setUpTBRolling
{
_tbRollingView = [[DCTitleRolling alloc] initWithFrame:CGRectMake(0, 300, self.view.frame.size.width, 60) WithTitleData:^(CDDRollingGroupStyle *rollingGroupStyle, NSString *__autoreleasing *leftImage, NSArray *__autoreleasing *rolTitles, NSArray *__autoreleasing *rolTags, NSArray *__autoreleasing *rightImages, NSString *__autoreleasing *rightbuttonTitle, NSInteger *interval, float *rollingTime, NSInteger *titleFont, UIColor *__autoreleasing *titleColor, BOOL *isShowTagBorder) {
*rollingTime = 0.2;
*rightImages = @[@"jshop_sign_layer_not",@"jshop_sign_layer_ok",@"jshop_sign_layer_not"];
*rollingGroupStyle = CDDRollingTwoGroup;
*rolTags = @[@[@"热热",@"爆爆",@"红红"],@[@"冷知识",@"小常识",@"最新"]];
*rolTitles = @[@[@"喜欢的给个Star",@"苹果X爆冷，黄牛都哭了",@"还在等什么，赶紧抢购"],@[@"有问题欢迎留言~~",@"IOS 11 升级bug出现",@"科技风云惊奇出现等等的等"]];
*leftImage = @"topTitle";
*interval = 4.0;
*titleFont = 14;
*titleColor = [UIColor blueColor];
*isShowTagBorder = YES; //是否展示tag边框
}];
_tbRollingView.delegate = self;
[_tbRollingView dc_beginRolling];
_tbRollingView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_tbRollingView];
}
代理协议：
#pragma mark -
- (void)dc_RollingViewSelectWithActionAtIndex:(NSInteger)index
{
NSLog(@"点击了第%zd头条滚动条",index);
}
滚动gif.gif
如果想查看具体源码，请点击如下链接下载，如果问题和建议欢迎Issues