Swiftpack.co - movingparts-io/Pow as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by movingparts-io.
movingparts-io/Pow v0.1.1
Delightful SwiftUI effects for your app
⭐️ 864
🕓 6 weeks ago
iOS
.package(url: "https://github.com/movingparts-io/Pow.git", from: "v0.1.1")

Pow

Delightful SwiftUI effects for your app.

Note Pow is free to test and evaluate. To deploy an app using it to the App Store, you need to purchase a license.

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).

Overview

Pow features a selection of SwiftUI transitions as well as Change Effects that trigger every time a value is updated.

You can find previews of all effects on the Pow website. If you have an iOS Developer Environment, you can check out the Pow Example App.

Change Effects

Change Effects are effects that will trigger a visual or haptic every time a value changes.

Use the changeEffect modifier and pass in an AnyChangeEffect as well as a value to watch for changes.

Button {
    post.toggleLike()
} label: {
    Label(post.likes.formatted(), systemName: "heart.fill")
}
.changeEffect(.spray { heart }, value: post.likes, isEnabled: post.isLiked)
.tint(post.isLiked ? .red : .gray)

You can choose from the following Change Effects: Spray, Haptic Feedback, Jump, Ping, Rise, Shake, Shine, and Spin.

Spray

Preview

An effect that emits multiple particles in different shades and sizes moving up from the origin point.

likeButton
  .changeEffect(
    .spray(origin: .center) { Image(systemName: "heart.fill") },
    value: likes
  )
  • Parameters:
    • origin: The origin of the particles.
    • particles: The particles to emit.
static func spray(origin: UnitPoint = .center, @ViewBuilder _ particles: () -> some View) -> AnyChangeEffect

Haptic Feedback

Triggers the given haptic feedback type whenever a value changes.

  • feedback: The feedback type beiged triggered.
static func hapticFeedback(_ feedback: UINotificationFeedbackGenerator.FeedbackType) -> AnyChangeEffect

Jump

Preview

Makes the view jump the given height and then bounces a few times before settling.

  • height: The height of the jump.
static func jump(height: CGFloat) -> AnyChangeEffect

Ping

Preview

Adds one or more shapes that slowly grow and fade-out behind the view.

The shape will be colored by the current tint style.

  • Parameters:
    • shape: The shape to use for the effect.
    • count: The number of shapes to emit.
  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.
static func ping(shape: some InsettableShape, style: some ShapeStyle, count: Int) -> AnyChangeEffect

Rise

Preview

An effect that emits the provided particles from the origin point and slowly float up while moving side to side.

  • Parameters:
    • origin: The origin of the particle.
    • particles: The particles to emit.
static func rise(origin: UnitPoint = .center, @ViewBuilder _ particles: () -> some View) -> AnyChangeEffect

Shake

Preview

Shakes the view when a change happens.

static var shake: AnyChangeEffect

An effect that shakes the view when a change happens.

  • rate: The rate of the shake.
static func shake(rate: ShakeRate) -> AnyChangeEffect

Shine

Preview

Highlights the view with a shine moving over the view.

The shine moves from the top leading edge to bottom trailing edge.

static var shine: AnyChangeEffect

Highlights the view with a shine moving over the view.

The shine moves from the top leading edge to bottom trailing edge.

static func shine(duration: Double) -> AnyChangeEffect

Highlights the view with a shine moving over the view.

The angle is relative to the current layoutDirection, such that 0° represents sweeping towards the trailing edge and 90° represents sweeping towards the top edge.

  • Parameters:
    • angle: The angle of the animation.
    • duration: The duration of the animation.
static func shine(angle: Angle, duration: Double = 1.0) -> AnyChangeEffect

Spin

Preview

Spins the view around the given axis when a change happens.

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.
static func spin(axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1 / 6) -> AnyChangeEffect

Transitions

All transitions are namespaced under the movingParts static variable, e.g.

myView.transition(.movingParts.anvil)

Anvil

Preview

A transition that drops the view down from the top with matching haptic feedback.

The transition is only performed on insertion and takes 1.4 seconds.

static var anvil: AnyTransition

Blinds

Preview

A transition that reveals the view as if it was behind window blinds.

