Find the comrades here, and more or less have an understanding of the skeleton screen. Skeleton Screen is a solution to optimize the user's weak network experience, which can effectively alleviate the anxiety of users waiting.
TABAnimated is a solution for iOS developers to automatically generate skeleton screens. Developers can configure the already developed views to configure some global/local parameters through TABAnimated to automatically generate a skeleton screen that is consistent with their length.
Of course, TABAnimated will help you manage the lifecycle of the skeleton screen.
- [Integration Advantage] (# Integration Advantage)
- [Effect display] (# effect display)
- [demo process] (# demo process)
- [Integration Steps] (# Integration Step)
- [Question Search] (# Question Search)
- [Last emphasis] (# last emphasis)
- Highly automated
- Low coupling
- High performance
- Suitable for various scenarios
- High degree of customization
| Dynamic Animation | Card View | Bin Animation |
|---|---|---|
 |
 |
 |
| Shimmer Animation | Segmented View | Drop Animation |
|---|---|---|
 |
 |
 |
Dark Mode
| Toolbox Switching | setting page switching |
|---|---|
 |
 |
- CocoaPods
Pod 'TABAnimated'
- Carthage
Github "tigerAndBull/TABAnimated"
- Drag the TABAnimated folder into your project
Note: The demo demo downloaded on github, in order to simulate the real application scenario well, uses some familiar third parties, but TABAnimated does not depend on them.
Initialize TABAimated in didFinishLaunchingWithOptions
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
[TABAnimated sharedAnimated].openLog = YES;
Note: There are other animation types, global properties, and comments in the framework.
Control view: If it is a list view, then it is UITableView/UICollectionView, there are documents to explain.
NewsCollectionViewCell is the cell used in your list, of course, you have to bind other cells, it is also possible!
_collectionView.tabAnimated =
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class]
cellSize:[NewsCollectionViewCell cellSize]];
Note
- There are other initialization methods, such as a variety of common cells, there are comments in the framework
- There are local properties for this control view, there are comments in the framework
Open animation
[self.collectionView tab_startAnimation];
- Turn off the animation
[self.collectionView tab_endAnimation];
_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);
};
A: It does not need to be adjusted asynchronously. It needs to be adjusted to what extent, and it is related to your own constraints and product requirements. Therefore, it does not automatically generate the effect that any product, anyone is completely satisfied immediately. You can rest assured that launching this feature will help developers adjust the results they want more quickly.**
A: In the appDelegate set TABAnimated's openAnimationTag attribute to YES, the framework will automatically indicate for you, what is x?
[TABAnimated sharedAnimated].openAnimationTag = YES;
- If the height and width of the 0th element are not appropriate
Manager.animation(0).height(12).width(110);
- If the first element needs to use a placeholder
Manager.animation(1).placeholder(@"bitmap name.png");
- If the 1, 2, and 3 elements are all 50 in width
Manager.animations(1,3).width(50);
- If the 1, 5, and 7 elements need to move down 5px
manager.animationWithIndexs(1,5,7).down(5);
(1) Before you integrate the table view, be sure to clarify your own view structure:
Divided into the following three
- One-to-one correspondence between section and cell style in section
- view has only 1 section, but corresponds to multiple cells
- dynamic section: the number of your sections is obtained by the network
(2) Understand your own needs:
- Set multiple sections/rows to start animation together
- Set multiple sections/rows, partially open animations
(3) Finally, find the corresponding initialization method and start the animation method in the framework!
Let's take a closer look at TABAnimated with a small example.
3. Jack is doing this demand, I am very satisfied with this effect, then Jack’s work is over. But Tom said, I feel that the length and height are similar to the original view, but I am not satisfied with the animation effect, not refined enough. So, he quickly made the following adjustments through (pre-processing callback + chain syntax).
Of course, in practical applications, we also have a variety of views, TABAnimated has experienced many products, all can be dealt with. But the above knowledge is certainly not enough. The following is a more detailed description of the document.
- You'd better have to (must) read the documentation:
- [Cache Policy and Threading] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E7%BC%93%E5%AD%98%E7%AD%96%E7%95 %A5%E5%92%8C%E7%BA%BF%E7%A8%8B%E5%A4%84%E7%90%86.md)
- The document you are most likely to use:
- [Preprocessing callback animation element subscript issue] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%8A%A8%E7%94%BB%E5%85%83% E7%B4%A0%E4%B8%8B%E6%A0%87%E9%97%AE%E9%A2%98.md)
- [Question Q&A Document] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E9%97%AE%E9%A2%98%E7%AD%94%E7%96%91 %E6%96%87%E6%A1%A3.md)
- [global: local attribute, chained syntax api] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%85%A8%E5%B1%80:%E5%B1% 80%E9%83%A8%E5%B1%9E%E6%80%A7%E3%80%81%E9%93%BE%E5%BC%8F%E8%AF%AD%E6%B3%95api. Md)
- Accessibility tools, techniques and other documentation you may use
- [Live Preview Tool] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88 %E5%B7%A5%E5%85%B7.md)
- [Detailed Douban Animation] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E8%B1%86%E7%93%A3%E5%8A%A8%E7%94%BB %E8%AF%A6%E8%A7%A3.md)
- [no more hook setDelegate and setDataSource] (https://github.com/tigerAndBull/TABAnimated/blob/master/Documents/%E4%B8%8D%E5%86%8Dhook%20setDelegate%E5%92%8CsetDataSource. Md)
If you still can't solve the problem, you can contact me as soon as possible, I believe TABAnimated can solve 99% of the demand
MIT License
Copyright (c) 2018 tigerAndBull
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 Copys 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.