SwiftUI sample code for Apple's WWDC18 talk "Designing Fluid Interfaces".
Fluid Interfaces is a new concept in iOS development. It is a way to design interfaces that are fluid and responsive. By reading @nathangitter's awsome articles I got a better understanding of Fluid Interfaces, but what he build is written in UIKit. I decided to build Fluid Interfaces in SwiftUI. Most of code in this repository is inspired by nathangitter/fluid-interfaces.
Download or clone the repository and open the FluidInterfacesSwiftUI.xcodeproj file with Xcode.
A iOS calculator app like button.
- Highlights instantly on touch.
- Can be tapped rapidly even when mid-animation.
- User can touch down and drag outside of the button to cancel the tap.
- User can touch down, drag outside, drag back in, and confirm the tap.
In UIKit you can use touchDown, touchDragEnter or some other useful UIControl.Event, in SwiftUI you needs to customize these gestures.
But very lucky, the default gesture of Button in SwiftUI looks match the features we want, all we need is a customized ButtonStyle.
A simple spring animation demo.
- Uses SwiftUI
spring()animation. - No concept of animation duration in single
spring(). - Easily interruptible.
A persistent spring animation. When mixed with other spring() or interactiveSpring() animations on the same property, each animation will be replaced by their successor, preserving velocity from one animation to the next. Optionally blends the response values between springs over a time period.
- SOLVED/ Instantly reset state of animation.
- swiftui - Spring Animation/ What does the blendDuration parameter do?
A iOS like flashlight button.
- Requires an intentional gesture with
LongPressGesture, see more. - Bounciness hints at the required gesture.
- Haptic feedback confirms activation.
The origin version calls 3D Touch which has been deprecated, in this version it will replaced by LongPressGesture and DragGesture.
Rubberbanding occurs when a view resists movement. An example is when a scrolling view reaches the end of its content.
- Interface is always responsive, even when an action is invalid.
- De-synced touch tracking indicates a boundary.
- Amount of motion lessens further from the boundary.
To view the app switcher on iPhone X, the user swipes up from the bottom of the screen and pauses midway. This interface re-creates this behavior.
- Pause is calculated based on the gesture’s acceleration.
- Faster stopping results in a faster response.
- No timers.
- Calculate velocity of DragGesture
- Gesture Deceleration - Gesture Recognizers in IOS 12, Xcode 10, and Swift 4.2
- SwiftUI Drag Gesture Tutorial
A drawer with open and closed states that has bounciness based on the velocity of the gesture.
- Tapping the drawer opens it without bounciness.
- Flicking the drawer opens it with bounciness.
- Interactive, interruptible, and reversible.
A re-creation of the picture-in-picture UI of the iOS FaceTime app.
- Light weight, airy interaction.
- Continuous animation that respects the gesture’s initial velocity.
- Frad Lee - Initial work - @FradSer
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE file for details