iOS tabbar點擊動畫效果實現

正常情況下，我們點擊tabbar都只有一個變色效果，但有時候，如果我們想給它添加一個點擊動畫，該如何做呢？

先上幾個效果圖：

1、先放大，再縮小　　　　　　　　　　　　　　　　　　　　　2、Z軸旋轉

             

3、Y軸位移　　　　　　　　　　　　　　　　　　　　　　　　　　4、放大並保持

           

原理：利用UITabBarController實現，在tabbar的 didSelectItem 代理里添加動畫效果。

 

 

下面就以上幾種場景貼上代碼：

准備代碼：

@interface MainTabbarVC ()<UITabBarControllerDelegate>
@property (nonatomic,assign) NSInteger  indexFlag;　　//記錄上一次點擊tabbar，使用時，記得先在init或viewDidLoad里 初始化 = 0
@end


-(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{
    NSInteger index = [self.tabBar.items indexOfObject:item];
    if (index != self.indexFlag) {
        //執行動畫
        NSMutableArray *arry = [NSMutableArray array];
        for (UIView *btn in self.tabBar.subviews) {
            if ([btn isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
                 [arry addObject:btn];
            }
        }
        //添加動畫
　　　　 //---將下面的代碼塊直接拷貝到此即可---
        
        self.indexFlag = index;
    }
}

 

1、先放大，再縮小

//放大效果，並回到原位
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//速度控制函數，控制動畫運行的節奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       //執行時間
animation.repeatCount = 1;      //執行次數
animation.autoreverses = YES;    //完成動畫后會回到執行動畫之前的狀態
animation.fromValue = [NSNumber numberWithFloat:0.7];   //初始伸縮倍數
animation.toValue = [NSNumber numberWithFloat:1.3];     //結束伸縮倍數
[[arry[index] layer] addAnimation:animation forKey:nil];

 

2、Z軸旋轉

//z軸旋轉180度
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//速度控制函數，控制動畫運行的節奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       //執行時間
animation.repeatCount = 1;      //執行次數
animation.removedOnCompletion = YES;
animation.fromValue = [NSNumber numberWithFloat:0];   //初始伸縮倍數
animation.toValue = [NSNumber numberWithFloat:M_PI];     //結束伸縮倍數
[[arry[index] layer] addAnimation:animation forKey:nil];

 

3、Y軸位移

//向上移動
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
//速度控制函數，控制動畫運行的節奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       //執行時間
animation.repeatCount = 1;      //執行次數
animation.removedOnCompletion = YES;
animation.fromValue = [NSNumber numberWithFloat:0];   //初始伸縮倍數
animation.toValue = [NSNumber numberWithFloat:-10];     //結束伸縮倍數
[[arry[index] layer] addAnimation:animation forKey:nil];

 

4、放大並保持

//放大效果
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//速度控制函數，控制動畫運行的節奏
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration = 0.2;       //執行時間
animation.repeatCount = 1;      //執行次數
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;           //保證動畫效果延續
animation.fromValue = [NSNumber numberWithFloat:1.0];   //初始伸縮倍數
animation.toValue = [NSNumber numberWithFloat:1.15];     //結束伸縮倍數
[[arry[index] layer] addAnimation:animation forKey:nil];
//移除其他tabbar的動畫
for (int i = 0; i<arry.count; i++) {
    if (i != index) {
        [[arry[i] layer] removeAllAnimations];
    }
}

 

此外，如果想定制其他動畫效果，還可以從下面屬性里自己定制動畫

 

 

謝謝！～