QiuDaniel/TABAnimated

the lastest version is v2.0.4 中文文档

Catalog

About TABAnimated
Implementation Principle
Benefits
Evolution Process
Effects
Installation
- Cocoapods
- Manually
Usage
Extension-Callback
Tips
Attribute Related
Author
Lastly
License

About TABAnimated

The origin version of TABAnimated is the dynamic effect of the skeleton screen of the jianshu web page. I have explored the template mode in v1.9, but the repetitive workload is not conducive to rapid construction. Moreover, the existence of the two modes is unreasonable, so this setting is deleted in v2.1, but the appearance of the template mode to delete is not unproductive, but instead brings a more reasonable implementation scheme and a more convenient construction method.

Implementation Principle

TABAnimated requires a control view to make the switch animation. All subViews under this control view will be added to the animation queue.

TABAnimated creates TABCompentLayer by controlling the position of the subViews of the view and related information. Normal control view with a TABLayer Table view, each cell has a TABLayer TABLayer is responsible for managing and displaying all TABCompentLayer.

When using constraints for layout, if the constraints are insufficient and there is no data, the location information of subViews will not be reflected, and TABAnimated will pre-populate the data.

Benefits

Rapid integration
Zero coupling, easy to wrap its animation logic into the base library
High performance with minimal memory loss
Chained syntax, fast and easy to read
Fully customizable to fit 99.99% view

Evolution Process

Can't see clearly, you can zoom in

Briefly explain:

The first picture: the original table component, the display situation when there is data

The second picture: is the animation group mapped after the table component starts the animation. I believe you can see that the effect is not very beautiful.

The third picture: for this unsightly animation group, through the callback, pre-processing, the following description

Effects

Dynamic	Card View	Bin Animation

Shimmer Animation	Segment View	Nested Tables

Installation

Using CocoaPods

Pod 'TABAnimated'

Manual Import

Drag the TABAnimated folder into the project.

Usage

You only need four steps

Initialize TABAimated in didFinishLaunchingWithOptions

There are other global properties, which are presented below in a table.

// init `TABAnimated`, and set the properties you need.
[[TABAnimated sharedAnimated] initWithOnlySkeleton];
// open log
[TABAnimated sharedAnimated].openLog = YES;

Control view initialization tabAnimated

Ordinary view:

self.mainView.tabAnimated = TABViewAnimated.new;
self.mainView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        View.animation(1).width(200);
        View.animation(2).width(220);
        View.animation(3).width(180);
 };

Table component:

_collectionView.tabAnimated =
[TABCollectionAnimated animatedWithCellClass:[NewsCollectionViewCell class]
                                    cellSize:[NewsCollectionViewCell cellSize]];
_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        View.animation(1).reducedWidth(20).down(2);
        View.animation(2).reducedWidth(-10).up(1);
        View.animation(3).down(5).line(4);
        View.animations(4,3).radius(3).down(5);
};

Turn on the animation

[self.collectionView tab_startAnimation];

Turn off the animation

[self.collectionView tab_endAnimation];

UIView corresponds to TABViewAnimated

UITableView corresponds to TABTableAnimated

UICollectionView corresponds to TABCollectionAnimated

There are also other initialization methods that support multiple sections.

In general, the registered cell can be mapped with the original cell.

Special application scenarios:

For example, there are many types of Sina Weibo post pages. Such a complicated page, rising to the animation level is definitely to design a unified animation. At this time, you can rewrite a cell, then register to the form, and map out the visual effects you want through this framework. This is also the evolution of the template function.

For additional details, continue to add additional documentation or view it on the github demo.

Extended Callback

The extension callback gives the animation group to the developer, which the developer can adjust. Because it is an adjustment, the chain syntax is added to allow developers to adjust quickly and easily.

_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
        View.animation(1).reducedWidth(20).down(2);
        View.animation(2).reducedWidth(-10).up(1);
        View.animation(3).down(5).line(4);
        View.animations(4,3).radius(3).down(5);
};

Parameter description (also detailed in the framework)

view.animation(x): The animation of the specified subscript of the view TABCompentLayer

view.animations(x,x): An array of animated individuals of the specified range of the view for uniform adjustment

up(x): How much to move up

down(x): How much to move down

left(x): How many moves to the left

right(x): How many moves to the right

height(x): modify height

Width(x): modify the width

reducedWidth(x): How much is the width compared to before

reducedHeight(x): How much is the height compared to before

radius(x): rounded corners

