SwiftUI sample code for Apple's WWDC18 talk "Designing Fluid Interfaces".

Last update: Apr 11, 2022

Fluid Interfaces SwiftUI

Twitter Follow

SwiftUI sample code for Apple's WWDC18 talk "Designing Fluid Interfaces".

What is 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.

Installation

Download or clone the repository and open the FluidInterfacesSwiftUI.xcodeproj file with Xcode.

Interfaces

CalculatorButtonView

A iOS calculator app like button.

  1. Highlights instantly on touch.
  2. Can be tapped rapidly even when mid-animation.
  3. User can touch down and drag outside of the button to cancel the tap.
  4. User can touch down, drag outside, drag back in, and confirm the tap.

Notes

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.

References

SpringAnimationsView

A simple spring animation demo.

  1. Uses SwiftUI spring() animation.
  2. No concept of animation duration in single spring().
  3. Easily interruptible.

Notes

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.

References

FlashlightButtonView

A iOS like flashlight button.

  1. Requires an intentional gesture with LongPressGesture, see more.
  2. Bounciness hints at the required gesture.
  3. Haptic feedback confirms activation.

Notes

The origin version calls 3D Touch which has been deprecated, in this version it will replaced by LongPressGesture and DragGesture.

References

RubberbandingView

Rubberbanding occurs when a view resists movement. An example is when a scrolling view reaches the end of its content.

  1. Interface is always responsive, even when an action is invalid.
  2. De-synced touch tracking indicates a boundary.
  3. Amount of motion lessens further from the boundary.

AccelerationPausingView

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.

  1. Pause is calculated based on the gesture’s acceleration.
  2. Faster stopping results in a faster response.
  3. No timers.

References

RewardingMomentumView

A drawer with open and closed states that has bounciness based on the velocity of the gesture.

  1. Tapping the drawer opens it without bounciness.
  2. Flicking the drawer opens it with bounciness.
  3. Interactive, interruptible, and reversible.

FaceTimePiPView

A re-creation of the picture-in-picture UI of the iOS FaceTime app.

  1. Light weight, airy interaction.
  2. Continuous animation that respects the gesture’s initial velocity.

The Final

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details

GitHub

https://github.com/FradSer/FluidInterfacesSwiftUI
You might also like...

This is a sample app to create a photo selection classifier using CreateML on an iOS Device.

This is a sample app to create a photo selection classifier using CreateML on an iOS Device.

PhotoSelectionClassifier This is a sample app to create a photo selection classifier using CreateML on an iOS Device. Demo In the demo video below, we

Feb 17, 2022

MVP-Clean sample iOS Swift project

MVP-Clean sample iOS Swift project

RestaurantsApp MVP-Clean sample iOS Swift project The purpose of this document is to explain the architecture of application. This application shows r

May 1, 2022

A sample project how to use YOLOv5 in iOS

A sample project how to use YOLOv5 in iOS

CoreML-YOLOv5 A sample project how to use YOLOv5 in iOS. You can run model on yo

May 10, 2022

Ios-exercise - In this exercise applicant should implement a new feature into an existing sample app

Cooking app In this exercise applicant should implement a new feature into an ex

Feb 7, 2022

This repository contains code for building Universal Apps with SwiftUI.

MindLikeWater This Repo This repository contains code for building Universal Apps with SwiftUI. The same codebase can be compiled to produce binaries

Nov 23, 2021

The demo project to show how to organize code to make SwiftUI apps easy to be test.

The demo project to show how to organize code to make SwiftUI apps easy to be test.

TestableApp I combined the idea to use functional programming instead of an loader instance in ModelView(I prefer to think of it as a service) and Res

Jan 7, 2022

Companion app and XCode extension for adding SwiftUI recipes to your code.

Companion app and XCode extension for adding SwiftUI recipes to your code.

SwiftUI Recipes Companion Free Companion app and XCode extension for adding SwiftUI recipes to your code. Choose from a rich selection of SwiftUI reci

May 7, 2022

Glow Weather app source code

Glow Weather app source code

Glow-Weather Weather & air quality application created with a glow theme. This weather app uses APIs from weatherapi.com, and allows users to search t

Nov 30, 2021

Source code for the BiometricsAuthenticationApp

Source code for the BiometricsAuthenticationApp

Feb 9, 2022
A very simple To Do app to illustrate the principles from my A Better MVC talk

MVC Todo For more background on this repository, please consider reading these blog posts: https://davedelong.com/blog/tags/a-better-mvc/ What this sa

Apr 27, 2022
Watch WWDC and Tech Talk Videos on your Apple TV, tvOS App.
Watch WWDC and Tech Talk Videos on your Apple TV, tvOS App.

WWDCTV This project allows you to watch WWDC & Tech Talks videos on your Apple TV. It has been built for tvOS 9.0 using Xcode 7.1 You can also favouri

Apr 15, 2022
SwiftUI-MSALSample - Sample project to login with MSAL using SwiftUI
SwiftUI-MSALSample - Sample project to login with MSAL using SwiftUI

SwiftUI-MSALSample I could not find a good walkthrough on how to implement MSAL

Apr 22, 2022
SwiftUI sample app using Clean Architecture. Examples of working with CoreData persistence, networking, dependency injection, unit testing, and more.
SwiftUI sample app using Clean Architecture. Examples of working with CoreData persistence, networking, dependency injection, unit testing, and more.

Articles related to this project Clean Architecture for SwiftUI Programmatic navigation in SwiftUI project Separation of Concerns in Software Design C

May 15, 2022
Sample iOS project built by SwiftUI + Flux and Combine framework using GitHub API
Sample iOS project built by SwiftUI + Flux and Combine framework using GitHub API

SwiftUI-Flux Flux enables us to have unidirectional data flow and make it testable. It's used to be implemented using RxSwift or ReactiveSwift in the

Apr 17, 2022
Sample iOS project built by SwiftUI + MVVM and Combine framework using GitHub API
Sample iOS project built by SwiftUI + MVVM and Combine framework using GitHub API

SwiftUI-MVVM One of the biggest idea for having MVVM is that most of data flow can be testable. Data binding in view layer by SwiftUI is awesome. Howe

May 10, 2022
A sample SwiftUI weather app using Lasso.
A sample SwiftUI weather app using Lasso.

Lasso+SwiftUI Example Weather App Overview This is a sample iOS app that demonstrates using Lasso and SwiftUI together. Feature Overview Home Screen D

Mar 19, 2022
WeatherSampleApp - Weather Sample app with SwiftUI consuming data from OpenWeather and using CoreLocation
WeatherSampleApp - Weather Sample app with SwiftUI consuming data from OpenWeather and using CoreLocation

WeatherSampleApp Weather application using SwiftUI Uses data provided by https:/

Jan 14, 2022
Advent Of Code (AoC) 2021Advent Of Code (AoC) 2021

AoC-2021 Advent Of Code (AoC) 2021 This are my solutions to the Advent Of Code 2021 event. This year I've been playing along with timsearle and SFrost

Dec 16, 2021
Tutorial GraphQL + Node Express + MySQL, and sample for Android / iOS client

GraphQL-tutorial Tutorial for GraphQL + Node Express + MySQL, and sample for Android / iOS client Blog NeoRoman's GraphQL-tutorial (Korean) Materials

Aug 2, 2021