uitabbaritem أيقونة الرسوم المتحركة

Question

يستخدم تطبيق Skype for iPhone أيقونات tabbar المتحركة. على سبيل المثال ، أثناء تسجيل الأيقونة في أقصى اليمين ، يعرض أيقونة علامة التبويب اليمين السهام المنتشرة. أثناء استدعاء أيقونة علامة التبويب "استدعاء" ، يومض بهدوء والذي يتم من خلال الرسوم المتحركة.

أتساءل كيف يمكن تحريك أيقونات عناصر شريط علامات التبويب.

في حالتي الخاصة عندما يضغط المستخدم على زر "المفضل" ، يقفز إلى عنصر شريط علامة التبويب "المفضل". لقد قمت بالفعل بتطبيق الرسوم المتحركة القفز ، لكني أرغب في أن تغمض أيقونة شريط علامة التبويب المقابلة في نهاية الرسوم المتحركة لإحساس الاكتمال.

أي اقتراحات حول الاتجاه الذي يجب أن أنظر إليه؟

شكرا مقدما.

Answer 1

أنا مندهش مدى سهولة الحل!

أضف طريقة إلى فئة تفويض التطبيق الخاصة بك. ملف (أو أي فئة أخرى تدير uitabbar) التي تحتوي على الروتين التالي:

1. إنشاء uiimageView الذي سيتم استخدامه للرسوم المتحركة.
2. أضفه إلى عرض Tabbar الخاص بك باستخدام addSubview: طريقة.
3. تأطيره إلى حجم UItabBarItem (استخدم حجم إطار UITabbar وعدد عناصر شريط علامات التبويب لحساب حجم الإطار).
4. اضبط ImageView frame.origin.x القيمة لوضع الصورة مباشرة فوق عنصر الخفافيش الذي تريد تحريكه.
5. أضف الرسوم المتحركة التي تريدها إلى ImageView (يمكنك اللعب مع عتامة ، ومبادلة العديد من الصور - أي شيء تريده).

سهل جدا ، ألا تعتقد ذلك؟

يمكنك استدعاء هذه الطريقة على مثيل UIApplicationDlegate في أي مكان تحتاج إلى تحريك عنصر شريط علامة التبويب.

من المهم أيضًا ملاحظة أنه يمكنك النقر من خلال 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

في الواقع هناك طريقة أسهل بكثير: https://medium.com/@werry_paxman/bring-your-uitabbar-to-life-animating-uitabbaritem-images-with-swift-and-coregraphics-d3be75eb8d4d#.8o1raapyr

Answer 4

ضع في اعتبارك أنه قد لا يتم ترتيب ترتيب العرض الفرعي في Uitabbar ، لذا فإن الوصول إلى العنصر الصحيح منه قد لا يعمل بشكل صحيح كما إجابة ناريش اقترحت. ألق نظرة على هذا المنشور UITABBAR VIRFORIES تغيير ترتيب

الحل الذي وجدته هو تصفية العرض أولاً وفرزها ثم الوصول إليها باستخدام الفهرس الصحيح لـ 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)
}

Answer 5

لم أفعل ذلك ، لكنني سأحاول فقط بناء caanimation على سبيل المثال مع cabasicanimation وإضافته إلى uitabbaritem التي تريد أن تكون متحركة.

للحصول على تفاصيل حول كيفية إعداد cabasicanimation ، انظر دليل برمجة الرسوم المتحركة الأساسية:http://developer.apple.com/mac/library/documentation/cocoa/conceptual/coreanimation_guide/articles/animatinglayers.html#//apple_ref/doc/uid/tp40006085-sw1

Answer 6

يمكنك تحريك أيقونات Tabbar من خلال الحصول على عرضه ، ثم القيام بأي رسوم متحركة كما تريد لـ 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 بالترتيب