line(x): number of lines

space(x): spacing

These two parameters, if it is multi-line text, take effect by default according to the number of numberOfLines Ordinary animated individuals can also set these two properties to achieve the same effect.

remove(): Move out the animation group

toLongAnimation(): Give the individual a dynamic variable length animation

toShortAnimation(): Give the individual a dynamic shortening animation

special reminder:

In the TABAnimated.h file, there are global animation parameters

In TABViewAnimated.h, there are parameters for all animations in the control view

The above chained grammar, modified by specific animated individuals

priority:

Animated Individual Parameter Configuration > Control View Animation Parameter Configuration > Global Animation Parameter Configuration

Tips

Q: Which animation component corresponds to which component?

answer:

If you build with pure code, then you add the subscripts of the animation array corresponding to the component order, For example, if the first one is added to the cell, then its corresponding animation component is: view.animation(0) And so on, just open your cell file and look at the hierarchy to make adjustments.

However, if you create with xib, it's a pity to tell you that the order is the order in which the xib files are associated. The xib in the demo did a wrong demonstration, and there was a pit of caution. There are no other good ways to find it, and I hope to collect your suggestions.

UILabel with Multi-line

As mentioned above, here again, You can use .line(x) to set the number of lines. space(x) to set the spacing. Each animation component can set these two properties to achieve the same effect.

Multiple sections can be solved by the new form proxy method

But it is not recommended, because the initialization method can be completely solved.

UITableViewAnimatedDelegate and UICollectionViewAnimatedDelegate

_mainTV.animatedDelegate = self;

- (NSInteger)tableView:(UITableView *)tableView numberOfAnimatedRowsInSection:(NSInteger)section {
    If (section == 0) {
        Return 5;
    }
    Return 3;
}

Expand the callback when using multiple sections

_collectionView.tabAnimated.categoryBlock = ^(UIView * _Nonnull view) {
            
      If ([view isKindOfClass:[CourseCollectionViewCell class]]) {

      }
            
      If ([view isKindOfClass:[DailyCollectionViewCell class]]) {
            View.animations(1,3).height(14);
            View.animation(2).down(6);
            View.animation(1).up(1);
            View.animation(3).up(6);
      }
  };

For nested table components, the isNest attribute of the table component to be nested needs to be set to YES. See demo for details.

_collectionView.tabAnimated = [[TABAnimatedObject alloc] init];
_collectionView.tabAnimated.isNest = YES;
_collectionView.tabAnimated.animatedCount = 3;

Attribute Related

Initialization Method	Name
initWithOnlySkeleton	Skeleton Screen
initWithBinAnimation	Breathing Light Animation
initWithShimmerAnimated	Flash Animation

If the control view's superAnimationType is set, it will be loaded with the animation type declared by superAnimationType

**Global animation properties: **

Instructions

[TABAnimated shareAnimated].xxx = xxx;

Property Name	Applicable Animation	Meaning	Default
animatedColor	General	Animated Color	0xEEEEEE
animatedBackgroundColor	General	Animated Background Color	UIColor.white
animatedDuration	Dynamic Animation	Move back and forth	1.0
longToValue	Dynamic Animation	Scale	1.9
shortToValue	Dynamic Animation	Scale	0.6
animatedDurationShimmer	Flash	Movement Duration	1.5
animatedHeightCoefficient	General	Height Coefficient	0.75
useGlobalCornerRadius	General	Open Global Fillet	NO
animatedCornerRadius	General	Global Fillet	0.
openLog	Universal	Open Log	NO

All animation property configurations under control view:

Instructions

_tableView.tabAnimated.xxx = xxx;

Property Name	Scope	Meaning	Default
superAnimationType	General	This control view animation type	Default global properties
animatedCount	Table Components	Number of Animations	Filling the Table Visible Area
animatedColor	General	Animated Content Color	UIColor.white
animatedBackgroundColor	General	Animated Background Color	0xEEEEEE
cancelGlobalCornerRadius	General	Unused Global Fillet	NO
animatedCornerRadius	General	Animated fillets in this control view	0.
animatedHeight	General	Animation height under this control view	0.
isAnimating	General	Is it in animation	\|
isNest	General	Is it a nested table	NO

Author

email: 1429299849@qq.com

Lastly

Thanks for meeting, thanks for using, if you feel good, you can order a star

If there are usage problems, optimization suggestions, etc., you can email me.

License

MIT License

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.

QiuDaniel / TABAnimated