marcosgriselli/viewanimator

ViewAnimator brings your UI to life with just one line

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

• iOS Dev Weekly 323
• Natasha The Robot's Newsleter 147
• Top 10 Swift Articles October
• 30 Amazing iOS Swift Libraries (v2018)

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

License

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

viewanimator's Issues

sprintWithDamping/initialSpringVelocity not working?

Expected Behavior

when setting usingSpringWithDamping and initialSpringVelocity it seems as if they have no effect; no spring animation at all... Am I missing something?

Actual Behavior

E.g. the zoom animation is linear, the view grows - but now springin

Steps to Reproduce the Problem

1. setting usingSpringWithDamping to e.g. 3, 0.3, ...
2. setting initialSpringVelocity to e.g. 5, 0.5, ...
3. there is no difference between setting in on configuration or directly with UIView.animate

Specifications

• Version: 13
• Platform: iOS

Add Carthage support

👆

Animations behaving differently in latest version

Expected Behavior

• Tableview rows: offset by 200 and slide in from below (working in release version of app, using prior ViewAnimator code)
• Button: zoom in from initial scale of .25 (same)

Actual Behavior

• Tableview rows start in place and move up into offset position (so 200 off the top of the screen)
• Button: starts and remains at .25 scale

Steps to Reproduce the Problem

1. Corrected code to new syntax. myView.animate() or myView.animatAll(), inserting array of animation types as argument, in this example a single animation in brackets
2. Observe unexpected behavior in simulator

Specifications

• Version: XCode 9.0.1, iOS 11
• Platform: iOS, Swift

No animation for Header and Footer of UICollectionView or UITableView

Thats all)

Add UITests with EarlGrey

EarlGrey is an iOS UI Automation Test framework created by Google.

One of the main features we could use to create UITests on ViewAnimator is the Synchronization feature for animations and Visibility Checks for determining the visibility of certain UI. This is exactly what we need to create tests.

I feel this is a better alternative for this particular case than XCUI.

Animate specific indexPaths

As mentioned in #29 and #32 only animating visibleCells is not good enough for every case using UITableView and UICollectionView.
We need to support animating a particular section or simply a selection of IndexPath.

Black big dot show when data not found in tableView

Animation does not work for the bottom cells.

Hello! There was a problem when using ViewAnimator and UIRefreshControl, that is, if for the first time the animation works as it should, then the second time after the data is reloaded with UIRefreshControl, the bottom three cells appear without animation. Of course, I understand that this is due to the fact that these cells are not visibleCells (at the start of the animation, 12 cells are visible, after the animation 15), but how to solve this problem?

Please see the video https://monosnap.com/file/CNs9V8EKIWbOsuLzXcybqfMRDb5jYp

Specifications

• Version: 11.1.1
• Platform: iOS

Update: At the moment I made a hack that I increase the CollectionView height to a value that helps to animate the lower row of cells, but there may be options to do it better.

When/Where to use it?

Hi! I'm pretty new in swift and I didn't exactly understood where to call the animation in an UITableView..

I want to reproduce something like this

    

I've tried calling it inside viewDidLoad but nothing happens, the same in viewWill/DidAppear..

That's my code:

   override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        self.hero.isEnabled = false
        self.navigationController?.hero.isEnabled = false
        
       
        tableView.reloadData()
        let cells = tableView.visibleCells(in: 0)
        let animation = AnimationType.from(direction: .bottom, offset: 30.0)
        
        UIView.animate(views: cells, animations: [animation])
    }

When the collection view is loaded for the first time, the animation does not work.

Actual Behavior

When the collection view is loaded for the first time, the animation does not work.

Steps to Reproduce the Problem

    sender.isEnabled = false
    activityIndicator.stopAnimating()
    items = Array(repeating: nil, count: 20)
    self.collectionView!.reloadData()
    self.collectionView!.animateViews(animations: [AnimationType.from(direction: .right, offset: 30.0)],
                                      completion: {
                                        sender.isEnabled = true
    })

Issue about swift version

Hello Marcos, Im facing a problem when I try to run your example:

“Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.

I tried to convert but it didn't worked.

Im on Xcode 8.3 tried swift v3 and v4

Can you help me?

Thanks

Carlos

Is this library compatible with Objective C?

Swift 5+ support

CollecitonView `animateViews` for `indexPaths`

hi, thanks for your awesome framework.
Is there any way to animateViews of collectionView for a set of indexPath ie. Array of IndexPath.
I have pagination on my collection view and every time I append items on it the whole collection view starts animating ( which I don't want).
I just wanted to animate for a selected array of index paths.
Cheers.

AnimationType.vector animates in an incorrect direction

#70 introduced a new animation case called .vector(CGVector) which replaced the old .from(Direction, CGFloat) case. This new type has a bug where the animations are performed in an incorrect direction.

view.animate(animations: AnimationType.vector(CGVector(dx: 0, dy: 30)))

Should translate the view from top to bottom by 30 points but it's happening in a reversed order.

Help :)

hello, can u help noob to make animation like this https://dump.video/i/Upf9UB.mp4
(when all elements bounce a little )

Problems appearing cells before the animation starts.

Hello! Thanks for the wonderful framework! I ran into the problem that UICollectionView cells appear before the animation starts, at this point the cells are loading photos and the user names are already visible. Please tell me how can this be avoided?

                self?.collectionView.refreshControl?.endRefreshing()
                let offset = UIScreen.main.bounds.width
                let fromAnimation = AnimationType.from(direction: .left, offset: offset)
                let animationInterval = 0.1
                self?.collectionView.animateViews(animations: [fromAnimation], initialAlpha: 1, finalAlpha: 1, delay: 0, duration: 0.4, animationInterval: animationInterval, completion: {
                    
                })
                self?.collectionView.reloadData()

https://monosnap.com/file/MgYyNwEbBqeMdyI4jedYBPMf0uIKOQ

macOS support

Please consider! ❤️

Not working using Xib on tableview

Hi! The animation is not working, i am using a XIB, i would like to know if there is a fix to this features

Thanks in advance!

Animations don't work when presenting a ViewController

Expected Behavior

Animation should work in every VC

Actual Behavior

Animation only works in initial VC

Steps to Reproduce the Problem

Creating two VCs, connecting them, using a code like

let fromAnimation = AnimationType.from(direction: .left, offset: 80)
headingTextLabel.animate(animations: [fromAnimation], delay: 0, duration: 0.5)
mainTextView.animate(animations: [fromAnimation], delay: 0, duration: 0.5)
continueButton.animate(animations: [fromAnimation], delay: 0.2, duration: 0.5)

and see the animation only on the initial VC

Specifications

• Xcode-Version: Xcode Version 11.3.1 (11C504)
• iOS-Version: iOS 13

Support UIViewPropertyAnimator