static var blinds: AnyTransition

A transition that reveals the view as if it was behind window blinds.

Parameters:

  • slatWidth: The width of each slat.
  • style: The style of blinds, either .venetian or .vertical.
  • isStaggered: Whether all slats opens at the same time or in sequence.
static func blinds(slatWidth: CGFloat, style: BlindsStyle = .venetian, isStaggered: Bool = false) -> AnyTransition

Blur

Preview

A transition from blurry to sharp on insertion, and from sharp to blurry on removal.

static var blur: AnyTransition

Boing

Preview

A transition that moves the view down with any overshoot resulting in an elastic deformation of the view.

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.

static func boing(edge: Edge) -> AnyTransition

Clock

Preview

A transition using a clockwise sweep around the centerpoint of the view.

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.
static func clock(blurRadius: CGFloat)  -> AnyTransition

Flicker

Preview

A transition that toggles the visibility of the view multiple times before settling.

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.
static func flicker(count: Int) -> AnyTransition

Film Exposure

Preview

A transition from completely dark to fully visible on insertion, and from fully visible to completely dark on removal.

static var filmExposure: AnyTransition

Flip

Preview

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.

static var flip: AnyTransition

Glare

Preview

A transitions that shows the view by combining a diagonal wipe with a white streak.

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.

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.
static func glare(angle: Angle, color: Color = .white) -> AnyTransition

Iris

Preview

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.
static func iris(origin: UnitPoint = .center, blurRadius: CGFloat = 0) -> AnyTransition

Move

Preview

A transition that moves the view from the specified edge of the on insertion and towards it on removal.

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.

Text("Hello")
  .transition(
    .asymmetric(
      insertion: .movingParts.move(angle: .degrees(45)),
      removal:   .movingParts.move(angle: .degrees(90))
    )
  )
  • Parameter angle: The direction of the animation.
static func move(angle: Angle) -> AnyTransition

Pop

Preview

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.

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:

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.
static func pop<S: ShapeStyle>(_ style: S) -> AnyTransition

Poof

Preview

A transition that removes the view in a dissolving cartoon style cloud.

The transition is only performed on removal and takes 0.4 seconds.

static var poof: 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:

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.
static func rotate3D(_ angle: Angle, axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1) -> AnyTransition

Snapshot

Preview

A transition from completely bright to fully visible on insertion, and from fully visible to completely bright on removal.

static var snapshot: AnyTransition

Skid

Preview

A transition that moves the view in from its leading edge with any overshoot resulting in an elastic deformation of the view.

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.
static func skid(direction: SkidDirection) -> AnyTransition

Swoosh

Preview

A three-dimensional transition from the back of the towards the front during insertion and from the front towards the back during removal.

static var swoosh: AnyTransition

Vanish

Preview

A transition that dissolves the view into many small particles.

The transition is only performed on removal.

Note: This transition will use an ease-out animation with a duration of 900ms if the current Animation is .default.

static var vanish: AnyTransition

A transition that dissolves the view into many small particles.

The transition is only performed on removal.

Note: This transition will use an ease-out animation with a duration of 900ms if the current Animation is .default.

  • Parameter style: The style to use for the particles.
static func vanish<S: ShapeStyle>(_ style: S) -> AnyTransition

A transition that dissolves the view into many small particles following a given shape.

The transition is only performed on removal.

Note: This transition will use an ease-out animation with a duration of 900ms if the current Animation is .default.

  • Parameter style: The style to use for the particles.
  • Parameter mask: The mask that determines where particles should be placed.
  • Parameter eoFill: A Boolean that indicates whether the shape is interpreted with the even-odd winding number rule.
static func vanish<T: ShapeStyle, S: Shape>(_ style: T, mask: S, eoFill: Bool = false) -> AnyTransition

Wipe

Preview

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.
static func wipe(edge: Edge, blurRadius: CGFloat = 0) -> AnyTransition

GitHub

link
Stars: 864
Last commit: Yesterday
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

0.1.1: A Shining Example
6 weeks ago
  • The .shine Change Effect now has optional angle and animation duration parameters. (#10)

If you're interested in using Pow in your app, you can now purchase a license on our site. :sparkles:

Thank you for your support!

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics