歡迎光臨
每天分享高質量文章

iOS – 原生骨架屏,網絡加載過渡動畫的封裝

本文目錄

  • 效果圖

  • 框架思維導圖

  • 使用教程

效果圖

1、閃光燈樣式

2、骨架屏樣式

3、經典動畫樣式

閃光燈動畫.gif

 

只有骨架屏.gif

 

經典動畫.gif

本專案思維導圖

思維導圖.JPG

說明

 

1、本文將介紹如何將demo集成到你的專案中

2、均為個人思考,轉載請註明出處,謝謝

 

簡要說明

 

一般情況下,移動端在展示服務器端資料時需要經歷
創建視圖 - 請求資料 - 得到資料並展示 三個步驟
本框架在未獲得到資料的這段空檔期內,根據視圖已有的位置信息,映射出一組相同的CALayer視圖以及部分動畫,在獲取到資料後,開發者主動結束動畫時一併移除掉。

使用流程

第一步:Install

 

CocoaPods

 

搜索:pod search TABAnimated
安裝:pod ‘TABAnimated’, ‘~> x.x.x’

 

第二步:在AppDelegate的didFinishLaunchingWithOptions方法全域性設置TABAnimated的相關屬性

 

初始化目錄圖.png

// 簡單的示例
[[TABViewAnimated sharedAnimated]initWithOnlySkeleton];

 

初始化目錄 名稱 是否全域性 superAnimationType
Default Animation 經典動畫樣式 該屬性無效
Shimmer Animation 閃光燈樣式 該屬性無效
OnlySkeleton 骨架屏樣式 該屬性無效
Custom Animation 自定義樣式 該屬性有效

 

說明:

 

1、全域性:專案中所有視圖的所有動畫,都是你所指定的初始化方法的那一種
非全域性:父視圖通過設置
superAnimationType,指定該父視圖下的所有子視圖的動畫型別(預設為經典動畫型別)
所以第四種初始化方式和superAnimationType屬性的意義:使得專案中可以用兩種以上動畫型別

2、Shimmer和OnlySkeleton的動畫,不需要為子視圖指定動畫型別,將預設設置為TABAnimationTypeOnlySkeleton,您可以使用demo查看效果(後面有提到)

 

選擇設置其他TABAnimated的屬性:

屬性名稱 適用樣式 含義 預設值
animatedColor 所有樣式 動畫顏色 0xEEEEEE
animatedDuration 經典動畫樣式 伸展來回時長 0.4
longToValue 經典動畫樣式 伸展變長時長度 1.6
shortToValue 經典動畫樣式 伸展變短時長度 0.6
animatedDurationShimmer 閃光燈樣式 閃光燈移動時長 1.5

 

第三步,父視圖需要的操作:在需要動畫的view上,將屬性animatedStyle設置為TABTableViewAnimationStart,不需要動畫的view不用做額外的操作

 

// UIView和UICollectionView列舉
typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {
    TABViewAnimationDefault = 0,               // 預設,沒有動畫
    TABViewAnimationStart,                     // 開始動畫
    TABViewAnimationRuning,                    // 動畫中
    TABViewAnimationEnd,                       // 結束動畫
    TABCollectionViewAnimationStart,           // CollectionView 開始動畫
    TABCollectionViewAnimationRunning,         // CollectionView 動畫中
    TABCollectionViewAnimationEnd              // CollectionView 結束動畫
};

// UITableView列舉
typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {
    TABViewAnimationDefault = 0,    // 沒有動畫,預設
    TABViewAnimationStart,          // 開始動畫
    TABViewAnimationEnd             // 結束動畫
};
// UITableView例子
- (UITableView *)mainTV {
    if (!_mainTV) {
        _mainTV = [[UITableView alloc] initWithFrame:CGRectMake(00, kScreenWidth, kScreenHeight)];
        _mainTV.animatedStyle = TABTableViewAnimationStart;  // 開啟動畫
        _mainTV.delegate = self;
        _mainTV.dataSource = self;
        _mainTV.rowHeight = 100;
        _mainTV.backgroundColor = [UIColor whiteColor];
        _mainTV.estimatedRowHeight = 0;
        _mainTV.estimatedSectionFooterHeight = 0;
        _mainTV.estimatedSectionHeaderHeight = 0;
        _mainTV.separatorStyle = UITableViewCellSeparatorStyleNone;
    }
    return _mainTV;
}

// UIView例子
- (TestHeadView *)headView {
    if (!_headView) {
        _headView = [[TestHeadView alloc]initWithFrame:CGRectMake(00, tab_kScreenWidth, 90)];
        _headView.animatedStyle = TABViewAnimationStart;  //開啟動畫
    }
    return _headView;
}

 

第四步,子視圖需要的操作 (只有經典動畫樣式,包括自定義樣式下的經典動畫需要此操作)

 

1、將需要動的組件的屬性loadStyle,設置為需要的型別(不需要動的組件不用做額外的操作)
2.(儘量不要使用)屬性
tabViewWidthtabViewHeight,其為動畫開啟時該組件的寬度,高度,有預設值

 

typedef enum {
    TABViewLoadAnimationDefault = 0//預設沒有動畫
    TABViewLoadAnimationShort,       //動畫先變短再變長
    TABViewLoadAnimationLong         //動畫先變長再變短
}TABViewLoadAnimationStyle;          //view動畫型別列舉

 

{
        UILabel *lab = [[UILabel alloc]init];
        [lab setFont:tab_kFont(15)];
        lab.loadStyle = TABViewLoadAnimationLong;
        lab.tabViewWidth = 100;
        lab.tabViewWidth = 20;
        [lab setTextColor:[UIColor blackColor]];

        titleLab = lab;
        [self.contentView addSubview:lab];
 }

 

第五步:在獲取到資料後,停止動畫,如下:

 

//停止動畫,並掃清資料
_mainTV.animatedStyle = TABTableViewAnimationEnd;
[_mainTV reloadData];

_headView.animatedStyle = TABViewAnimationEnd;
[_headView initWithData:headGame];

 

註意點(重要)

 

1、對於UITableView組件,在加載動畫的時候,即未獲得資料時,不要設置對應的數值

 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *str = @"TestTableViewCell";
    TestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:str];
    if (!cell) {
        cell = [[TestTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:str];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }

    //在加載動畫的時候,即未獲得資料時,不要走加載控制元件資料的方法
    if (_mainTV.animatedStyle != TABTableViewAnimationStart) {
        [cell initWithData:dataArray[indexPath.row]];
    }

    return cell;
}

 

2、對於UICollectionView組件:

 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"TestCollectionViewCell";
    TestCollectionViewCell *cell = (TestCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

    // 需要加上!!!
    [cell setNeedsLayout];

    // 在加載動畫的時候,即未獲得資料時,不要走加載控制元件資料的方法
    if (_collectionView.animatedStyle != TABCollectionViewAnimationStart) {
        [cell initWithData:dataArray[indexPath.row]];
    }
    return cell;
}

 

3、特別註意UIView和UICollectionView用的是同一列舉

 
再啰嗦一下:

 

1、本文只是簡單的引導作用,你可以用本框架訂製更精美的效果,具體例子github上代碼都有哦~

2、遇到問題先去demo上看看有沒有使用示例,實在不行聯繫我~

最後:

歡迎在下方討論,同時,如果覺得對你有所幫助的話,能在github上star一下就更好了~

如有問題,可以聯繫我,wx:awh199833

github地址:https://github.com/tigerAndBull/LoadAnimatedDemo-ios

 

赞(0)

分享創造快樂