[Q-A] 能实现爱奇艺那种，点击后突出的动画效果吗？

[200895045]

[wiilsliang]

你实现了吗？

[Engandend]

我也想要这个效果

[ChenYilong]

这种效果? https://www.jianshu.com/p/60d2e37b88d3

[Engandend]

动画效果是已经支持了。但是这个tabbar 点击之后 凸起的这个效果。没有思路
他这个凸起 之后 还有阴影 。

凸起效果要如何实现？ 望大佬指点。

[wiilsliang]

突起的我也实现了，但是也没有凸起的这个效果😂

[Engandend]

不借助CYLTabBarController 的情况下，简单的实现了，给需要的人参考。

#import <Lottie/LOTAnimationView.h>    ///< 第三方动画库

@property (strong, nonatomic)   NSMutableArray      *arrayLottie;   ///< 动画数组  （承载 动画 json文件名）
@property (nonatomic, strong)   LOTAnimationView *animation;      ///< 承载动画的 view
@property (nonatomic, strong) UIImageView *radianView;            ///< 凸起的view （高度15）

主要动画部分

- (void)tabBarSelectedWithIndex:(NSInteger)index
{
    [self.tabBar.items enumerateObjectsUsingBlock:^(UITabBarItem * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (idx == index) {
            obj.imageInsets = UIEdgeInsetsMake(-6, 0, 6, 0);
            UIControl *tabBarButton = [obj valueForKey:@"view"];
            for (UIView *view in tabBarButton.subviews) {
                
                if ([view isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
                    
                    // 凸起动画
                    
                    CGFloat buttonW = ([UIScreen mainScreen].bounds.size.width)/self.viewControllers.count;
                    CGFloat x = buttonW*index+buttonW/2;
                    self.radianView.center = CGPointMake(x, -5);
                    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.y"];
                    // 通过初中物理重力公式计算出的位移y值数组
                    animation.values = @[@0.0, @-4, @0.0];
                    animation.duration = 0.3;
                    [view.layer addAnimation:animation forKey:nil];
                    [self.radianView.layer addAnimation:animation forKey:nil];
                    
                    
                    
                    // lottle 动画
                    [self.animation removeFromSuperview];
                    NSString * name = self.arrayLottie[index];
                    //                    CGFloat scale = [[UIScreen mainScreen] scale];
                    name = [NSString stringWithFormat:@"%@.json", name];
                    LOTAnimationView *lotView = [LOTAnimationView animationNamed:name];
                    [view addSubview:lotView];
                    
// 第三方的一个布局，作用就是 将动画view 与 tabbar的图片居中
                    lotView.sd_layout
                    .centerXEqualToView(view)
                    .centerYEqualToView(view)
                    .widthRatioToView(view, 1)
                    .heightRatioToView(view, 1);
                    
                    [lotView playWithCompletion:^(BOOL animationFinished) {
                        // Do Something
                    }];
                    self.animation = lotView;
                    
                }
            }
        }else
        {
            obj.imageInsets = UIEdgeInsetsZero;
        }
    }];
}

在合适的方法中去调用

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
{
    NSInteger index = [tabBarController.viewControllers indexOfObject:viewController];
    if (_selectIndex != index) {
        _selectIndex = index;
        [self tabBarSelectedWithIndex:index];
        return;
    }
    
}

/// 第二种方法：通过接收点击事件对每个tabbar item的点击都执行动画
//-(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{
//    NSInteger index = [self.tabBar.items indexOfObject:item];
//    if (self.selectedIndex == index) {
//        return;
//    }
//    [self tabBarSelectedWithIndex:index];
//}

[wiilsliang]

你这也是参考的别人的。。。

[ly415925488]

最近怎么都流行这种点击凸起的效果了？干！我想知道怎么让Lottie动画也支持这种点击凸起

[ly415925488]

点击放大效果实现代码 因为我用的是Lottie动画版 所以使用的是 [control cyl_lottieAnimationView] 普通版的去掉 cyl_lottieAnimationView就行 有一个问题是不会默认点击第一个 得自己在初始化完TabBar控制器后 手动调用一次