Composable animations in Swift

Overview

Composable animations in Swift. Blog

Platform: iOS 8+ Language: Swift 3 License: MIT

Cocoapods compatible Carthage compatible SPM compatible

Docs Codecov Travis Code Climate

Installation

Cocoapods

The easiest way to get started is to use CocoaPods. Just add the following line to your Podfile:

pod 'SwiftyAnimate', '~> 1.3.0'

Carthage

github "rchatham/SwiftyAnimate"

Swift Package Manager

Add the following line to your Package.swift file.

.Package(url: "https://github.com/rchatham/SwiftyAnimate.git", majorVersion: 0) 

Usage

This library can be used to design composable animations while keeping animation code readable and maintainable.

Composing Animations

Compose animations and insert logic inbetween them using the then, do, and wait functions.

Then blocks

Add animations to the current instance using one of the implementations for this function. There are implemetations for spring and keyframe animations as well as chaining Animate objects together.

Animate(duration: 1.0) {
        // animation code goes here
    }
    .then(duration: 0.5) {
        // more animation code
    }
    .perform()

And blocks

Add animations to the current instance using one of the implementations for this function. There are implemetations for spring and keyframe animations as well as stacking Animate objects together. 'And' animations are performed in sync with the animation before it.

Animate(duration: 1.0) {
        // animation code goes here
    }
    .and(duration: 0.5) {
        // more animation code
    }
    .perform()

Do blocks

Add code that you don't intend on animating but would like to perform between animations here. Any code you put here will NOT be animated.

Animate(duration: 1.0) {
        // animation code goes here
    }
    .do {
        // logic you don't want to animate
    }
    .then(duration: 0.5) {
        // more animation code
    }
    .perform()

Wait blocks

Add code that you may want to pause an ongoing chain of animations for. Any code you put here will NOT be animated. You can pass in a timeout if you want to wait for a specific amount of time or if you don't want to wait longer to execute the code in the wait block.

Animate(duration: 1.0) {
        // animation code goes here
    }
    .wait(timeout: 5.0) { resume in
        // logic you want to pause an animation to complete
        resume()
    }
    .then(duration: 0.5) {
        // more animation code
    }
    .perform()

Performing Animations

There are two ways to perform animations finish and perform. Important: You must either call one of these two functions or decay on an animation instance or this will result in a memory leak!

Perform

This one is easy. Call this on an animation instance to perform it. Perform takes an optional closure which gets excecuted on completing the last animation block.

let animation = Animate(duration: 1.0) {
    // animations
}

animation.perform()

Finish

If you don't need to pass in a completion closure try calling finish on your animation instance. The animation passed in is enqueue'd and then perform is called on the instance. Finish has all of the same variations as the then function.

Animate(duration: 1.0) {
        // animations
    }
    .finish(duration: 1.0) {
        // animations
    }

Decay

If you would like to deallocate an animation instance without performing it call decay on it.

let animation = Animate(duration: 1.0) {
    // animations
}

animation.decay()

UIView Extensions

A number of animatable properties have extensions defined to make implementing them with this library even easier. Please check the docs!

Best Practices

The best way to take advantage of this library is define extensions for the views that you would like to animate. This compartmentailizes your code and keep all the animation logic tucked up within the view and out of your view controllers.

extension AnimatingView {
    func bounceAnimation() -> Animate {
        return Animate()
            .then(animation: scale(duration: 0.3, x: 1.3, y: 1.3))
            .then(animation: scale(duration: 0.3, x: 0.8, y: 0.8))
            .then(animation: scale(duration: 0.3, x: 1.1, y: 1.1))
            .then(animation: scale(duration: 0.3, x: 1.0, y: 1.0))
    }
}

Then when you go to perform an animation you just have to call perform() on the returned animation.

let animatingView = AnimatingView()

animatingView.bounceAnimation().perform()

And string them together with other animations for building up complex animation logic easily.

Animate()
    .then(animation: animatingView.bounceAnimation())
    .then(animation: animatingView.tiltAnimation())
    .then(animation: animatingView.bounceAnimation())
    .perform()

Contributing

I would love to see your ideas for improving this library! The best way to contribute is by submitting a pull request. I'll do my best to respond to your patch as soon as possible. You can also submit a new GitHub issue if you find bugs or have questions. 🙏

Please make sure to follow our general coding style and add test coverage for new features!

