What is a skeleton plate?

I find people here who know something about skeleton screens, but let me just say one thing. Skeleton Screen is a scheme to optimize users’ weak network experience, which can effectively relieve users’ anxious feelings of waiting.

What is TABAnimated?

TABAnimated is a solution for iOS developers to automatically generate skeleton screens. You can configure some global/local parameters for the already developed view through TABAnimated to automatically generate a skeleton screen that matches its appearance. Of course, TABAnimated will help you manage the skeleton screen life cycle.

directory

  • Integration advantage
  • Results show
  • The demo process
  • The integration steps
  • The problem to retrieve
  • Finally stressed

Integration advantage

What are the advantages of a skeleton screen integrated with TABAnimated?

  • Is a kind of automatic solution, integration speed is very fast
  • Zero coupling, easy to encapsulate their animation logic into the base library, and easy to remove
  • Equipped with cache function, pressure switch controller is not stuck
  • Applicable to a wide range of scenarios, applicable to 99% of views in development
  • Very high degree of freedom, can be completely customized

Results show

Dynamic effect Card projection Breathing lamp
The flash Sectional view Douban effect

The demo process

Take a closer look at TABAnimated with a small example.

1. Xiao Ming and Xiao Zhang have a view like the one below, which needs to integrate the skeleton screen

2. Here are the effects generated by TABAnimated automation

3. Xiao Ming said that I was satisfied with the effect, so xiao Ming’s work was over here. But Zhang said, “I feel the length and height, although very similar to the original view, as an animation effect I am not satisfied, not refined enough.” So he quickly made the following adjustments with (preprocessing callback + chaining syntax).

Of course, everyone has a different aesthetic, and each product has a different need, so it’s up to you

The integration steps

1. Import into the project

  • CocoaPods
pod 'TABAnimated'
Copy the code
  • Carthage
github "tigerAndBull/TABAnimated"
Copy the code
  • Drag the TABAnimated folder into the project

Note: The demo download on Github uses a few familiar third parties for a good simulation of the real world, but TABAnimated itself doesn’t rely on them.

Initialization of global parameters

In didFinishLaunchingWithOptions initialization TABAimated

[[TABAnimated sharedAnimated] initWithOnlySkeleton];
[TABAnimated sharedAnimated].openLog = YES;
Copy the code

Note: There are other animation types, global properties, and comments in the framework.

Control view initialization

Control view: if the list view, so is the UITableView/UICollectionView, have to explain in detail the document.

NewsCollectionViewCell is the cell that you use in your list. If you want to bind other cells, it’s ok!

_collectionView.tabAnimated = 
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class] 
cellSize:[NewsCollectionViewCell cellSize]];
Copy the code

Note:

  • Other initialization methods, such as the common variety of cells, are annotated in the framework
  • There are local properties for this control view, which are commented in the frame

Four, control the skeleton screen switch

  1. Open animation
[self.collectionView tab_startAnimation];  
Copy the code
  1. Close the animation
[self.collectionView tab_endAnimation];
Copy the code

How to use preprocessing callback + chain syntax?

_tableView.tabAnimated.adjustBlock = ^(TABComponentManager * _Nonnull manager) {
    manager.animation(1).down(3).radius(12);
    manager.animation(2).height(12).width(110);
    manager.animation(3).down(-5).height(12);
};
Copy the code

1. Some people may look at the above and be shocked. Does integration need to be so complicated?

A: Whether asynchronous adjustment is necessary, and to what extent, depends on your own constraints and product requirements. Therefore, it is not automatically generated to make any product, anyone immediately completely satisfied with the effect. You can rest assured that this feature will help developers adjust their desired results more quickly. **

2. manager.animation(x)What is x?

A: Set the openAnimationTag property of TABAnimated to YES in the appDelegate, and the framework will automatically tell you what x is

[TABAnimated sharedAnimated].openAnimationTag = YES;
Copy the code

3. See some examples (preprocessing callback + chaining syntax)

  • Suppose the height and width of the 0th element are not appropriate
manager.animation(0).height(12).width(110);
Copy the code
  • Suppose the first element needs a placeholder map
manager.animation(1).placeholder(@"Placeholder name.png");
Copy the code
  • Suppose the first and second elements are 50 in width
Manager. Animations (1, 3). The width (50);Copy the code
  • Let’s say elements 1, 5, and 7 need to be moved down 5px
Manager. AnimationWithIndexs (1, 5, 7). The down (5);Copy the code

Table type view integration will see (UITableView/UICollectionView)

(1) Before you integrate table views, be sure to clarify your own view structure:

There are three types

  • Section is the unit, and the section and cell styles correspond one by one
  • A view has only one section, but multiple cells
  • Dynamic sections: Your number of sections is retrieved by the network

(2) Understand your own needs:

  • Set multiple sections/rows to animate together
  • Set multiple sections/rows, partially animate

(3) Finally find the corresponding initialization method and start animation method in the framework!

The problem to retrieve

Of course, in the real world, we have a wide variety of views, and TABAnimated has been through a lot of products to handle all of them. But the above knowledge is certainly not enough. The following is a more detailed documentation.

  • Documents you’d better (and must) read:
  • Caching policies and thread handling
  • Documents you are most likely to use:
  • Preprocessing callback drawing element subscript problem
  • Q&a documents
  • Global: local attributes, chained syntax API
  • Ancillary tools, techniques, and other documentation that you may need
  • Live preview tool
  • Douban animation in detail
  • No longer hook setDelegate and setDataSource

If you still can’t solve the problem, please contact me as soon as possible. I believe TABAnimated will solve 99% of your needs

Last but not least:

  • Have a question to see the demo and documentation ha, basic have ~
  • The demo is just a guide, and you can make it look better yourself
  • If you have any usage problems, optimization suggestions, good ideas, etc., you can follow the public account: tigerAndBull technology to share, scan code and group quick solution
  • Github address: github.com/tigerAndBul…