Convert Figma logo to code with AI

marcosgriselli logoViewAnimator

ViewAnimator brings your UI to life with just one line

7,272
485
7,272
12

Top Related Projects

22,021

Elegant transition library for iOS & tvOS

An iOS library to natively render After Effects vector animations

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

5,370

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Quick Overview

ViewAnimator is a Swift library for iOS that simplifies the process of creating complex UI animations. It provides a fluent interface for chaining multiple animations together, making it easy to create sophisticated and eye-catching effects with minimal code.

Pros

  • Easy to use and intuitive API
  • Supports chaining multiple animations
  • Compatible with both UIKit and SwiftUI
  • Lightweight and performant

Cons

  • Limited to view-based animations
  • May require additional setup for complex custom animations
  • Documentation could be more comprehensive
  • Might have a learning curve for developers new to animation concepts

Code Examples

Creating a simple fade-in animation:

view.animate(animations: [AnimationType.fade(way: .in)])

Chaining multiple animations:

view.animate(animations: [
    AnimationType.vector(CGVector(dx: 0, dy: 50)),
    AnimationType.rotate(angle: .pi/4),
    AnimationType.fade(way: .in)
])

Animating multiple views with different delays:

ViewAnimator.animate(views: [view1, view2, view3],
                     animations: [AnimationType.zoom(scale: 0.5)],
                     delay: 0.1)

Getting Started

  1. Install ViewAnimator using Swift Package Manager, CocoaPods, or Carthage.

  2. Import the library in your Swift file:

import ViewAnimator
  1. Create an animation:
let myView = UIView()
myView.animate(animations: [AnimationType.zoom(scale: 1.5),
                            AnimationType.rotate(angle: .pi/4)])
  1. For more advanced usage, refer to the library's documentation and examples on GitHub.

Competitor Comparisons

22,021

Elegant transition library for iOS & tvOS

Pros of Hero

  • More comprehensive animation framework with advanced features like interactive transitions
  • Supports custom transitions and timing functions for fine-grained control
  • Larger community and more frequent updates

Cons of Hero

  • Steeper learning curve due to more complex API
  • Requires more setup and configuration for basic animations
  • Potentially higher performance overhead for simple transitions

Code Comparison

ViewAnimator:

UIView.animate(views: views, animations: [
    AnimationType.from(direction: .bottom, offset: 30),
    AnimationType.zoom(scale: 0.5),
    AnimationType.rotate(angle: .pi/6)
], duration: 1)

Hero:

view.hero.id = "heroID"
view.hero.modifiers = [
    .translate(y: 100),
    .scale(0.5),
    .rotate(angle: .pi/6)
]

Summary

ViewAnimator offers a simpler, more straightforward approach to animations, making it easier to implement basic transitions quickly. It's ideal for projects that require simple, predefined animations without complex custom requirements.

Hero, on the other hand, provides a more powerful and flexible animation framework. It's better suited for projects that need advanced transitions, interactive animations, or highly customized effects. However, this comes at the cost of increased complexity and setup time.

The choice between the two depends on the specific needs of your project and the level of animation complexity required.

An iOS library to natively render After Effects vector animations

Pros of Lottie-iOS

  • Supports complex, high-quality animations created in Adobe After Effects
  • Extensive ecosystem with design tools and plugins
  • Backed by Airbnb, ensuring regular updates and maintenance

Cons of Lottie-iOS

  • Steeper learning curve for designers and developers
  • Larger file size and potentially higher resource usage
  • Requires external tools for creating animations

Code Comparison

ViewAnimator:

let views = [view1, view2, view3]
views.animate(animations: [AnimationType.from(direction: .bottom, offset: 30)])

Lottie-iOS:

let animationView = AnimationView(name: "animation")
view.addSubview(animationView)
animationView.play()

Summary

ViewAnimator is a lightweight library for simple, code-based animations, while Lottie-iOS offers more complex, designer-friendly animations. ViewAnimator is easier to implement for basic transitions, but Lottie-iOS provides greater flexibility and visual appeal for sophisticated animations. The choice depends on project requirements, team skills, and desired animation complexity.

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Pros of animated-tab-bar

  • Specialized for tab bar animations, offering a polished and focused solution
  • Includes pre-designed animation styles, reducing development time
  • Supports both Swift and Objective-C, catering to a wider range of iOS developers

Cons of animated-tab-bar

  • Limited to tab bar animations, less versatile than ViewAnimator
  • May require more setup for custom animations beyond the provided styles
  • Less frequently updated, potentially lacking support for newer iOS versions