Comments
  • How do I remove the view from super view after a disappear animation?

    How do I remove the view from super view after a disappear animation?

    transform(duration: 0.5, transforms: [
            .scale(x: 0, y: 0)
            ]).do { [weak self] in
                self?.removeFromSuperview()
        }
    

    I have the above animation. I was hoping that when performed, the view will shrink and after 0.5 seconds it will be removed from the super view. However, it actually just make the view disappear without the animation. I thought the do block will run code after the animations. Am i misunderstanding this? How can I remove the view from super view after animation finishes?

    opened by Sweeper777 5
  • Make the transform method actually change the frame of the view!

    Make the transform method actually change the frame of the view!

    I first performed this animation:

    var moveUp: Animate {
        return transform(duration: 0.5, transforms: [
            .move(x: 0, y: -100)
            ])
    }
    

    Then I performed this:

    var moveRight: Animate {
        return transform(duration: SquareView.animDuration, transforms: [
            .move(x: 100, y: 0)
            ])
    }
    

    The view moves up, then to the bottom right. I have expected it to move the view up, then straight to the right i.e. equivalent to moving (x: 100, y: -100).

    I think this happens because when I do the second animation, the view thinks it is still at its original position, before the first animation.

    Can the transform method actually move the view?

    opened by Sweeper777 2
  • I got an error about multiple commands

    I got an error about multiple commands

    I got this error when I install the pod with Xcode 10:

    Multiple commands produce '/Users/user/Library/Developer/Xcode/DerivedData/MyApp-bqlusyyuqwregbcljtzhcxmeziow/Build/Products/Debug-iphonesimulator/SwiftyAnimate/SwiftyAnimate.framework/Info.plist':

    1. Target 'SwiftyAnimate' (project 'Pods') has copy command from '/Users/user/Documents/MyApp/Pods/SwiftyAnimate/Sources/Info.plist' to '/Users/user/Library/Developer/Xcode/DerivedData/MyApp-bqlusyyuqwregbcljtzhcxmeziow/Build/Products/Debug-iphonesimulator/SwiftyAnimate/SwiftyAnimate.framework/Info.plist'
    1. Target 'SwiftyAnimate' (project 'Pods') has process command with output '/Users/user/Library/Developer/Xcode/DerivedData/MyApp-bqlusyyuqwregbcljtzhcxmeziow/Build/Products/Debug-iphonesimulator/SwiftyAnimate/SwiftyAnimate.framework/Info.plist'
    opened by Sweeper777 1
  • Why can't I chain translated and scaled animations?

    Why can't I chain translated and scaled animations?

        Animate()
                .then(animation: translated(duration: 1, x: 0, y: 300, options: [.curveEaseIn]))
                .and(animation: scaled(duration: 1, x: 0.01, y: 0.01, options: [.curveEaseIn]))
    

    When I tried to perform the above animation, I only see the scale animation but not the translation animation.

    opened by Sweeper777 0
  • Swift 4.2 support?

    Swift 4.2 support?

    I saw there is a swift-4 branch so I tried to install that, but it still gives me quite a few errors. Swift 4.2 changes a lot of the names from UIKit. Can you update the pod so that it supports Swift 4.2?

    opened by Sweeper777 0
  • On Xcode 9.3 error message Contextual type for closure argument list expects 1 argument, which cannot be implicitly ignored

    On Xcode 9.3 error message Contextual type for closure argument list expects 1 argument, which cannot be implicitly ignored

    I updated my Xcode to Xcode 9.3 and this error came out BasicAnimation.swift file, line 48 Animate.swift file , line 494 and other problem => Missing argument for parameter #1 in call, swift file, line 48

    /// The animation block that gets performed. public var animationBlock: AnimationBlock { switch self { case .cornerRadius(view: let view, duration: let duration, delay: _, radius: let radius, timing: let timing): return { let animation = CABasicAnimation(keyPath: "cornerRadius") animation.timingFunction = timing.coreAnimationCurve animation.fromValue = view.layer.cornerRadius animation.toValue = radius animation.duration = duration view.layer.add(animation, forKey: "corner") view.layer.cornerRadius = radius } } }

    opened by aslamdodeen 1
  • How do I animate a rotation of 360 degrees or more?

    How do I animate a rotation of 360 degrees or more?

    Currently, .rotate(angle: 360) does not seem to rotate the view at all. I expected it to keep rotating the view clockwise until it reaches its original position. Is this not how it was designed? I have this workaround for now, but it's not nice:

    transform(duration: 0.1, transforms: [
            .rotate(angle: 180)
        ]).then(animation: transform(duration: 0.1, transforms: [
            .rotate(angle: 180)
        ]))
    
    opened by Sweeper777 3
