exyte / animatedtabbar

A tabbar with a number of preset animations written in pure SwiftUI

     

Animated Tab Bar

AnimatedTabBar is a tabbar with a number of preset animations written in pure SwiftUI

Read Article »

Usage

1. Add an Int to store the current selection
2. Pass your buttons to the AnimatedTabBar using one of 2 initializers. For the first one you can pass any view type:

import AnimatedTabBar

AnimatedTabBar(selectedIndex: $selectedIndex) {
    TabButton1()
    TabButton2()
    TabButton3()
}

For the second one the views must have the same type, or be manually converted to AnyView

AnimatedTabBar(selectedIndex: $selectedIndex, views: [TabButton1(), TabButton2(), TabButton3()])

Required parameters

selectedIndex - binding to the current index
views - buttons to display in the tabbar

Available customizations - modifiers

use the customize closure in the popup modifier:

barColor - Color of the tabbar itself
selectedColor - Selected tab color (use template rendering for this color to be applied properly)
unselectedColor - Unselected tab color
ballColor - Ball indicator color
verticalPadding - Space from the buttons to the bar's top and bottom edges
cornerRadius - The corner radius applied to the tabbar background color
ballAnimation - Animation curve to apply to ball motion, default is .easeOut(duration: 0.6) indentAnimation - Animation curve for growing/shrinking of the indent in the tabbar
buttonsAnimation - Animation curve for applying color to tab buttons
didSelectIndex - Closure which gets called on every tab tap

ballTrajectory - Options for ball indicator animation paths:

• parabolic - Jump to the selected button following a parabolic arc
• teleport - Disappear and quickly re-appear above selected tab
• straight - Slide to the selected tab

Built-in animatable tab buttons

By default tabs only have a simple color animation, but you can customize that. This library has two built-in button types you can use out-of-the-box: DropletButton and WiggleButton, and a super custom ColorButton type in the Example project. Please feel free to use them in your projects or build your own buttons on top of them.

Examples

To try the AnimatedTabBar examples:

• Clone the repo https://github.com/exyte/AnimatedTabBar.git
• Open terminal and run cd <AnimatedTabBarRepo>/Example/
• Run pod install to install all dependencies
• Run open AnimatedTabBarExample.xcworkspace/ to open the project in Xcode
• Try it!

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/AnimatedTabBar.git")
]

CocoaPods

To install AnimatedTabBar, simply add the following line to your Podfile:

pod 'ExyteAnimatedTabBar'

Carthage

To integrate AnimatedTabBar into your Xcode project using Carthage, specify it in your Cartfile

github "Exyte/AnimatedTabBar"

Requirements

• iOS 16+
• Xcode 14+

Acknowledgements

Many thanks to Yeasin Arafat for their beautiful original work that we recreated with SwiftUI.

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll.
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation

animatedtabbar's Issues

If the selectedIndex is not equal to 0, when entering the app, the circle is still at the 0 position

Unable to use binding

Just downloaded the library and was setting up a basic tab bar to mess around with.

`import SwiftUI
import AnimatedTabBar

struct AnimatedTabBar: View {
@State var selectedIndex = 0
var body: some View {
AnimatedTabBar(selectedIndex: $selectedIndex)
}
}

struct AnimatedTabBar_Previews: PreviewProvider {
static var previews: some View {
AnimatedTabBar()
}
}`

However it is producing an error saying "Cannot convert value '$selectedIndex' of type 'Binding' to expected type 'Int', use wrapped value instead" and it wants me to to remove the binding. If I remove the binding the error goes away but I get a crash when I try to run the preview in the canvas.

Tabbing an tab icon does not return to root view

Tabbing AnimatedTabBar Icon does not revert back to root view if using a NavigationLink

Cannot find 'KeyframeTrack' in scope

Unable to find KeyframeTrack and keyframeAnimator in Example

ios17 error

Canvas Crash

When I attempt to run the canvas to preview a basic tab bar it is crashing...

`import SwiftUI
import AnimatedTabBar

struct AnimatedTabBar: View {
@State var selectedIndex = 0
var body: some View {
AnimatedTabBar(selectedIndex: $selectedIndex)
}
}

struct AnimatedTabBar_Previews: PreviewProvider {
static var previews: some View {
AnimatedTabBar()
}
}`

Here is the crash log...
Faith Church Prayer-2023-05-31-120535.txt

Doesn't work on iOS 16

I can't get this to render icons in iOS16 (17 works great). The example app also renders nothing on iOS16.