Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathewsanders/Scrubber
🎚Swift playground for building animations with UIViewPropertyAnimator
https://github.com/mathewsanders/Scrubber
animation playground swift
Last synced: 25 days ago
JSON representation
🎚Swift playground for building animations with UIViewPropertyAnimator
- Host: GitHub
- URL: https://github.com/mathewsanders/Scrubber
- Owner: mathewsanders
- License: mit
- Created: 2017-03-14T15:47:48.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-22T19:34:40.000Z (over 7 years ago)
- Last Synced: 2024-10-30T15:27:50.335Z (about 1 month ago)
- Topics: animation, playground, swift
- Language: Swift
- Homepage:
- Size: 8.5 MB
- Stars: 37
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-Swift-Playgrounds - UIViewPropertyAnimator Playground - Playground demonstrating UIViewPropertyAnimator. (UIKit And Graphics / Animations)
README
# Playground Animation Scrubber 🎚
There are a lot of frameworks and tools for making animations and animated
transitions for your iOS projects.
If you're targeting iOS/tvOS 10.0+, then `UIViewPropertyAnimator` is probably
powerful enough for your needs: It includes the standard easing curves, a nice
implementation of spring physics, an easy way to define your own custom
timing curve, and a scalable API that allows from simple single step
interpolation, to chained, interruptible, and animations that can be modified on
the fly.
## ScrubContainerView
This project doesn't modify or build on top of `UIViewPropertyAnimator`, but
instead provides `ScrubContainerView`, a simple UIView subclass, that makes it
easier to create, explore, debug, and refine an animation in a playground.
1. Start by making a playground and importing `UIKit` and `PlaygroundSupport`
````Swift
import UIKit
import PlaygroundSupport
````
2. Create a new `ScrubContainerView` and make that the playground's `liveView`
(this presents the view in the playground's assistant editor panel.
````Swift
let container = ScrubContainerView()
PlaygroundPage.current.liveView = container
````
3. Next, go ahead an set up the objects to be animated, adding them to the
`stage` view of `ScrubContainerView` and setting their initial positions.
````Swift
let square = UIView()
container.stage.addSubview(square)
square.center = container.stage.center
square.transform = .identity
square.bounds.size = CGSize(width: 150, height: 50)
square.backgroundColor = .red
````
4. Finally, assign `animator` with a closure that returns a
`UIViewPropertyAnimator`. This defines the animations to perform.
````Swift
container.animator = {
// create the animator with the duration and timing curve
// (in this case using a spring-physics)
let animator = UIViewPropertyAnimator(duration: 2.0, dampingRatio: 0.5)
// define the properties to animate
animator.addAnimations {
square.transform = CGAffineTransform(rotationAngle: CGFloat.pi/2)
square.bounds.size = CGSize(width: 50, height: 150)
square.backgroundColor = .blue
}
// return the animator
return animator
}
````
`ScrubContainerView` adds a `UISlider` that lets you scrub through the animation
and look at it at any intermediate step.
An option for step #3 is to wrap the expressions that define the stating state
into the `startState` closure:
````Swift
container.startState = {
square.transform = .identity
square.bounds.size = CGSize(width: 150, height: 50)
square.backgroundColor = .red
}
````
If this property is defined `ScrubContainerView` will add a button button that
lets you to watch the animation perform with it's defined duration and timing
curve:
### Initializers
A `ScrubContainerView` can be initialized multiple ways. The default initializer
creates a stage width a 300x300 pixel size.
`ScrubContainerView.init(width: Double, height: Double)` allows a stage of any size.
Convenience initializers `ScrubContainerView.init(device: Device)` and
`ScrubContainerView.init(device: Device, orientation: Orientation)` allow for
stages to be created for `Device.iPhoneSE`, `.iPhone`, and .`iPhonePlus` and
orientations `.portrait` or `.landscape`.
### Examples
The playground includes the example above, as well as a [slightly more complex
example](https://github.com/mathewsanders/Scrubber/blob/master/source/Animation.playground/Pages/Keyframe%20example.xcplaygroundpage/Contents.swift)
that includes a 4-step animation chained together using keyframes to show how
more complex multi-step animations can be built, and a blank template ready to
start writing a new animation from scratch.
## Roadmap
- [x] UISlider to scrub animations
- [x] Button to play animation with default timing curve and duration
- [x] Initializers for different device sizes
- [ ] Resume animation after scrubbing
- [ ] Pause/resume animation
- [ ] Scrub paused animation
## Requirements
- Swift 3.0
- iOS/tvOS 10.0+
## Author
Made with :heart: by [@permakittens](http://twitter.com/permakittens)
## Contributing
Feedback, or contributions for bug fixing or improvements are welcome. Feel free to submit a pull request or open an issue.
## License
MIT