Code Comparison

ViewAnimator:

let views = [view1, view2, view3]
views.animate(animations: [AnimationType.from(direction: .bottom, offset: 30)])

animated-tab-bar:

let tabBarItem = RAMAnimatedTabBarItem(title: "Home", image: UIImage(named: "home"), tag: 1)
tabBarItem.animation = RAMBounceAnimation()

Summary

ViewAnimator offers a more versatile animation solution for various UI elements, while animated-tab-bar specializes in tab bar animations with pre-designed styles. ViewAnimator's flexibility allows for easier custom animations across different views, whereas animated-tab-bar provides a more streamlined experience for tab bar-specific animations. The choice between the two depends on the specific project requirements and the scope of animations needed.

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

Pros of folding-cell

  • Specialized for creating expandable cell animations
  • Provides a unique folding paper-like effect
  • Includes ready-to-use UI components for iOS

Cons of folding-cell

  • Limited to a specific animation style
  • Less flexibility for customizing animations
  • Primarily focused on iOS development

Code Comparison

ViewAnimator:

UIView.animate(views: views, animations: [
    AnimationType.from(direction: .bottom, offset: 30),
    AnimationType.zoom(scale: 0.2),
    AnimationType.rotate(angle: .pi/6)
], duration: 0.5)

folding-cell:

let cell = FoldingCell()
cell.itemCount = 4
cell.setup(name: "Cell", duration: 0.8, backViewColor: .brown)
cell.selectedAnimation = .unfold
cell.animate()

Summary

ViewAnimator offers a more versatile animation framework for iOS and tvOS, allowing developers to create various animations for multiple views simultaneously. It provides a wide range of animation types and easy chaining of animations.

folding-cell, on the other hand, focuses on delivering a specific, polished folding animation effect for expandable cells. It's more specialized and comes with pre-built UI components, making it easier to implement this particular animation style quickly.

While ViewAnimator offers greater flexibility and customization options, folding-cell excels in providing a unique, ready-to-use folding animation that can enhance the visual appeal of list views and table cells in iOS applications.

5,370

KolodaView is a class designed to simplify the implementation of Tinder like cards on iOS.

Pros of Koloda

  • Specialized for Tinder-like card swiping animations
  • Includes built-in gesture recognizers for swipe interactions
  • Offers more customization options for card appearance and behavior

Cons of Koloda

  • Limited to card-based UI animations
  • Steeper learning curve due to more complex API
  • Less flexible for general-purpose view animations

Code Comparison

Koloda:

let kolodaView = KolodaView()
kolodaView.dataSource = self
kolodaView.delegate = self

func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
    return images.count
}

ViewAnimator:

let views = [view1, view2, view3]
UIView.animate(views: views, animations: [AnimationType.from(direction: .bottom, offset: 30)])

// or
view.animate(animations: [AnimationType.rotate(angle: .pi/4)])

ViewAnimator offers a simpler API for general-purpose animations, while Koloda provides a more specialized solution for card-based UIs. ViewAnimator is more versatile and easier to implement for various animation needs, but Koloda excels in creating Tinder-like swipeable card interfaces with built-in gestures and customization options. The choice between the two depends on the specific requirements of your project and the type of animations you need to implement.

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Pros of expanding-collection

  • Provides a unique and visually appealing expanding card interface
  • Includes a fully functional demo app showcasing its capabilities
  • Offers smooth animations and transitions out of the box

Cons of expanding-collection

  • More specialized and less versatile compared to ViewAnimator
  • Limited to a specific UI pattern, which may not fit all use cases
  • Potentially steeper learning curve due to its specialized nature

Code Comparison

expanding-collection:

let expandingCollection = ExpandingCollection(collectionViewLayout: CustomLayout())
expandingCollection.itemSize = CGSize(width: 256, height: 335)
expandingCollection.frontItemShadowOffset = CGSize(width: 0, height: 2)
expandingCollection.backItemShadowOffset = CGSize(width: 0, height: 0)

ViewAnimator:

UIView.animate(views: views, animations: [AnimationType.from(direction: .bottom, offset: 30)])
UIView.animate(views: tableView, animations: [AnimationType.random()])

Summary

expanding-collection excels in creating a specific, polished UI component with built-in animations, while ViewAnimator offers more general-purpose animation capabilities for various UI elements. expanding-collection is ideal for projects requiring its unique card-expanding interface, whereas ViewAnimator provides greater flexibility for animating different types of views across an app.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

