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 答案所建议的那样正常工作。看看这篇文章UITabBar subviewschange 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)
}