Iphone Uitabritem图标动画

iPhone Skype应用程序使用动画选项卡图标。例如，在登录期间，最右边的选项卡图标显示循环箭头。调用“调用”选项卡时，图标会轻轻闪烁，这显然是通过动画完成的

我想知道如何可以动画选项卡栏项目的图标

在我的特殊情况下，当用户按下“收藏夹”按钮时，它会跳到“收藏夹”选项卡栏项上。我已经实现了跳跃动画，但我希望相应的选项卡栏图标在动画结束时闪烁，给它带来完整的感觉

关于我应该看的方向有什么建议吗

---

提前谢谢

我还没有这样做，但我会尝试构建一个动画，例如，使用一个动画，并将其添加到您想要动画的Utabaritem中

有关如何设置动画的详细信息，请参阅核心动画编程指南：

---

我很惊讶这个解决方案是多么简单

将方法添加到包含以下例程的应用程序委托类.m文件（或管理UITabBar的任何其他类）：

创建将用于动画的UIImageView

使用

addSubview:

方法将其添加到选项卡栏视图中

将其框架缩小到UITabBarItem的大小（使用UITabBar框架大小和选项卡栏项的数量来计算框架大小）

调整imageView的

frame.origin.x

值，将图像放置在要设置动画的选项卡项的正上方

将所需动画添加到imageView（您可以播放不透明度，交换多个图像-任何您想要的）

很简单，你不这么认为吗

可以在UIApplicationLegate实例上调用此方法，只要需要设置选项卡栏项的动画

---

另外，需要注意的是，您可以点击imageView来选择选项卡栏项目，就像选项卡栏上没有图像一样。这里可以得出很多有趣的结论，如果你知道的话，你可以做什么…

实际上有一种更简单的方法：

你可以通过获取选项卡图标的视图来设置其动画，然后为UIView做任何你喜欢的动画。下面是一个简单的缩放变换示例，加油

func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem){
        var tabBarView: [UIView] = []

        for i in tabBar.subviews {
            if i.isKind(of: NSClassFromString("UITabBarButton")! ) {
                tabBarView.append(i)
            }
        }

        if !tabBarView.isEmpty {
            UIView.animate(withDuration: 0.15, animations: {
                tabBarView[item.tag].transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            }, completion: { _ in
                UIView.animate(withDuration: 0.15) {
                    tabBarView[item.tag].transform = CGAffineTransform.identity
                }
            })
        }
    }

---

注：请按顺序为每个UITabBarItem分配标签

我找到了解决此问题的更好方法。添加自定义图像视图不是更好的方法，因为在iOS 10.0及更高版本中，更改方向时，图标框和文本位置会发生更改。您只需要设置UITabBarController的类&输入以下代码

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

    let index = self.tabBar.items?.index(of: item)
    let subView = tabBar.subviews[index!+1].subviews.first as! UIImageView
    self.performSpringAnimation(imgView: subView)
}

//func to perform spring animation on imageview
func performSpringAnimation(imgView: UIImageView) {

    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {

        imgView.transform = CGAffineTransform.init(scaleX: 1.4, y: 1.4)

        //reducing the size
        UIView.animate(withDuration: 0.5, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
            imgView.transform = CGAffineTransform.init(scaleX: 1, y: 1)
        }) { (flag) in
        }
    }) { (flag) in

    }
}  

---

请记住，UITabBar中子视图的顺序可能是无序的，因此使用索引从中访问正确的项可能无法按建议正常工作。看看这个帖子

我找到的解决方案是首先对视图进行过滤和排序，然后使用tabBarItem的正确索引访问它

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

    let orderedTabBarItemViews: [UIView] = {
        let interactionViews = tabBar.subviews.filter({ $0 is UIControl })
        return interactionViews.sorted(by: { $0.frame.minX < $1.frame.minX })
    }()

    guard
        let index = tabBar.items?.index(of: item),
        let subview = orderedTabBarItemViews[index]?.subviews.first
    else {
        return
    }

    performSpringAnimation(for: subview)
}

