•  29-09-2019
  •  | 
  •  

题

iPhone的Skype应用程序使用动画塔巴尔图标。例如，在登录过程中，最右侧的选项卡图标显示了循环箭头。在调用“呼叫”选项卡图标时，请轻眨眼，显然是通过动画完成的。

我想知道如何使标签栏项目的图标动画。

在我的特殊情况下，当用户按下“喜欢的”按钮时，它会跳到“收藏夹”标签栏项目上。我已经实现了跳跃动画，但是我希望相应的标签栏图标在动画结束时眨眼，以使其完整感。

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

提前致谢。

有帮助吗？

解决方案

我很惊讶解决方案有多容易！

将方法添加到您的应用程序委托类。M-File（或任何其他管理Uitabbar的类）中包含以下例程：

  1. 创建将用于动画的UIImageView。
  2. 使用它添加到塔巴尔视图中 addSubview: 方法。
  3. 将其构架到UitabbariTem的大小（使用Uitabbar框架大小和标签栏项目的数量来计算框架尺寸）。
  4. 调整图像视图的 frame.origin.x 值以将图像右上方放置在标签蝙蝠项目上方，您要动画。
  5. 将您要添加到ImageView的动画（您可以播放不透明度，交换几张图像 - 任何您想要的任何图像）。

很容易，你不这么认为吗？

您可以在uiapplicationdelegate实例上调用此方法，任何需要动画制作标签栏项目的方法。

同样，重要的是要注意，您可以点击imageView以选择“标签栏”项目，就好像在标签栏上没有图像一样。如果您知道的话，可以在这里做出许多有趣的结论。

其他提示

我为这个问题找到了更好的解决方案。添加自定义图像视图不是一种更好的方法，因为在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中的子视图的顺序可能是无序的 纳雷什答案 建议。看看这篇文章 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)
}

我还没有这样做，但是我只是尝试构建一个用cabasicanimation构建的caanimation，然后将其添加到您想被动画的Uitabbaritem中。

有关如何设置Cabasicanimation的详细信息，请参见《核心动画编程指南：http://developer.apple.com/mac/library/documentation/cocoa/conceptual/coreanimation_guide/articles/AnimatingLayers.htmll#/apple/apple_reff/doc/doc/uid/tp40006085-sw1

您可以通过获取视图来为塔巴尔图标（Tabbar Icons）进行动画动画，然后按照您喜欢的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
                }
            })
        }
    }

PS：请按顺序为每个Uitabbaritem分配标签

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top