• 青海“天然林管护+生态扶贫” 5517万亩天然林得到保护 2019-04-18
  • 生活-热门标签-华商生活 2019-04-18
  • 文化山西:风华长城岁月歌 2019-04-16
  • 中华龙舟大赛福州站收官 黑马异军突起摘大满贯 2019-04-16
  • 台湾布袋戏大师陈锡煌的两岸缘 2019-04-13
  • 老师:讲课再累都不怕 就怕各级搞检查讲课再累都不怕-教育时讯 2019-04-13
  • 行业变革中的房产经纪公司加盟暗战 ——凤凰网房产深圳 2019-03-31
  • 图解:习近平出席博鳌亚洲论坛2018年年会前瞻 2019-03-19
  • 外贸创新举措 让开放惠及世界 2019-03-15
  • 记者带你逛CES:体验未来科技 2019-03-14
  • 我的中国医改建议,彻底解决看病难看病贵 2019-03-14
  • 海空联合演练相关新闻 2019-01-05
  • 登录 立即注册
    金钱:

    广州快乐十分开奖记录

    广东快乐十分走势图牛:ios - 原生骨架屏,网络加载过渡动画的封装 [复制链接]

    2019-2-21 10:20
    liujh 阅读:140 评论:0 赞:0
    Tag:  

    效果图

    1. 广州快乐十分开奖记录 www.2hyn.net 闪光灯模式

    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(0, 0, 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(0, 0, tab_kScreenWidth, 90)];
            _headView.animatedStyle = TABViewAnimationStart;  //开启动画
        }    return _headView;
    }

    第四步,子视图需要的操作 (只有经典动画模式,包括自定义模式下的经典动画需要此操作):

    1. 将需要动的组件的属性loadStyle,设置为需要的类型(不需要动的组件不用做额外的操作)
      2.(尽量不要使用)属性tabViewWidth,tabViewHeight,其为动画开启时该组件的宽度,高度,有默认值

    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;
    }
    1. 对于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;
    }
    1. 特别注意UIView和UICollectionView用的是同一枚举

    再啰嗦一下:
    1. 本文只是简单的引导作用,你可以用本框架订制更精美的效果,具体例子github上代码都有哦~

    2. 遇到问题先去demo上看看有没有使用示例,实在不行联系我~

    最后:

    分享到:
    我来说两句
    facelist
    您需要登录后才可以评论 登录 | 立即注册
    所有评论(0)
    关闭

    每日头条

    通过邮件订阅最新 Code4App 信息
    上一条 /4 下一条
    联系我们
    关闭
    合作电话:
    13802416937
    Email:
    [email protected]
    商务市场合作/投稿
    问题反馈及帮助
    联系我们

    广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|广州快乐十分开奖记录 ( 广州快乐十分开奖记录 )

    返回顶部
  • 青海“天然林管护+生态扶贫” 5517万亩天然林得到保护 2019-04-18
  • 生活-热门标签-华商生活 2019-04-18
  • 文化山西:风华长城岁月歌 2019-04-16
  • 中华龙舟大赛福州站收官 黑马异军突起摘大满贯 2019-04-16
  • 台湾布袋戏大师陈锡煌的两岸缘 2019-04-13
  • 老师:讲课再累都不怕 就怕各级搞检查讲课再累都不怕-教育时讯 2019-04-13
  • 行业变革中的房产经纪公司加盟暗战 ——凤凰网房产深圳 2019-03-31
  • 图解:习近平出席博鳌亚洲论坛2018年年会前瞻 2019-03-19
  • 外贸创新举措 让开放惠及世界 2019-03-15
  • 记者带你逛CES:体验未来科技 2019-03-14
  • 我的中国医改建议,彻底解决看病难看病贵 2019-03-14
  • 海空联合演练相关新闻 2019-01-05
  • 河南快赢481软件破解版 大乐透开奖规则 双色球复式中奖计算器 新快3 体育彩票走势图带走线 波克棋牌 排列三试机号近10期 北京赛车计划 体彩p3开奖号码 天津时时彩开奖晚 快乐8官网下载app 时时彩人工计划 十一选五开奖直播 中国足彩 时时彩qq交流总群 彩票销售员培训