iOS TabBarController的几种动画效果的实现

正常情况下,我们点击tabbar都只有一个变色效果,但有时候,如果我们想给它添加一个点击动画,该如何做呢?
先上几个效果图:
1、先放大,再缩小

511196-20170116103844396-1872210226.gif

2、Z轴旋转

511196-20170116103932614-876709799.gif

3、放大并保持

511196-20170116104036224-920525159.gif

4、 y轴位移

511196-20170116104000302-95725194.gif

原理:利用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];
    }
}

此外,如果想定制其他动画效果,还可以从下面属性里自己定制动画

511196-20170116093610724-1578979553.png

推荐阅读更多精彩内容

  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,034评论 0 4
  • 值得多次阅读的文字。我们常说,换个角度看世界,换个心态看问题,更便捷的方式是借助这些非常人的视角去开阔自己的思路。...
    Ivy_summer阅读 71评论 0 1
  • 日前,被誉为“神经网络教父”的杰夫·辛顿接受了外国媒体Gigamo的采访,谈到了他对人工智能、深度学习的看法。他认...
    重新出发_砥砺前行阅读 419评论 0 0
  • 我12月1日报名参加了微信群里《选择自己知识管理训练营第六期》的学习,按小六老师推荐的“课前准备”书单中的准备书...
    思妈2012阅读 103评论 0 0
  • 每一个你 静静 绽放光茫 静的 温暖了整个世界 愿 安静如你 温柔如你 只要以里面存着长久温柔、安静的心为妆饰,这...
    麦子Q阅读 16评论 0 0