Swiftpack.co - Package - gaebel/MotionEffect

SwiftUIMotionEffect

Ties the device's gyroscope to a SwiftUI view and makes it adapt to the phone's movement – adds depth to views and makes them more noticable. It's implemented using CoreMotion's UIMotionEffect and bridged to SwiftUI.

It comes with pre implemented motion effects like shift (parallax) and tilt, but also provides the abillity to write your own custom effects.

Installing

You can add this library as a dependency using

  • Swift Package Manager (https://github.com/gaebel/SwiftUIMotionEffect), or
  • by copying the source code into your project.

Usage

To access the methods in your SwiftUI view import the library.

import MotionEffect

Then call the motion function on your view and you're good to go.

You can define the axis of the effect (.horizontal, .vertical, .both) and the amount (more about this in the effects section).

.motion(effect: .shift, amount: 15, axis: .both)

You can add custom effects by creating an object that conforms to MotionEffectable.

.motion(effect: CustomEffect.self, amount: 45, axis: .both)

In some cases you want to reset the origin of the coordinate system. You can do this by binding a variable to the effect, and changing the state using a button.

iOS 14

The state automatically changes to false after the layout updated, so that you can reset the effect through every button press. It's using .onChange under the hood.

iOS 13

.onChange is not available in iOS 13. You have to take care that the state gets set to false. Otherwise your button will fire just once.

struct ContentView: View {
    @State var needsReset: Bool = false

    var body: some View {
        VStack {
            Text("Hello world")
                .frame(width: 200, height: 100)
                .background(Color.blue)
                .cornerRadius(20)
                .shadow(radius: 10)
                .motion(effect: .tilt, amount: 45, axis: .both, needsReset: $needsReset)
            Button("Reset", action: {
                needsReset = true
            })
        }
    }
}

Effects

Currently there are only two effects but you're free to implement your own.

Tilt

Tilts the view based on the phones movement.

The parameter amount defines the tilt angle.

Shift (Parallax)

Shifts the view based on the phones movement. You can achieve a parallax effect, e.g. by using this on a blurred view under a button, or an image in a masked container.

The parameter amount defines the distance of the shift.

Custom

You can create custom effects using an object that conform to MotionEffectable.

struct ShiftMotionEffect: MotionEffectable {
    static func makeEffect(axis: MotionAxis, amount: CGFloat) -> UIInterpolatingMotionEffect {
        let effect = UIInterpolatingMotionEffect(
            keyPath: axis == .vertical ? "center.y" : "center.x",
            type: axis == .vertical ? .tiltAlongVerticalAxis : .tiltAlongHorizontalAxis
        )

        effect.minimumRelativeValue = -amount
        effect.maximumRelativeValue = amount

        return effect
    }
}

Attribution

SwiftUIMotionEffect was inspired by Christian's ParallaxSwiftUI with the goal to make it extensible and provide the abillity to reset the origin of the effect's coordinate system.

License

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

Github

link
Stars: 3

Dependencies

Used By

Total: 0

Releases

1.0.0 - 2020-10-04 17:35:56

  • Initial release