From e1a732095d2cc38bfba8b88bc3e322510526eb77 Mon Sep 17 00:00:00 2001 From: Kasper Lahti Date: Fri, 21 Apr 2023 09:40:23 +0200 Subject: [PATCH] Update README.md --- README.md | 199 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 176 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 0729abe..c7d6be5 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Button { .tint(post.isLiked ? .red : .gray) ``` -You can choose from the following Change Effects: [Spray](#spray), [Haptic Feedback](#haptic-feedback), [Jump](#jump), [Ping](#ping), [Rise](#rise), [Shake](#shake), [Shine](#shine), and [Spin](#spin). +You can choose from the following Change Effects: [Spray](#spray), [Glow](#glow), [Haptic Feedback](#haptic-feedback), [Jump](#jump), [Pulse](#pulse), [Rise](#rise), [Shake](#shake), [Shine](#shine), [Spin](#spin), and [Wiggle](#wiggle). ### Spray @@ -64,6 +64,35 @@ likeButton static func spray(origin: UnitPoint = .center, layer: ParticleLayer = .local, @ViewBuilder _ particles: () -> some View) -> AnyChangeEffect ``` +### Glow + +[Preview](https://movingparts.io/pow/#glow) + +An effect that highlights the view with a glow around it. + +The glow appears for a second. + +```swift +Text(price, format: .currency(code: "USD") + .changeEffect(.glow, value: price) +``` + +```swift +static var glow: AnyConditionalEffect +``` + +An effect that highlights the view with a glow around it. + +The glow appears for a second. + +- Parameters: + - `color`: The color of the glow. + - `radius`: The radius of the glow. + +```swift +static func glow(color: Color, radius: CGFloat = 16) -> AnyChangeEffect +``` + ### Haptic Feedback Triggers haptic feedback to communicate successes, failures, and warnings whenever a value changes. @@ -100,31 +129,21 @@ Makes the view jump the given height and then bounces a few times before settlin static func jump(height: CGFloat) -> AnyChangeEffect ``` -### Ping +### Pulse [Preview](https://movingparts.io/pow/#ping) -Adds one or more shapes that slowly grow and fade-out behind the view. - -The shape will be colored by the current tint style. +An effect that adds one or more shapes that slowly grow and fade-out behind the view. - Parameters: - `shape`: The shape to use for the effect. - - `count`: The number of shapes to emit. + - `style`: The shape style to use for the effect. Defaults to `tint`. + - `drawingMode`: The mode used to render the shape. Defaults to `fill`. + - `count`: The number of shapes to emit. Defaults to `1`. + - `layer`: The `ParticleLayer` on which to render the effect. Defaults to `local`. ```swift - static func ping(shape: some InsettableShape, count: Int) -> AnyChangeEffect -``` - - An effect that adds one or more shapes that slowly grow and fade-out behind the view. - - - Parameters: - - `shape`: The shape to use for the effect. - - `style`: The style to use for the effect. - - `count`: The number of shapes to emit. - -```swift -static func ping(shape: some InsettableShape, style: some ShapeStyle, count: Int) -> AnyChangeEffect +static func pulse(shape: some InsettableShape, style: some ShapeStyle = .tint, drawingMode: PulseDrawingMode = .fill, count: Int = 1, layer: ParticleLayer = .local) -> AnyChangeEffect ``` ### Rise @@ -219,13 +238,32 @@ static var spin: AnyChangeEffect Spins the view around the given axis when a change happens. - Parameters: - - 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 / 6 for this rotation. + - `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 / 6 for this rotation. + - `rate`: The rate of the spin. ```swift -static func spin(axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1 / 6) -> AnyChangeEffect +static func spin(axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1 / 6, rate: SpinRate = .default) -> AnyChangeEffect +``` + +### Wiggle + +[Preview](https://movingparts.io/pow/#wiggle) + +An effect that wiggles the view when a change happens. + +```swift +static var wiggle: AnyChangeEffect +``` + +An effect that wiggles the view when a change happens. + +- `rate`: The rate of the wiggle. + +```swift +static func wiggle(rate: WiggleRate) -> AnyChangeEffect ``` ### Delay @@ -248,6 +286,112 @@ Button("Submit") { func delay(_ delay: Double) -> AnyChangeEffect ``` +## Conditional Effects + +Conditional Effects are effects that can be enabled or disabled through a boolean flag. + +Use the `conditionalEffect` modifier and pass in an `AnyConditionalEffect` as well as a condition to enable the effect. + +```swift +Button { + playlist.writeToDisc() +} label: { + Label(playlist.isWritingToDisc ? "Burning…" : "Burn", systemName: "opticaldisc.fill") +} +.conditionalEffect(.smoke, condition: playlist.isWritingToDisc) +``` + +You can choose from the following Conditional Effects: [Smoke](#smoke), [Push Down](#push-down), and [Glow](#glow-1). + +Change Effects can be used with the [Repeat](#repeat) modifier. + +### Smoke + +[Preview](https://movingparts.io/pow/#smoke) + +An effect that emits smoke from the view. + +```swift +burnButton + .conditionalEffect(.smoke, condition: isOn) +``` + +```swift +static var smoke: AnyConditionalEffect +``` + +An effect that emits smoke from the view. + +- Parameters: + - `layer`: The `ParticleLayer` on which to render the effect, default is `local`. + +```swift +static func smoke(layer: ParticleLayer = .local) -> AnyConditionalEffect +``` + +### Push Down + +An effect that pushes down the view while a condition is true. + +```swift +submitButton + .conditionalEffect(.pushDown, condition: isPressed) +``` + +```swift +static var pushDown: AnyConditionalEffect +``` + +### Glow + +[Preview](https://movingparts.io/pow/#glow) + +An effect that highlights the view with a glow around it. + +```swift +continueButton + .conditionalEffect(.pushDown, condition: canContinue) +``` + +```swift +static var glow: AnyConditionalEffect +``` + +An effect that highlights the view with a glow around it. + +- Parameters: + - `color`: The color of the glow. + - `radius`: The radius of the glow. + +```swift +static func glow(color: Color, radius: CGFloat = 16) -> AnyConditionalEffect +``` + +### Repeat + +Repeats a change effect at the specified interval while a condition is true. + +```swift +notificationsTabView + .conditionalEffect(.repeat(.jump(height: 100), every: 2), condition: hasUnreadMessages) +``` + +- Parameters: + - `effect`: The change effect to repeat. + - `interval`: The duration between each change effect. + +```swift +static func `repeat`(_ effect: AnyChangeEffect, every interval: Duration) -> AnyConditionalEffect +``` + +- Parameters: + - `effect`: The change effect to repeat. + - `interval`: The number of seconds between each change effect. + +```swift +static func `repeat`(_ effect: AnyChangeEffect, every interval: TimeInterval) -> AnyConditionalEffect +``` + ## Particle Layer A particle layer is a context in which particle effects draw their particles. @@ -314,6 +458,15 @@ on removal. static var blur: AnyTransition ``` +A transition from blurry to sharp on insertion, and from sharp to blurry +on removal. + +- Parameter `radius`: The radial size of the blur at the end of the transition. + +```swift +static func blur(radius: CGFloat) -> AnyTransition +``` + ### Boing [Preview](https://movingparts.io/pow/#boing)