IOS UITabbar icon click animation effect

Introduction to the

Normally, clicking on a Tabbar only has a color change effect, but sometimes, if we want to add a click animation to it, how do we do that? Here are two ways:

Methods a

The tabBar: didSelectItem: proxy method receives each clicked item and animates each item. The downside is that you get the entire item and the icon and title move together.

Method 2

Getimage (); getimage (); getImage (); getImage (); getImage ();

rendering

The second method: animate only the image

1. Bounce with gravity effect

The last four are the first method

2, first zoom in, then zoom out

3. Z-axis rotation

4. Y-axis displacement

5. Zoom in and hold

Code implementation

Gets the Item to animate

@interface MainTabbarVC ()<UITabBarControllerDelegate> @property (nonatomic,assign) NSInteger indexFlag; &emsp; &emsp; // Record the last time you clicked tabbar. Remember to initialize = 0 @end in init or viewDidLoad first. Animate each click of a tabbar item by receiving the click event -(void) tabbar :(UITabBar *) tabbar didSelectItem:(UITabBarItem *)item{NSInteger index = [self.tabBar.items indexOfObject:item]; if (index ! = self.indexFlag) {// Execute the animation NSMutableArray *arry = [NSMutableArray array]; for (UIView *btn in self.tabBar.subviews) { if ([btn isKindOfClass:NSClassFromString(@"UITabBarButton")]) { [arry addObject:btn]; }} // Add animation &emsp; &emsp; &emsp; &emsp; Self.indexflag = index; self.indexFlag = index; self.indexFlag = index; }} // The second method is to animate only the click on an item, and only the picture moves, the text does not move. - (void)tabBarImageAnimation {for (UIControl *tabBarButton in self. tabbar.subviews) {if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) { for (UIControl *tabBarButtonLabel in tabBarButton.subviews) { if ([tabBarButtonLabel isKindOfClass:NSClassFromString(@"UITabBarButtonLabel")]) { UILabel *label = (UILabel *)tabBarButtonLabel; //"tab1" to "tab4" are the title names of tabbar items that are not intended to animate. [label.text isEqualToString:@"tab1"] && ! [label.text isEqualToString:@"tab2"] && ! [label.text isEqualToString:@"tab3"] && ! [label.text isEqualToString:@"tab4"]) { for (UIView *imageView in tabBarButton.subviews) { if ([imageView IsKindOfClass: NSClassFromString (@ "UITabBarSwappableImageView")]) {/ / add animation Copy the following animation code block to this and modify the layer object of addAnimation in the last line -}}}}}}}}Copy the code

The second method can be used more flexible, for example, TabbarVC can be set up in the above tabBarImageAnimation notification Observer, when the animation needs to be performed, such as the VC viewDidAppear post notification.

Animation code

1. Bounce with gravity effect

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.y"];
// The displacement y value array is calculated by the physics gravity formula of junior high school
animation.values = @[@0.0The @4.15The @7.26The @9.34The @10.37The @9.34The @7.26The @4.15The @0.0The @2.0The @2.9The @4.94The @6.11The @6.42The @5.86The @4.44The @2.16The @0.0];
animation.duration = 0.8;
animation.beginTime = CACurrentMediaTime() + 1;
[imageView.layer addAnimation:animation forKey:nil];
Copy the code

2, first zoom in, then zoom out

// Zoom in and return to the original position
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// The speed control function controls the tempo of the animation
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       // Execution time
animation.repeatCount = 1;      // Number of executions
animation.autoreverses = YES;    // The animation will return to the state before the animation was executed
animation.fromValue = [NSNumber numberWithFloat:0.7];   // Initial scaling multiple
animation.toValue = [NSNumber numberWithFloat:1.3];     // End scaling multiple
[[arry[index] layer] addAnimation:animation forKey:nil];
Copy the code

3. Z-axis rotation

// Rotate the z-axis 180 degrees
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// The speed control function controls the tempo of the animation
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       // Execution time
animation.repeatCount = 1;      // Number of executions
animation.removedOnCompletion = YES;
animation.fromValue = [NSNumber numberWithFloat:0];   // Initial scaling multiple
animation.toValue = [NSNumber numberWithFloat:M_PI];     // End scaling multiple
[[arry[index] layer] addAnimation:animation forKey:nil];
Copy the code

4. Y-axis displacement

// Move up
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
// The speed control function controls the tempo of the animation
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       // Execution time
animation.repeatCount = 1;      // Number of executions
animation.removedOnCompletion = YES;
animation.fromValue = [NSNumber numberWithFloat:0];   // Initial scaling multiple
animation.toValue = [NSNumber numberWithFloat:- 10];     // End scaling multiple
[[arry[index] layer] addAnimation:animation forKey:nil];
Copy the code

5. Zoom in and hold

// Zoom in effect
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// The speed control function controls the tempo of the animation
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       // Execution time
animation.repeatCount = 1;      // Number of executions
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;           // Make sure the animation lasts
animation.fromValue = [NSNumber numberWithFloat:1.0];   // Initial scaling multiple
animation.toValue = [NSNumber numberWithFloat:1.15];     // End scaling multiple
[[arry[index] layer] addAnimation:animation forKey:nil];
// Remove other tabbar animations
for (int i = 0; i<arry.count; i++) {
    if (i != index) {
        [[arry[i] layer] removeAllAnimations];
    }
}
Copy the code

In addition, if you want to customize other animation effects, you can also customize the animation from the following properties