On iOS 10 we were introduced to UIViewPropertyAnimator which comes packed with amazing features to create rich and interactive animations. ViewAnimator relies on the old UIView animations API in order to support previous versions of iOS, but we could extend for iOS 10+ using UIViewPropertyAnimator specific functionalities (like reversing animations or changing it's completion percentage manually).

restoreViewsToIdentity() by default

I think, implementation restoreViewsToIdentity() on reverse should be by default. Are there any cases to use hidden view after reversed animation below its necessary position?

Wrong animation in UICollectionView with 2 or more columns in vertical flow

Instead of

private func indexPathFor(cell: UICollectionViewCell) -> Int {
        return indexPath(for: cell)?.item ?? -1
}
    
public var views: [UIView] {
        let items = visibleCells
        return items.sorted(by: { indexPathFor(cell: $1) > indexPathFor(cell: $0) })
}

better to use:

public var views: [UIView] {
        return indexPathsForVisibleItems.sorted().compactMap { cellForItem(at: $0) }
}

Items in StackView Hide /show animation

Question

looking for better example hide and show animation of view inside stackView

Is this library compatible with Objective C?

I tried using it and the only exposed method for a view is "animateRandomWithInterval"

Thanks

Add Custom Animation

Is there any way to extend AnimationType to add custom animations using CGAffineTransforms ?
There does not seem any documentation on this

SwiftUI support

🙊

App Store Submission Error

Getting the following error when trying to archive.

ERROR ITMS-90056: "This bundle Frameworks/ViewAnimator.framework is invalid. 
The Info.plist file is missing the required key: CFBundleVersion. 
Please find more information about CFBundleVersion at https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleversion"

Using Carthage:

github "marcosgriselli/ViewAnimator"

UIView unexpectedly changes position after animation

Expected Behavior

I have a button that uses an AnimationType(.bottom, offset: 10) animation whenever it is tapped.
The button should perform the animation and return to its original position.

Actual Behavior

The button performs the animation but changes it's y position with every tap. For example, here is the CGRect of the button for each button animation:

(247.6666666666667, 10.0, 106.33333333333334, 30.0)
(247.6666666666667, 20.0, 106.33333333333334, 30.0)
(247.6666666666667, 30.0, 106.33333333333334, 30.0)
(247.6666666666667, 40.0, 106.33333333333334, 30.0)

Steps to Reproduce the Problem

1. Programmatic views with autolayout
2. Press button and animate it: UIView.animate(views: [button], animations: [buttonAnimation], reversed: true, initialAlpha: 1.0, finalAlpha: 0.0, completion: {print(self.button.frame)})

Specifications

• Version: 2.2.0
• Platform: iOS 11
• Subsystem:

Cannot install as pod

Expected Behavior

Install through pod install

Actual Behavior

[!] Unable to find a specification for ViewAnimator
[!] Unable to find a specification for ViewAnimator (~> 1.0)
[!] Unable to find a specification for ViewAnimator (~> 1.0.2)

Animate visible cells of a section

How can I set animation for particular section of table view??

EXC_BREAKPOINT in animateViews

Hey

The issue happens right here, in my case dispatchGroup.leave() happens more times then dispatchGroup.enter() which causes EXC_BREAKPOINT

Probably, subviews count changes during asyncAfter

The code, invoked the animation is this:

let fromAnimation = AnimationType.from(direction: .right, offset: 400.0)   
animateViews(animations: [fromAnimation], initialAlpha: 0.0, finalAlpha: 1.0, delay: 0.0, duration: 0.2, animationInterval: 0.2, completion: nil)

Cheers

Animate on viewDidLoad()

How can I use an animate a UITableView's cells on viewDidLoad()?

Use ViewAnimator on iOS 8

SwiftUI support with version 3.01.?

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

• Version:
• Platform:
• Subsystem:

Animation repeat interval

Is there any way to define, at this time, a repeat interval for a given animation?

Type 'AnimationType' has no member 'from'

Steps to Reproduce the Problem

1. import ViewAnimator
2. let moveFromLeftAnimation = AnimationType.from(direction: .left, offset: 50)
3. swipeTextLabelOutlet.animate(animations: [moveFromLeftAnimation], initialAlpha: 0, finalAlpha: 1, delay: baseDelay + delayTwo, duration: duration)

results in

Cannot infer contextual base in reference to member 'left'
Type 'AnimationType' has no member 'from'

Possible choices are

Specifications

• Version: Xcode Version 12.0 (12A7209), iOS 14.0, iPhone 11 Pro, ViewAnimator v. 3.0.1

self?.transform = CGAffineTransform.identity

Expected Behavior

Actual Behavior

if view has a tranform before animation,the tranform will become CGAffineTransform.identity when animation finish

Steps to Reproduce the Problem

import Foundation
import UIKit

/// Animations completion block
public typealias CompletionBlock = (()->())
private var kViewAnimationPreTransformKey = "kViewAnimationPreTransformKey"

// MARK: - UIView extension with animations.
public extension UIView {

var preTransform: CGAffineTransform? {
    get {
        return objc_getAssociatedObject(self, &kViewAnimationPreTransformKey) as? CGAffineTransform
    }
    set {
        objc_setAssociatedObject(self, &kViewAnimationPreTransformKey, newValue, .OBJC_ASSOCIATION_RETAIN)
    }
}

/// Performs the animation.
///
/// - Parameters:
///   - animations: Array of Animations to perform on the animation block.
///   - initialAlpha: Initial alpha of the view prior to the animation.
///   - finalAlpha: View's alpha after the animation.
///   - delay: Time Delay before the animation.
///   - duration: TimeInterval the animation takes to complete.
///   - completion: CompletionBlock after the animation finishes.
public func animate(animations: [Animation],
                    initialAlpha: CGFloat = 0.0,
                    finalAlpha: CGFloat = 1.0,
                    delay: Double = 0,
                    duration: TimeInterval = ViewAnimatorConfig.duration,
                    completion: CompletionBlock? = nil) {
    
    // Apply initial transform and alpha
    animations.forEach {
        preTransform = transform
        transform = transform.concatenating($0.initialTransform)
    }
    alpha = initialAlpha
    
    DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
        UIView.animate(withDuration: duration, animations: { [weak self] in
            self?.transform = self?.preTransform ?? CGAffineTransform.identity
            self?.alpha = finalAlpha
            }, completion: { _ in
                completion?()
        })
    }
}

}

