mirror of
https://github.com/EmergeTools/Pow.git
synced 2026-03-25 08:55:50 +00:00
Add README
This commit is contained in:
parent
9d28658a7d
commit
17d9de13c4
10 changed files with 340 additions and 0 deletions
340
README.md
Normal file
340
README.md
Normal file
|
|
@ -0,0 +1,340 @@
|
|||

|
||||
|
||||
# Pow
|
||||
|
||||
Delightful SwiftUI transitions for your app.
|
||||
|
||||
> **Note**
|
||||
> This is a Beta version.
|
||||
>
|
||||
> Pow is free while in Beta and will be a simple one-time purchase after that.
|
||||
|
||||
# Installation
|
||||
|
||||
To add a package dependency to your Xcode project, select _File_ > _Add Package_ and enter this repository's URL (https://github.com/movingparts-io/Pow).
|
||||
|
||||
# Known issues
|
||||
|
||||
- [Xcode Previews depending on Pow are broken in Xcode 14b5](https://developer.apple.com/forums/thread/707569).
|
||||
**Suggested Solution:** Download, unpack and embed the [`.xcframework` referenced in the `Package.swift`](./Package.swift) file.
|
||||
|
||||
# Overview
|
||||
|
||||
All transitions are namespaced under the `movingParts` static variable, e.g.
|
||||
|
||||
```swift
|
||||
myView.transition(.movingParts.anvil)
|
||||
```
|
||||
|
||||
## Anvil
|
||||
|
||||

|
||||
|
||||
A transition that drops the view down from the top.
|
||||
|
||||
The transition is only performed on insertion and takes 1.4 seconds.
|
||||
|
||||
```swift
|
||||
static var anvil: AnyTransition
|
||||
```
|
||||
|
||||
## Blur
|
||||
|
||||
A transition from blurry to sharp on insertion, and from sharp to blurry
|
||||
on removal.
|
||||
|
||||
```swift
|
||||
static var blur: AnyTransition
|
||||
```
|
||||
|
||||
## Boing
|
||||
|
||||

|
||||
|
||||
A transition that moves the view down with any overshoot resulting in an
|
||||
elastic deformation of the view.
|
||||
|
||||
```swift
|
||||
static var boing: AnyTransition
|
||||
```
|
||||
|
||||
A transition that moves the view away towards the specified edge, with
|
||||
any overshoot resulting in an elastic deformation of the view.
|
||||
|
||||
```swift
|
||||
static func boing(edge: Edge) -> AnyTransition
|
||||
```
|
||||
|
||||
## Clock
|
||||
|
||||
A transition using a clockwise sweep around the centerpoint of the view.
|
||||
|
||||
```swift
|
||||
static var clock: AnyTransition
|
||||
```
|
||||
|
||||
A transition using a clockwise sweep around the centerpoint of the view.
|
||||
|
||||
- Parameter `blurRadius`: The radius of the blur applied to the mask.
|
||||
|
||||
```swift
|
||||
static func clock(blurRadius: CGFloat) -> AnyTransition
|
||||
```
|
||||
|
||||
## Flicker
|
||||
|
||||
A transition that toggles the visibility of the view multiple times
|
||||
before settling.
|
||||
|
||||
```swift
|
||||
static var flicker: AnyTransition
|
||||
```
|
||||
|
||||
A transition that toggles the visibility of the view multiple times
|
||||
before settling.
|
||||
|
||||
- Parameter `count`: The number of times the visibility is toggled.
|
||||
|
||||
```swift
|
||||
static func flicker(count: Int) -> AnyTransition
|
||||
```
|
||||
|
||||
## Flip
|
||||
|
||||

|
||||
|
||||
A transition that inserts by rotating the view towards the viewer, and
|
||||
removes by rotating the view away from the viewer.
|
||||
|
||||
> **Note:**
|
||||
> Any overshoot of the animation will result in the view continuing the rotation past the view's normal state before eventually settling.
|
||||
|
||||
```swift
|
||||
static var flip: AnyTransition
|
||||
```
|
||||
|
||||
## Glare
|
||||
|
||||
A transitions that shows the view by combining a diagonal wipe with a
|
||||
white streak.
|
||||
|
||||
```swift
|
||||
static var glare: AnyTransition
|
||||
```
|
||||
|
||||
A transitions that shows the view by combining a wipe with a colored
|
||||
streak.
|
||||
|
||||
The angle is relative to the current `layoutDirection`, such that 0°
|
||||
represents sweeping towards the leading edge on insertion and 90°
|
||||
represents sweeping towards the top edge.
|
||||
|
||||
In this example, the removal of the view is using a glare with an
|
||||
exponential ease-in curve, combined with a anticipating scale animation,
|
||||
making for a more dramatic exit.
|
||||
|
||||

|
||||
|
||||
```swift
|
||||
infoBox
|
||||
.transition(
|
||||
.asymmetric(
|
||||
insertion: .movingParts.glare(angle: .degrees(225)),
|
||||
removal: .movingParts.glare(angle: .degrees(45)
|
||||
)
|
||||
.animation(.movingParts.easeInExponential(duration: 0.9))
|
||||
.combined(with:
|
||||
.scale(scale: 1.4)
|
||||
.animation(.movingParts.anticipate(duration: 0.9).delay(0.1)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
- Parameters:
|
||||
- `direction`: The angle of the wipe.
|
||||
- `color`: The color of the glare effect.
|
||||
|
||||
```swift
|
||||
static func glare(angle: Angle, color: Color = .white) -> AnyTransition
|
||||
```
|
||||
|
||||
## Iris
|
||||
|
||||
A transition that takes the shape of a growing circle when inserting,
|
||||
and a shrinking circle when removing.
|
||||
|
||||
- Parameters:
|
||||
- `origin`: The center point of the circle as it grows or shrinks.
|
||||
- `blurRadius`: The radius of the blur applied to the mask.
|
||||
|
||||
```swift
|
||||
static func iris(origin: UnitPoint = .center, blurRadius: CGFloat = 0) -> AnyTransition
|
||||
```
|
||||
|
||||
## Move
|
||||
|
||||
A transition that moves the view from the specified edge of the on
|
||||
insertion and towards it on removal.
|
||||
|
||||
```swift
|
||||
static func move(edge: Edge) -> AnyTransition
|
||||
```
|
||||
|
||||
A transition that moves the view at the specified angle.
|
||||
|
||||
The angle is relative to the current `layoutDirection`, such that 0° represents animating towards the leading edge on insertion and 90° represents inserting towards the top edge.
|
||||
|
||||
In this example, the view insertion is animated by moving it towards the top trailing corner and the removal is animated by moving it towards the bottom edge.
|
||||
|
||||
```swift
|
||||
Text("Hello")
|
||||
.transition(
|
||||
.asymmetric(
|
||||
insertion: .movingParts.move(angle: .degrees(45)),
|
||||
removal: .movingParts.move(angle: .degrees(90))
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
- Parameter `angle`: The direction of the animation.
|
||||
|
||||
```swift
|
||||
static func move(angle: Angle) -> AnyTransition
|
||||
```
|
||||
|
||||
## Pop
|
||||
|
||||

|
||||
|
||||
A transition that shows a view with a ripple effect and a flurry of
|
||||
tint-colored particles.
|
||||
|
||||
The transition is only performed on insertion and takes 1.2 seconds.
|
||||
|
||||
```swift
|
||||
static var pop: AnyTransition
|
||||
```
|
||||
|
||||
A transition that shows a view with a ripple effect and a flurry of
|
||||
colored particles.
|
||||
|
||||
In this example, the star uses the pop effect only when transitioning
|
||||
from `starred == false` to `starred == true`:
|
||||
|
||||
```swift
|
||||
Button {
|
||||
starred.toggle()
|
||||
} label: {
|
||||
if starred {
|
||||
Image(systemName: "star.fill")
|
||||
.foregroundStyle(.orange)
|
||||
.transition(.movingParts.pop(.orange))
|
||||
} else {
|
||||
Image(systemName: "star")
|
||||
.foregroundStyle(.gray)
|
||||
.transition(.identity)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The transition is only performed on insertion.
|
||||
|
||||
- Parameter `style`: The style to use for the effect.
|
||||
|
||||
```swift
|
||||
static func pop(_ style: AnyShapeStyle) -> AnyTransition
|
||||
```
|
||||
|
||||
## Rotate3D
|
||||
|
||||
A transition that inserts by rotating from the specified rotation, and
|
||||
removes by rotating to the specified rotation in three dimensions.
|
||||
|
||||
In this example, the view is rotated 90˚ about the y axis around
|
||||
its bottom edge as if it was rising from lying on its back face:
|
||||
|
||||

|
||||
|
||||
```swift
|
||||
Text("Hello")
|
||||
.transition(.movingParts.rotate3D(
|
||||
.degrees(90),
|
||||
axis: (1, 0, 0),
|
||||
anchor: .bottom,
|
||||
perspective: 1.0 / 6.0)
|
||||
)
|
||||
```
|
||||
|
||||
> **Note:**
|
||||
> Any overshoot of the animation will result in the view continuing the rotation past the view's normal state before eventually settling.
|
||||
|
||||
- Parameters:
|
||||
- `angle`: The angle from which to rotate the view.
|
||||
- `axis`: The x, y and z elements that specify the axis of rotation.
|
||||
- `anchor`: The location with a default of center that defines a point
|
||||
in 3D space about which the rotation is anchored.
|
||||
- `anchorZ`: The location with a default of 0 that defines a point in 3D
|
||||
space about which the rotation is anchored.
|
||||
- `perspective`: The relative vanishing point with a default of 1 for
|
||||
this rotation.
|
||||
|
||||
```swift
|
||||
static func rotate3D(_ angle: Angle, axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1) -> AnyTransition
|
||||
```
|
||||
|
||||
## Skid
|
||||
|
||||

|
||||
|
||||
A transition that moves the view in from its leading edge with any
|
||||
overshoot resulting in an elastic deformation of the view.
|
||||
|
||||
```swift
|
||||
static var skid: AnyTransition
|
||||
```
|
||||
|
||||
A transition that moves the view in from the specified edge during
|
||||
insertion and towards it during removal with any overshoot resulting
|
||||
in an elastic deformation of the view.
|
||||
|
||||
- Parameter `direction`: The direction of the transition.
|
||||
|
||||
```swift
|
||||
static func skid(direction: SkidDirection) -> AnyTransition
|
||||
```
|
||||
|
||||
## Swoosh
|
||||
|
||||
A three-dimensional transition from the back of the towards the front
|
||||
during insertion and from the front towards the back during removal.
|
||||
|
||||
```swift
|
||||
static var swoosh: AnyTransition
|
||||
```
|
||||
|
||||
## Vanish
|
||||
|
||||

|
||||
|
||||
A transition that dissolves the view into many small particles.
|
||||
|
||||
The transition is only performed on removal.
|
||||
|
||||
```swift
|
||||
static var vanish: AnyTransition
|
||||
```
|
||||
|
||||
## Wipe
|
||||
|
||||
A transition using a sweep from the specified edge on insertion, and
|
||||
towards it on removal.
|
||||
|
||||
- Parameters:
|
||||
- `edge`: The edge at which the sweep starts or ends.
|
||||
- `blurRadius`: The radius of the blur applied to the mask.
|
||||
|
||||
```swift
|
||||
static func wipe(edge: Edge, blurRadius: CGFloat = 0) -> AnyTransition
|
||||
```
|
||||
BIN
previews/anvil.mov
Normal file
BIN
previews/anvil.mov
Normal file
Binary file not shown.
BIN
previews/boing.mov
Normal file
BIN
previews/boing.mov
Normal file
Binary file not shown.
BIN
previews/flip.mov
Normal file
BIN
previews/flip.mov
Normal file
Binary file not shown.
BIN
previews/glare.mov
Normal file
BIN
previews/glare.mov
Normal file
Binary file not shown.
BIN
previews/og-image.png
Normal file
BIN
previews/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
previews/pop.mov
Normal file
BIN
previews/pop.mov
Normal file
Binary file not shown.
BIN
previews/rotate3d.mov
Normal file
BIN
previews/rotate3d.mov
Normal file
Binary file not shown.
BIN
previews/skid.mov
Normal file
BIN
previews/skid.mov
Normal file
Binary file not shown.
BIN
previews/vanish.mov
Normal file
BIN
previews/vanish.mov
Normal file
Binary file not shown.
Loading…
Reference in a new issue