func performSpringAnimation(for view: UIView) {
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
        view.transform = CGAffineTransform(scaleX: 1.25, y: 1.25)
        UIView.animate(withDuration: 0.5, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
            view.transform = CGAffineTransform(scaleX: 1, y: 1)
        }, completion: nil)
    }, completion: nil)
}

重写函数选项卡（\tabBar:UITabBar，didSelect项：uitabaritem）{
让orderedTabBarItemViews:[UIView]={
让interactionViews=tabBar.subviews.filter（{$0是UIControl}）
返回interactionViews.sorted（按：{$0.frame.minX<$1.frame.minX}）
}()
警卫
让索引=tabBar.items？索引（of:item），
让子视图=OrderedTabritemViews[索引]？.subviews.first
否则{
返回
}
performSpringAnimation（用于：子视图）
}
func performSpringAnimation（用于视图：UIView）{
UIView.animate（持续时间：0.5，延迟：0，使用SpringWithDamping:0.5，初始SpringVelocity:0.5，选项：.curveEaseInOut，动画：{
view.transform=CGAffineTransform（scaleX:1.25，y:1.25）
UIView.animate（持续时间：0.5，延迟：0.2，使用SpringWithDamping:0.5，初始SpringVelocity:0.5，选项：.curveEaseInOut，动画：{
view.transform=CGAffineTransform（scaleX:1，y:1）
}，完成日期：无）
}，完成日期：无）
}
中的
UIImageView
索引不保证为fist

UIImageView的索引在相关子视图中不保证为First

因此，最好通过类类型访问它，并检查索引是否超出范围

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
    guard let idx = tabBar.items?.firstIndex(of: item),
        tabBar.subviews.count > idx + 1,
        let imageView = tabBar.subviews[idx + 1].subviews.compactMap({ $0 as? UIImageView }).first else {
        return
    }
    
    imageView.layer.add(bounceAnimation, forKey: nil)
}

这是一个使用
CAKeyframeAnimation
的基本反弹动画示例：

private var bounceAnimation: CAKeyframeAnimation = {
    let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
    bounceAnimation.values = [1.0, 1.3, 0.9, 1.0]
    bounceAnimation.duration = TimeInterval(0.3)
    bounceAnimation.calculationMode = CAAnimationCalculationMode.cubic
    return bounceAnimation
}()

在objective c中设置选项卡栏项目动画的简单方法

在tabbar控制器类中

    - (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
    {
        UIVisualEffectView *viv = tabBar.subviews[item.tag].subviews.firstObject;
        UIImageView *img = viv.contentView.subviews.firstObject;
       // If UIImageView not get use this code
       // UIImageView *img  = tabBar.subviews[item.tag].subviews.lastObject;


        [self shakeAnimation:img];
      //[self bounceAnimation:img];

    }



- (void)shakeAnimation:(UIImageView *)img
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    [animation setDuration:0.05];
    [animation setRepeatCount:2];
    [animation setAutoreverses:YES];
    [animation setFromValue:[NSValue valueWithCGPoint: CGPointMake([img center].x - 10.0f, [img center].y)]];
    [animation setToValue:[NSValue valueWithCGPoint: CGPointMake([img center].x + 10.0f, [img center].y)]];
    [[img layer] addAnimation:animation forKey:@"position"];
}


- (void)bounceAnimation:(UIImageView *)img
{
    img.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);

    [UIView animateWithDuration:0.3/1.5 animations:^{
        img.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.1, 1.1);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3/2 animations:^{
            img.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.9, 0.9);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.3/2 animations:^{
                img.transform = CGAffineTransformIdentity;
            }];
        }];
    }];
}

不，我确信这是行不通的，因为uitabaritem不是一种视图——它起源于NSObjest（基本类）和UIBarItem（在那里也没什么有趣的）。似乎没有图层，甚至没有框架可玩。但我通过进入“后门”解决了这个问题。谢谢你的想法。你是如何实现跳跃动画的？我喜欢它不起作用。我已经在选项卡栏控制器中添加了它。代码也在运行，但没有发生任何操作。如何在stackoverflow的问题上发布这样的GIF？