Owner
Reid Chatham
Reid Chatham
Composable animations in Swift

Composable animations in Swift. Blog Installation Cocoapods The easiest way to get started is to use CocoaPods. Just add the following line to your Po

Reid Chatham 195 Dec 5, 2022
A collection of animations for iOS. Simple, just add water animations.

DCAnimationKit A collection of animations for iOS Simply, just add water! DCAnimationKit is a category on UIView to make animations easy to perform. E

Dalton 797 Sep 23, 2022
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
Swift interpolation for gesture-driven animations

Interpolate Interpolate is a powerful Swift interpolation framework for creating interactive gesture-driven animations. Usage The ?? idea of Interpola

Roy Marmelstein 1.8k Dec 20, 2022
A library to simplify iOS animations in Swift.

Updated for Swift 4.2 Requires Xcode 10 and Swift 4.2. Installation Drop in the Spring folder to your Xcode project (make sure to enable "Copy items i

Meng To 14k Jan 3, 2023
Swift library for choreographing animations on the screen.

Spruce iOS Animation Library (and Android) What is it? Spruce is a lightweight animation library that helps choreograph the animations on the screen.

WillowTree, LLC 3.4k Jan 3, 2023
Declarative chainable animations in Swift

Wave Declarative chainable animations in Swift ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PasteP

Khoa 125 Oct 10, 2022
Easy to read and write chainable animations in Objective-C and Swift

Whats new in version 3.x? Swiftier syntax Swift 4 support Bug fixes and improvements Whats new in version 2.x? Re-architected from the ground up, no m

Jeff Hurray 3.2k Dec 30, 2022
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations.

SamuraiTransiton is a ViewController transition framework in Swift. It is an animation as if Samurai cut out the screen with a sword. transition types

hachinobu 273 Dec 29, 2022
⛓ Easy to Read and Write Multi-chain Animations Lib in Objective-C and Swift.

中文介绍 This project is inspired by JHChainableAnimations! Why Choose LSAnimator & CoreAnimator? You can write complex and easy-to-maintain animations in

木子 1.6k Nov 22, 2022
This repo contains swift collection of gui, games, menu, animations, music, payment, etc... for iOS, macOS, watchOS and tvOS

Swift-Collections About: This repo contains a collection of projects built using swift and objective-c Contains projects for macOS iOS iPad watchOS tv

Krisna Pranav 6 Nov 15, 2022
Physics-based animations for iOS, tvOS, and macOS.

Advance An animation library for iOS, tvOS, and macOS that uses physics-based animations (including springs) to power interactions that move and respo

Tim Donnelly 4.5k Dec 29, 2022
Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers

Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers. It's magic. Features Animate a

Robert-Hein Hooijmans 1.3k Nov 17, 2022
Advanced Natural Motion Animations, Simple Blocks Based Syntax

FlightAnimator Moved to Swift 3.1 Support: For Swift 3.1 - Use tag Version 0.9.9 See Installation Instructions for clarification Introduction FlightAn

Anton 589 Dec 29, 2022
An iOS library to natively render After Effects vector animations

Lottie for iOS, macOS (and Android and React Native) View documentation, FAQ, help, examples, and more at airbnb.io/lottie Lottie is a mobile library

Airbnb 23.6k Dec 31, 2022
A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

AnimatedCollectionViewLayout Normally a UICollectionView has no transition effects when you scroll from one item to another. There are lots of ways to

Jin Wang 4.5k Jan 1, 2023
A port of SwiftUILab's Advanced Animations that also supports macOS

SwiftUILab Advanced Animations on the Mac as well A port of SwiftUILab's Advanced Animations that also supports macOS Here's the Ghist of the original

Mihaela Mihaljevic Jakic 10 Jan 2, 2023
Animations created with SwiftUI.

A repository containing a variety of animations and Animated components created in SwiftUI that you can use in your own projects.

Shubham Kr. Singh 1.5k Jan 2, 2023