(iOS)電商滾動廣告標(biāo)題

在我的開源商城項(xiàng)目的廣告標(biāo)題的滾動，在這里又簡單的封裝了一下，大致實(shí)現(xiàn)了三種格式的滾動類型：

效果截圖

  • 實(shí)現(xiàn)方面，我利用UIView animateWithDuration結(jié)合CALayer的CATransform3D坐標(biāo)變換做上下翻滾動畫。

UIView animateWithDuration 就不做介紹了，簡單介紹下CATransform3D以及兩者相結(jié)合如果形成上下翻滾的立體動畫的。

  • CATransform3D：在蘋果的文檔中它是定義在核心動畫中使用的標(biāo)準(zhǔn)轉(zhuǎn)換矩陣，用于旋轉(zhuǎn)、縮放、轉(zhuǎn)換、傾斜和投射圖層內(nèi)容。CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
angle：旋轉(zhuǎn)的弧度，要把角度轉(zhuǎn)換成弧度：角度 * M_PI / 180

x：向X軸方向旋轉(zhuǎn)，值范圍-1 — 1之間

y：向Y軸方向旋轉(zhuǎn)，值范圍-1 — 1之間

z：向Z軸方向旋轉(zhuǎn)，值范圍-1 — 1之間
  • 翻滾核心實(shí)現(xiàn)代碼：
#pragma mark - 標(biāo)題滾動
- (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) { //旋轉(zhuǎn)結(jié)束
                UIButton *newMiddleView = [weakSelf getMiddleArrayWithIndex:0 WithAngle:M_PI_2 Height: -RollingViewHeight / 2];
                [weakSelf.saveMiddleArray addObject:newMiddleView];
                
                [weakSelf.saveMiddleArray removeObjectAtIndex:0];
            }
        }];
    }
    
}

#pragma mark - CATransform3D翻轉(zhuǎn)
- (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;
}

  • 使用方式：導(dǎo)入頭文件CDDTitleRolling

DCTitleRolling.h文件中可以發(fā)現(xiàn)我重寫了自定義View的initFrame方法,通過新建TitleRolling對象對titleDataBlock中的參數(shù)進(jìn)行可選賦值來完成

/**
 數(shù)據(jù)
 
 *leftImage 左邊圖片
 *rolTitles 標(biāo)題數(shù)組
 *rolTags   tag數(shù)組
 *rightImages 右邊圖片數(shù)組
 *rightbuttonTitle 右邊按鈕（支持點(diǎn)擊回調(diào)）
 *interval 定時器滾動間隔
 *rollingTime 滾動一次時間的長短
 *titleFont 標(biāo)題尺寸
 *titleColor 標(biāo)題顏色
 *isShowTagBorder 是否展示tag標(biāo)題邊框（默認(rèn)不）
 @param frame 滾動標(biāo)題的frame
 @param titleDataBlock 設(shè)置滾動內(nèi)部的數(shù)據(jù)
 @return 數(shù)據(jù)展示
 */
- (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中提供代理，回調(diào)和開始、結(jié)束方法等方法供使用選擇

/** 點(diǎn)擊代理 */
@property (nonatomic , assign) id<CDDRollingDelegate>delegate;
/** 更多點(diǎn)擊回調(diào) */
@property (nonatomic, copy) dispatch_block_t moreClickBlock;

/**
 開始滾動
 */
- (void)dc_beginRolling;

/**
 結(jié)束滾動
 */
- (void)dc_endRolling;

  • demo調(diào)用展示三種不同類型的電商標(biāo)題滾動,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; //可選，默認(rèn)為0.5
        *rolTags = @[@"HOT",@"HOT",@"",@"HOT"];
        *rolTitles = @[@"小丑女的拍照秘籍竟然是？",@"2000熱門手機(jī)推薦",@"好奇么？點(diǎn)進(jìn)去哈",@"這套家具比房子還貴"];
        *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 歡迎留言",@"喜歡的話可以給我點(diǎn)個Star??",@"一門面向?qū)ο缶幊陶Z言"];
        *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出現(xiàn)",@"科技風(fēng)云驚奇出現(xiàn)等等的等"]];
        *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];
}

代理協(xié)議：<CDDRollingDelegate>

#pragma mark - <CDDRollingDelegate>
- (void)dc_RollingViewSelectWithActionAtIndex:(NSInteger)index
{
    NSLog(@"點(diǎn)擊了第%zd頭條滾動條",index);
}
滾動gif.gif

如果想查看具體源碼，請點(diǎn)擊如下鏈接下載，如果問題和建議歡迎Issues

Demo上傳地址：CDDTitleRolling

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動畫效果，實(shí)現(xiàn)這些動畫的過程并不復(fù)雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6贊 30
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,159評論 1贊 23
  • 在iOS中隨處都可以看到絢麗的動畫效果，實(shí)現(xiàn)這些動畫的過程并不復(fù)雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5贊 13
  • Core Animation Core Animation，中文翻譯為核心動畫，它是一組非常強(qiáng)大的動畫處理API，...
    45b645c5912e閱讀 3,056評論 0贊 21
  • 花錢這件事上，卻最能看出一個人的基本素質(zhì)和心態(tài)。 基本素質(zhì)：尊重彼此，愿意為彼此之間的關(guān)系花錢 心態(tài)：籠統(tǒng)的講是樂...
    無路可循閱讀 291評論 0贊 1