Crash after calling animateViews in tableView

Expected Behavior

Aninate and not crash. This was working a month ago. I just reopened my project and now I can't get it working

Actual Behavior

Crash in line 49 of ViewAnimator.swift

Steps to Reproduce the Problem

1. Setup a simple tableView
2. Reload data
3. Just after reloading data call animate views like this
   tableView.animateViews(animations: [AnimationType.from(direction: .bottom, offset: 30.0)])

Specifications

• Version: 1.0.4 of ViewAnimator
• Swift 4.0
• Deployment target is 11.2.

SwiftUI support maybe?

Wish there was a swiftui support, cuz this'd be so much faster

Reversed animations

Expected Behavior

There should be a parameter for reversed animation

Actual Behavior

No method found. Seems to be removed from last versions

Steps to Reproduce the Problem

Make a simple project, try to find the following method of tableView example

tableView.animateViews(animations: [animation], reversed: true, initialAlpha: 1.0, finalAlpha: 0.0,
                               completion: {
                                self.tableView.restoreViewsToIdentity()
                                self.tableView.reloadData()
                                self.activityIndicator.startAnimating()
        })

No method found with current version

Specifications

Swift 4, iOS 11, 1.0.4 version of ViewAnimator

Build better examples

The current example app is a really simple approach on what can be done with ViewAnimator. Even though the library is not complex to integrate and use on your own projects it would be nice to show how to use different animations in different scenarios.

I'd be replicating the app should on the animations Complex header.

Add Swift Package Manager support

Support of timing functions

Hi,

Would it be possible to support timing functions like https://github.com/cats-oss/Sica#easingfunctions in ViewAnimator?

Thanks for this library.

Animations not visible on UICollectionView

Hi, thanks for the library, I have a issue with running the animation on UICollectionView, I followed the instruction step by step looking at the example in the repository, but it won't work and it doesn't show any animation, and it load data into collectionview without any animation.

Question: Use ViewAnimator for animations between two VCs

Hi Marcos, I love these transitions and would like to incorporate them on my new project. I'm having trouble using it to transition between two view controllers. Is it possible to do that with ViewAnimator or is it only for loading a view within a view controller?

Here is the way I'm doing my transition between the two view controllers right now:

// In VC1 call this func to transition to VC2
func goToVC2() {
    let storyBoard: UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
    let VC2 = storyBoard.instantiateViewController(withIdentifier: "VC2") as! VC2
    self.present(VC2, animated: true, completion: nil)
}

How to use this class in Objective-C

Expected Behavior

Don't know

Actual Behavior

Working in Swift

Specifications

• Version:Swift
• Platform:Objective-C
• Subsystem:

ViewAnimator Pod is not installing

pod "ViewAnimator" is not installing on existing project.Though it is installing on newly created project.

• Version:Xcode11.1
• Platform:OS Catalina