Latest 0.1.0
Homepage https://github.com/onmyway133/Wave
License MIT
Platforms ios 8.0, tvos 9.2, requires ARC
Authors

Declarative chainable animations in Swift

CI Status
Version
Carthage Compatible
License
Platform

Features

  • Declarative
  • Run animations in sequence
  • Run animations in parallel
  • Support UIView and Core Animation animations
  • Extensible
  • Prefer composition over extensions

What is the chain

  • A chain is a series of actions
  • Every action in a chain runs in sequence
  • An action knows how to do its job, and run next actions in the chain
  • A chain is like a pull signal, it does not do the job until you call run
public protocol Action {

  init()
  func run(nextActions: [Action])
}
  • Available actions
    • Wait: just delay
    • Custom: your custom code goes here
    • Log: print using Custom
    • View.Action: UIView animations
    • Layer.Action: Core Animation animations

Example fade out, wait, fade in, log

Chain<View.Action>()
  .add(ViewBasicAnimation().view(box1).fadeOut())
  .thenLog("done fade out")
  .thenWait(1)
  .then()
  .add(ViewBasicAnimation().view(box1).fadeIn())
  .thenLog("done fade in")
  .run()

Example how morph works using layer action

Chain<Layer.Action>()
.layer(view.layer)
.add(LayerKeyframeAnimation()
  .keyPath("transform.scale.x")
  .values([1, 1.3, 0.7, 1.3, 1])
  .keyTimes([0, 0.2, 0.4, 0.6, 0.8, 1])
  .coolConfig()
)
.add(LayerKeyframeAnimation()
  .keyPath("transform.scale.x")
  .values([1, 1.3, 0.7, 1.3, 1])
  .keyTimes([0, 0.2, 0.4, 0.6, 0.8, 1])
  .coolConfig()
)
.run()

What can we do with the chain

  • Define a chain
let chain = Chain<View.Action>()
  • Add an action to a chain
var wait = Wait()
wait.interval = 2

var custom = Custom()
custom.block = {
  print("wave")
}

chain.then(wait).then(custom)
  • Switch the chain type. Since each action in a chain can do different things, the autocompletes and compilers shine when we’re using the correct chain type

Example manipulating with layer action, then with view action

chain
  .then()
  .add(LayerSpringAnimation())
  .then(Chain<View.Action>())
  .add(ViewKeyframeAnimation())
  • Run the chain
chain.run()

Predefined animations with Ride

  • Prefer composition over extensions
  • Declare only wave on UIView, which returns a Ride for convenient animations

Available predefined rides

box1.wave.flipX().run()
  • shake
  • pop
  • morph
  • squeeze
  • wobble
  • swing
  • flipX
  • flipY
  • flash

UIView animation

  • View.Action maintains a list of UIView animations, which can be run in parallel
  • Each animation can be associated with a UIView, or be assigned UIView from View.Action automatically when it is inited
  • View.Action completes when the longest animation completes

Example using view from View.Action, move and change background at the same time

Chain<View.Action>()
  .view(box2)
  .add(ViewBasicAnimation().fadeOut().moveX(20))
  .add(ViewBasicAnimation().changeBackground(UIColor.blueColor()))
  .run()

Supported animations

  • ViewBasicAnimation: UIView animation
  • ViewKeyframeAnimation: UIView keyframe animation
  • ViewSpringAnimation: UIView spring animation
  • ViewSystemAnimation: UIView system animation
  • ViewTransitionAnimation: UIView from/to transition animation

Example fade out 3 boxes at the same time, then fade in 3 boxes at the same time

Chain<View.Action>()
  .add(ViewBasicAnimation().view(box1).fadeOut())
  .add(ViewBasicAnimation().view(box2).fadeOut())
  .add(ViewBasicAnimation().view(box3).fadeOut())
  .then()
  .add(ViewBasicAnimation().view(box1).fadeIn())
  .add(ViewBasicAnimation().view(box2).fadeIn())
  .add(ViewBasicAnimation().view(box3).fadeIn())
  .run()

Example move down 2 times, then move left, then a custom spring animation

Chain<View.Action>()
  .add(ViewBasicAnimation()
    .view(box3)
    .moveY(100)
    .delay(2)
    .duration(3)
    .repeatCount(2)
    .options([UIViewAnimationOptions.CurveEaseIn]))
  .then()
  .add(ViewBasicAnimation().view(box2).moveX(-10))
  .then()
  .add(ViewSpringAnimation()
    .block {
      self.counter = (self.counter + 1) % 4
      box1.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4) * CGFloat(self.counter))
    })
  .run()

Available predefined UIView configurations

  • move
  • translate
  • scale
  • zoom
  • rotate
  • fade
  • changeColor

CALayer animation

Supported animations

  • LayerBasicAnimation: CALayer basic animation
  • LayerKeyframeAnimation: CALayer keyframe animation
  • LayerSpringAnimation: CALayer spring animation (available on iOS 9+)
  • LayerTransitionAnimation: CALayer transition animation

Available Core Animation configurations

  • move
  • translate
  • scale
  • zoom
  • rotate
  • fade
  • coolConfig: set the duration to 0.5 and use EaseIn timing function, which is cool

Example swing with layer, then move with view

box1.wave.swing()
  .then(Chain<View.Action>())
  .add(ViewBasicAnimation().view(box1).moveX(10))
  .then()
  .add(ViewBasicAnimation().view(box1).moveY(10))
  .run()

Example how morph works using layer action

Chain<Layer.Action>()
.layer(view.layer)
.add(LayerKeyframeAnimation()
  .keyPath("transform.scale.x")
  .values([1, 1.3, 0.7, 1.3, 1])
  .keyTimes([0, 0.2, 0.4, 0.6, 0.8, 1])
  .coolConfig()
)
.add(LayerKeyframeAnimation()
  .keyPath("transform.scale.x")
  .values([1, 1.3, 0.7, 1.3, 1])
  .keyTimes([0, 0.2, 0.4, 0.6, 0.8, 1])
  .coolConfig()
)
.run()

Useful types

  • Layer.CalculationMode
  • Layer.RotationMode
  • Layer.FillMode
  • Layer.TimingFunction

Installation

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

pod 'Wave'

Wave is also available through Carthage.
To install just write into your Cartfile:

github "onmyway133/Wave"

Author

Khoa Pham, [email protected]

Contributing

We would love you to contribute to Wave, check the CONTRIBUTING file for more info.

License

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

Latest podspec

{
    "name": "Wave",
    "summary": "Declarative chainable animations in Swift",
    "version": "0.1.0",
    "homepage": "https://github.com/onmyway133/Wave",
    "license": "MIT",
    "authors": {
        "Khoa Pham": "[email protected]"
    },
    "source": {
        "git": "https://github.com/onmyway133/Wave.git",
        "tag": "0.1.0"
    },
    "social_media_url": "https://twitter.com/onmyway133",
    "platforms": {
        "ios": "8.0",
        "tvos": "9.2"
    },
    "requires_arc": true,
    "ios": {
        "source_files": "Sources/**/*",
        "frameworks": [
            "UIKit",
            "Foundation"
        ]
    },
    "tvos": {
        "source_files": "Sources/**/*"
    }
}

Pin It on Pinterest

Share This