Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/exyte/AnimatedTabBar

A tabbar with a number of preset animations written in pure SwiftUI
https://github.com/exyte/AnimatedTabBar

animation ios-component swift swiftui swiftui-components tabbar tabbarcontroller

Last synced: 4 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/exyte/AnimatedTabBar
Owner: exyte
License: mit
Created: 2023-01-23T05:18:35.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2024-08-07T12:19:45.000Z (4 months ago)
Last Synced: 2024-08-08T12:50:52.513Z (4 months ago)
Topics: animation, ios-component, swift, swiftui, swiftui-components, tabbar, tabbarcontroller
Language: Swift
Homepage: https://exyte.com/
Size: 239 KB
Stars: 338
Watchers: 6
Forks: 24
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-ios - AnimatedTabBar - A tabbar with number of preset animations. Written with SwiftUI. (UI / Tab Bar)
awesome-swift - AnimatedTabBar - A tabbar with a number of preset animations. (Libs / Layout)
awesome-swiftui-libraries - AnimatedTabBar - A tabbar with number of preset animations written in pure SwiftU (TabBar-and-Tabs / Content)
awesome-ios-star - AnimatedTabBar - A tabbar with number of preset animations. Written with SwiftUI. (UI / Tab Bar)
fucking-awesome-swift - AnimatedTabBar - A tabbar with a number of preset animations. (Libs / Layout)

README

        

     

 

![demo](https://user-images.githubusercontent.com/9447630/217482148-8594b3ce-e6be-4e84-a65d-29915566a61a.gif)

Animated Tab Bar


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


Read Article »

![](https://img.shields.io/github/v/tag/exyte/popupView?label=Version)

[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fexyte%2FAnimatedTabBar%2Fbadge%3Ftype%3Dswift-versions)](https://swiftpackageindex.com/exyte/AnimatedTabBar)

[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fexyte%2FAnimatedTabBar%2Fbadge%3Ftype%3Dplatforms)](https://swiftpackageindex.com/exyte/AnimatedTabBar)

[![SPM Compatible](https://img.shields.io/badge/SwiftPM-Compatible-brightgreen.svg)](https://swiftpackageindex.com/exyte/AnimatedTabBar)

[![Cocoapods Compatible](https://img.shields.io/badge/cocoapods-Compatible-brightgreen.svg)](https://cocoapods.org/pods/ExyteAnimatedTabBar)

[![Carthage Compatible](https://img.shields.io/badge/Carthage-compatible-brightgreen.svg?style=flat)](https://github.com/Carthage/Carthage)

[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)](https://opensource.org/licenses/MIT)

# 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:  

```swift

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`

```swift

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 /Example/`

- Run `pod install` to install all dependencies

- Run `open AnimatedTabBarExample.xcworkspace/` to open the project in Xcode

- Try it!

## Installation

### [Swift Package Manager](https://swift.org/package-manager/)

```swift

dependencies: [

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

]

```

### [CocoaPods](http://cocoapods.org)

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

```ruby

pod 'ExyteAnimatedTabBar'

```

### [Carthage](http://github.com/Carthage/Carthage)

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

```ogdl

github "Exyte/AnimatedTabBar"

```

## Requirements

* iOS 16+

* Xcode 14+ 

## Acknowledgements

Many thanks to [Yeasin Arafat](https://dribbble.com/shots/14883627-Tab-Bar-Animation) for their beautiful original work that we recreated with SwiftUI.

## Our other open source SwiftUI libraries

[PopupView](https://github.com/exyte/PopupView) - Toasts and popups library    

[Grid](https://github.com/exyte/Grid) - The most powerful Grid container    

[ScalingHeaderScrollView](https://github.com/exyte/ScalingHeaderScrollView) - A scroll view with a sticky header which shrinks as you scroll    

[MediaPicker](https://github.com/exyte/mediapicker) - Customizable media picker     

[Chat](https://github.com/exyte/chat) - Chat UI framework with fully customizable message cells, input view, and a built-in media picker  

[OpenAI](https://github.com/exyte/OpenAI) Wrapper lib for [OpenAI REST API](https://platform.openai.com/docs/api-reference/introduction)    

[AnimatedGradient](https://github.com/exyte/AnimatedGradient) - Animated linear gradient     

[ConcentricOnboarding](https://github.com/exyte/ConcentricOnboarding) - Animated onboarding flow    

[FloatingButton](https://github.com/exyte/FloatingButton) - Floating button menu    

[ActivityIndicatorView](https://github.com/exyte/ActivityIndicatorView) - A number of animated loading indicators    

[ProgressIndicatorView](https://github.com/exyte/ProgressIndicatorView) - A number of animated progress indicators    

[FlagAndCountryCode](https://github.com/exyte/FlagAndCountryCode) - Phone codes and flags for every country    

[SVGView](https://github.com/exyte/SVGView) - SVG parser    

[LiquidSwipe](https://github.com/exyte/LiquidSwipe) - Liquid navigation animation