UITabBarItem图标动画

Question

适用于iPhone的Skype应用使用动画TabBar图标。例如，在登录期间，最右侧的选项卡图标显示循环箭头。当呼叫时，标签图标轻轻地闪烁，这显然是通过动画完成的。

我想知道如何使选项卡栏项目的图标具有动画效果。

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

对我应该关注的方向有什么建议吗？

提前谢谢。

Answer 1

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

将方法添加到包含以下例程的Application Delegate类.m-UITabBar(或管理您的文件的任何其他类)：

1. 创建将用于动画的UIImageView。
2. 使用addSubview:方法将其添加到TabBar视图中。
3. 将框架缩小到UITabBarItem的大小(使用UITabBar框架大小和选项卡栏项目的数量来计算框架大小)。
4. 调整imageView的frame.origin.x值以将图像放置在要设置动画效果的制表符蝙蝠项目的正上方。
5. 将所需动画添加到imageView(您可以使用不透明度播放，交换多个图像-任何您想要的内容)。

很简单，你不这样认为吗？

您可以在需要为选项卡栏项目设置动画的任何位置对UIApplicationDelegate实例调用此方法。

同样重要的是要注意，您可以通过点击imageView来选择选项卡栏项目，就像在选项卡栏上没有图像一样。如果你知道你能做什么，你可以在这里得出许多有趣的结论。

Answer 2

对于这个问题，我找到了一个更好的解决方案。添加自定义图像视图并不是一种更好的方法，因为在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

    }
}  

Answer 3

请记住，UITabBar中的子视图的顺序可能是无序的，因此使用索引访问其中的正确项可能不会像Naresh answer建议的那样正常工作。看看这篇文章UITabBar subviews change order

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

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?.firstIndex(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)
}