Compose SpriteKit animations quickly in a declarative SwiftUI-style

Related tags

Animation swift gamedev animation dsl spritekit declarative swiftpackage skaction functionbuilder resultbuilder
Overview

ActionBuilder

Caveat developer: As this package is pre-release, the API may change significantly without notice. It has not been tested, so use it at your own risk.

ActionBuilder allows you to write SpriteKit animations in a more succinct, declarative manner. It consists of various structs representing basic animations like Scale and Rotate.

An animation created with ActionBuilder:

let emote =
Sequence {
    Group {
        FadeIn(duration: 0.7)
        Scale(by: 1.5, duration: 0.7)
        Move(to: (0, 30), duration: 0.7)
    }
    Wait(0.5)
    FadeOut(duration: 1)
    Remove()
}

Versus the same animation using Apple's SpriteKit SKActions:

let emoteAction: SKAction = {
    let fadeIn = SKAction.fadeIn(withDuration: 0.7)
    let grow = SKAction.scale(by: 1.5, duration: 0.7)
    let moveUp = SKAction.moveTo(y: 30, duration: 0.7)
    let appear = SKAction.group([fadeIn, grow, moveUp])
    let wait = SKAction.wait(forDuration: 1)
    let disappear = SKAction.fadeOut(withDuration: 1)
    let remove = SKAction.removeFromParent()
    let emoteAnimation = SKAction.sequence([appear, wait, disappear, remove])
    return emoteAnimation
}()

ActionBuilder allows you to use conditional and looping statements within your animation declaration to make them more flexible and easier to write.

Coordinate animations across multiple nodes with the changeTarget(to:) modifier.

Custom operators included: + will concatenate actions into a sequence, & will group them to run simultaneously, - will reverse reversible actions, and * allows you to repeat an action multiple times.

You can even include SKActions if no equivalent is available in ActionBuilder.

let node = SKNode()
let otherNode = SKNode()

node.run {
    Group {
        
        Sequence {
            for i in 0...9 {
                Colorize(with: UIColor(red: Double(i/10), green: 0.7, blue: 0.7, alpha: 1))
                Wait(0.2)
            }
        }
        .changeTarget(to: otherNode)
        
        Sequence {
            let moveUp = Move(by: (0, 10))
            if Bool.random() {
                moveUp * 2
            } else {
                -moveUp
            }
            
            SKAction.resize(toHeight: 20, duration: 5)
        }
    }
}

See Apple's documentation: https://developer.apple.com/documentation/spritekit/skaction/action_initializers

You might also like...
Animations created with SwiftUI.
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
Match animations in SwiftUI and UIKit/AppKit
Match animations in SwiftUI and UIKit/AppKit

MatchedAnimation Match animations in SwiftUI and UIKit/AppKit. /// Draw a box in

Ryan Carver 6 Dec 21, 2022
Tools for SwiftUI that helps perform Path and Shape animations, such us morphing circle or shape transformations
Tools for SwiftUI that helps perform Path and Shape animations, such us morphing circle or shape transformations

SwiftUI+PathAnimations 🔵 Introduction This packages contains SimilarShape and InterpolatedShape, both can be used to achieve shapes animations with S

Alfredo Delli Bovi 180 Dec 29, 2022
LottieView - Wrapper around Lottie in SwiftUI that allows chaining animations & triggering callbacks at certain frames

LottieView is a Wrapper around Lottie in SwiftUI that allows chaining animations & triggering callbacks at certain frames

Ahmed Ramy 0 Jan 23, 2022
Easily pause and resume SwiftUI animations
Easily pause and resume SwiftUI animations

swiftui-pausable-animation Easily pause and resume SwiftUI animations! Installation This component is distributed as a Swift package. Just add this re

Gordan Glavaš 6 Nov 24, 2022
Swiftui Spring Animations
Swiftui Spring Animations

Swiftui Spring Animations This repository serves as your reference for SwiftUI Spring Animations. It demonstrates use cases for the various types of s

Stream 348 Dec 30, 2022
A concept to more easily define simple keyframe / multi-step animations in SwiftUI

🎞 Animate A concept to more easily define simple keyframe / multi-step animations in SwiftUI, without: Defining an @State value for each property to

Seb Jachec 3 Oct 18, 2022
RetroBubbleText - A simple effect used in Retrogram which renders text with a fun bubble-style outline in SwiftUI
RetroBubbleText - A simple effect used in Retrogram which renders text with a fun bubble-style outline in SwiftUI

Retro Bubble Text This is a simple effect used in Retrogram which renders text w

Simeon Saëns 5 Aug 29, 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
Comments
  • Runnables redirected to another node always complete instantly

    Runnables redirected to another node always complete instantly

    In the following example, a sequence of runnables is set to run on firstNode: the 1 second duration Fade runnable is redirected to run on secondNode, and then the 1 second duration Scale runnable runs on firstNode.

    It would be reasonable to expect that secondNode will fade out over 1 second, and afterwards, firstNode will double in size over 1 second, and that the entire sequence should take 2 seconds total to run.

    But that is not how the .changeTarget(to:) modifier currently behaves. Once the fade is redirected to secondNode and begins to execute, that step in the sequence is considered to be complete, and the scale on firstNode will begin, so the 2 nodes will end up animating at the same time. The total duration of the sequence will be around 1 second.

    I think the first behavior should be implemented because it simplifies the coordination of animations across multiple nodes. A workaround is to keep nesting redirections, shown in the second block of code, but this is both harder to write and read.

    let firstNode = SKNode()
let secondNode = SKNode()

firstNode.run {
  Sequence {
      Fade.out(over: 1)
          .changeTarget(to: secondNode)
      Scale(to: 2, over: 1)
  }
}

    Convoluted workaround to implement expected behavior:

    firstNode.run {
  Sequence {
    Sequence {
        Fade.out(over: 1)
        Scale(to: 2, over: 1)
            .changeTarget(to: firstNode)
    }
    .changeTarget(to: secondNode)
  }
}
    invalid 
    opened by coughski 0
Releases(v0.1.0-dev)
Owner
Kuba Szulaczkowski
Kuba Szulaczkowski
GitHub
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022
☠️SkeletonUI aims to bring an elegant, declarative syntax to skeleton loading animations.

SkeletonUI aims to bring an elegant, declarative syntax to skeleton loading animations. Get rid of loading screens or spinners and start using skeletons to represent final content shapes.

Carlos Solana Martínez 551 Dec 18, 2022
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
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
Keynote-style Magic Move transition animations

MagicMove All the magic of Keynote Magic Move transitions brought to iOS. Demo Magic Move Transition Spin Transition Fade Transition TODO MagicMove Tr

Patrick Reynolds 15 Sep 6, 2018
Better Easing for SpriteKit in Swift

This easing library began life as a port of buddingmonkey's Objective C SpriteKit Easing library to Swift. This library extends upon the basic easing

Craig Grummitt 110 Dec 17, 2022
Bring life to CALayers with SpriteKit-like animation builders

Animo Bring life to CALayers with SpriteKit-like animation builders. Why use Animo? Because declaring CAAnimations (especially with CAAnimationGroups)

エウレカ 279 Dec 9, 2022
Fluid - Use a declarative syntax to build your user interface using UIKit like SwiftUI

Fluid Fluid is powered by ResultBuilder and a custom layout engine. You can uses

HZ.Liu 13 Dec 9, 2022