Skip to content

A skeleton screen framework based on native for iOS. (原生骨架屏,网络加载过渡动画)

License

Notifications You must be signed in to change notification settings

TrendingTechnology/TABAnimated

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

如果你此时看到这里你必须要知道, 将在五一期间发布一个比较重要的版本,合并当前两大模式。

the lastest version is 2.0.3.2 中文文档

About TABAnimated

The origin of TABAnimated by imitating jianshu animation in chinese palform early, i was attracted by its dynamics in Mid 2018. But i remove it over version 2.0, because i changed the realization principle of TABAnimated to cut coupling.

Realization Principle

TABAnimated needs a control view, the view used to start or end animations. all subviews onto the control view added to the animation queue acquiescently. Of course, you can remove specific views without the animation queue. TABAnimated create a group of TABLayer according to their position. (TABLayer is the subclass of CALayer.)

Almost all views can be resolved by TABAnimated.

When views have not enough condition to know position with none data, TABAnimated can use default data to fill them up.

TABAnimated has two patterns

Which two kinds?

Nomal pattern and template pattern.

Why?

First, for a normal view, there is no distinction between patterns. you do not care it. The concept of the template pattern is for tableView and collectionView only.

In most cases, if TABAnimated create animations by origin views' position, the animation is not beautiful, but you just need to make the right adjustments to look good by TABAnimated. so, if you don't care coupling in your project, you can use normal pattern. If you care coupling, you can use normal pattern. Meanwhile, you need create a new template file.

Features

  • Use three seconds to integrate it
  • Zero coupling
  • High Performance
  • All views you can see
  • Fully customized
  • Code is beautiful

Install

Using CocoaPods

pod 'TABAnimated'

Manually

Drag the folder named by TABAnimated to your project

Effect Drawing

Template - card Template - bin Template - shimmer Template - segment Normal - skeleton

How to use

you need only 4 steps

  1. import 'TABAnimated.h', advise you to set it on .pch
  2. init TABAimated on didFinishLaunchingWithOptions
// init `TABAnimated`, and set the properties you need.
[[TABViewAnimated sharedAnimated] initWithOnlySkeleton];
// demo changes the pattern quietly.
// you can change the pattern in different views.
[TABViewAnimated sharedAnimated].isUseTemplate = YES;
// open log
[TABViewAnimated sharedAnimated].openLog = YES;
// set gobal cornerRadius
[TABViewAnimated sharedAnimated].animatedCornerRadius = 3.f;
  1. [self.rootControlView tab_startAnimation];
  2. [self.rootControlView tab_endAnimation];

But evevryone have different views, TABAnimated used to solve the problem better.

Use Template Pattern

Template pattern on UITableView and UICollectionView only. Normal view looks like a superfluous move when useing template pattern.

1.set TABAnimatedObject properties

_collectionView.tabAnimated = [TABAnimatedObject animatedWithTemplateClass:[TABTemplateCollectionViewCell class] animatedCount:4];

TABAnimatedObject init methods

/**
 one section
 animation count full contentSize
 
 @param templateClass
 @return TABAnimatedObject.new
 */
+ (instancetype)animatedWithTemplateClass:(Class)templateClass;

/**
 one section
 specific animation count
 
 @param templateClass TABAnimatedObject.new
 @param animatedCount
 @return object
 */
+ (instancetype)animatedWithTemplateClass:(Class)templateClass
                            animatedCount:(NSInteger)animatedCount;

/**
 sections

 @param templateClassArray
 @param animatedCountArray
 @return object
 */
+ (instancetype)animatedWithTemplateClassArray:(NSArray <Class> *)templateClassArray
                            animatedCountArray:(NSArray <NSNumber *> *)animatedCountArray;

the array has security handling:

when animatedCountArray.count > section.count,the extra on animatedCountArray is not effective. when animatedCountArray.count < section.count,the financial departments load by animatedCountArray.lastobject.

  1. create template

UITableViewCell

  • create new cell,inherit TABBaseTableViewCell
  • override + (NSNumber *)cellHeight to set cellHeight
  • init subviews on it,and set positions

UICollectionViewCell

  • create new cell,inherit 继承自TABBaseCollectionViewCell
  • override + (NSValue *)cellSize to set cellSize
  • init subviews on it,and set positions
  1. [self.collectionView tab_startAnimation];
  2. [self.collectionView tab_endAnimation];
tips: TABAnimatedObject have more properties, you can find them on TABAnimatedObject.h.

Use Normal Pattern

  1. set properties
TABAnimatedObject *tabAnimated = TABAnimatedObject.new;
tabAnimated.animatedCount = 3;
_tableView.tabAnimated = tabAnimated;
  1. use loadStyle - TABViewLoadAnimationRemove, cancel add
UILabel *lab = [[UILabel alloc]init];
[lab setFont:tab_kFont(15)];
lab.loadStyle = TABViewLoadAnimationRemove;   // remove it
[lab setTextColor:[UIColor blackColor]];    
self.titleLab = lab;
[self.contentView addSubview:lab];
  1. [self.collectionView tab_startAnimation];
  2. [self.collectionView tab_endAnimation];

Tips

when using on normal pattern

  1. specificing when having none data.
- (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 (!_tableView.tabAnimated.isAnimating) {
        [cell initWithData:dataArray[indexPath.row]];
    }

    return cell;
}
  1. same as 1, you can also do by the following method.
- (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;
    }
    return cell;
}

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    TestTableViewCell *myCell = (TestTableViewCell *)cell;
    [myCell initWithData:dataArray[indexPath.row]];
}
  1. set animatedDelegate or set animatedCountArray

(1) UITableViewAnimatedDelegate and UICollectionViewAnimatedDelegate

_mainTV.animatedDelegate = self;
- (NSInteger)tableView:(UITableView *)tableView numberOfAnimatedRowsInSection:(NSInteger)section {
    if (section == 0) {
        return 5;
    }
    return 3;
}

(2) self.tableView.tabAnimated.animatedCountArray = @[@(3),@(3)];

  1. nest about tableView or collectionView
_collectionView.tabAnimated.isNest = YES;

More Global Properties

init methods name
initWithOnlySkeleton only Skeleton
initWithBinAnimation bin Animation
initWithShimmerAnimated Shimmer Animation

If you set the control view superAnimationType, the animation type of the control view according to superAnimationType.

name pattern animation default
animatedColor common common 0xEEEEEE
animatedDurationShimmer common shimmer animation 1.5
animatedHeightCoefficient common common 0.75
animatedCornerRadius common common 0.
templateTableViewCell pattern common 0.
templateCollectionViewCell pattern common 0.

Author

email:1429299849@qq.com

Hope

Demo is just a simple example I wrote, you can use the framework to play a more attractive effect. It has gone through many projects. This framework can solve all the problems in your project, conquer it quickly!

If you have any questions or suggestions, you can contact me by email. I'm looking forward to it. Surely, you can also push your code to me on this.

License

MIT License

Copyright (c) 2017 Juanpe Catalán

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

About

A skeleton screen framework based on native for iOS. (原生骨架屏,网络加载过渡动画)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 99.5%
  • Ruby 0.5%