CocoaPods Carthage Codebeat License

ViewAnimator is a library for building complex iOS UIView animations in an easy way. It provides one line animations for any view included the ones which contain other views like UITableView and UICollectionView with its cells or UIStackView with its arrangedSubviews.

Entire View         UITableView                                  UICollectionView

                   

SVG animations inspired by Luke Zhao's project Hero

Complex Layouts

UI created by Messaki, make sure to check out his profile.

Logo and banner created by @cintia_ve

Installation

CocoaPods

ViewAnimator is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "ViewAnimator"

Manual

Drop the swift files inside of ViewAnimator/Classes into your project.

Carthage

github "marcosgriselli/ViewAnimator"

Usage

ViewAnimator provides a set of UIView extensions to easily add custom animations to your views. From version 2.0.0 there are two ways to use this extension.

Self animating views

Views can animate theirselves calling .animate(animations: [Animation]) that's the most basic usage. Here's the full method that contains many default arguments:

func animate(animations: [Animation],
             reversed: Bool = false,
             initialAlpha: CGFloat = 0.0,
             finalAlpha: CGFloat = 1.0,
             delay: Double = 0,
             duration: TimeInterval = ViewAnimatorConfig.duration,
             usingSpringWithDamping dampingRatio: CGFloat = ViewAnimatorConfig.springDampingRatio,
             initialSpringVelocity velocity: CGFloat = ViewAnimatorConfig.initialSpringVelocity,
             completion: (() -> Void)? = nil)

Animating multiple views

ViewAnimator follows the UIKit animations API style with a static method UIView.animate(views: [UIView], animations: [Animation]). This makes the library really easy to use and extensible to any kind of view. As the previous example, the method contains a lot of default arguments:

static func animate(views: [UIView],
                    animations: [Animation],
                    reversed: Bool = false,
                    initialAlpha: CGFloat = 0.0,
                    finalAlpha: CGFloat = 1.0,
                    delay: Double = 0,
                    animationInterval: TimeInterval = 0.05,
                    duration: TimeInterval = ViewAnimatorConfig.duration,
                    usingSpringWithDamping dampingRatio: CGFloat = ViewAnimatorConfig.springDampingRatio,
                    initialSpringVelocity velocity: CGFloat = ViewAnimatorConfig.initialSpringVelocity,
                    completion: (() -> Void)? = nil)

AnimationType

Direction

Direction provides the axis where the animation should take place and its movement direction.

let animation = AnimationType.from(direction: .top, offset: 30.0)
view.animate(animations: [animation])

Zoom

Zoom in and Zoom out animation support.

let animation = AnimationType.zoom(scale: 0.5)
view.animate(animations: [animation])

Combined Animations

You can combine conformances of Animation to apply multiple transforms on your animation block.

let fromAnimation = AnimationType.from(direction: .right, offset: 30.0)
let zoomAnimation = AnimationType.zoom(scale: 0.2)
let rotateAnimation = AnimationType.rotate(angle: CGFloat.pi/6)
UIView.animate(views: collectionView.visibleCells,
               animations: [zoomAnimation, rotateAnimation],
               duration: 0.5)
UIView.animate(views: tableView.visibleCells,
               animations: [fromAnimation, zoomAnimation], 
               delay: 0.5)

Animation

Animation protocol provides you the posibility of expanding the animations supported by ViewAnimator with exception of the animateRandom function.

public protocol Animation {
    var initialTransform: CGAffineTransform { get }
}

UITableView/UICollection extensions

ViewAnimator comes with a set of handy extensions to make your animations in UITableView and UICollectionView a lot simpler. They both have access to cells in a section to animate easily.

They both expose a method visibleCells(in section: Int) that returns an array of UITableViewCell or UICollectionViewCell.

let cells = tableView.visibleCells(in: 1)
UIView.animate(views: cells, animations: [rotateAnimation, fadeAnimation])

Mentions

Project Details

Requirements

  • Swift 4.0
  • Xcode 7.0+
  • iOS 8.0+

Contributing

Feel free to collaborate with ideas 💭, issues ⁉️ and/or pull requests 🔃.

If you use ViewAnimator in your app I'd love to hear about it and feature your animation here!

Contributors

Author

Marcos Griselli | @marcosgriselli

Twitter Follow

Twitter Follow

License

ViewAnimator is available under the MIT license. See the LICENSE file for more info.