Natural gestures and animations inspired by Apple's WWDC18 talk "Designing Fluid Interfaces"
Switch branches/tags
Nothing to show
Clone or download
nathangitter Merge pull request #5 from sgl0v/swift_4.1.2
Added extensions to remove the need for a separate Xcode 9 branch.
Latest commit da5c66c Aug 19, 2018
Permalink
Failed to load latest commit information.
FluidInterfaces Swift 4.1.2 support. Aug 19, 2018
Resources updated banner image Jul 27, 2018
.gitignore Initial commit Jul 8, 2018
LICENSE Added LICENSE file Aug 11, 2018
README.md Swift 4.1.2 support. Aug 19, 2018

README.md

Fluid Interfaces Title Graphic

Check out the accompanying blog post for more details: Building Fluid Interfaces

⭐️ If you found this repo helpful, please star it. Thanks! ⭐️

Background

At WWDC 2018, Apple designers gave a talk titled "Designing Fluid Interfaces", explaining the design theory behind the gesture-based interface of iPhone X. (The presentation is available here: Designing Fluid Interfaces)

It was an outstanding talk, inspiring designers and developers to think about animated interfaces in a new way. While some technical guidance was provided, most code-level implementation details were ommitted.

The goal with this project is to bridge the gap between inspiration and implementation.

Installation

Download or clone the repo and open the FluidInterfaces.xcodeproj file with Xcode.

Interfaces

Calculator Button

Spring Animations

Flashlight Button

Rubberbanding

Acceleration Pausing

Rewarding Momentum

FaceTime PiP

Rotation

Calculator Button

A button that mimics the behavior of buttons in the iOS Calculator app.

Calculator Button Demo

⚙️ CalculatorButton.swift

📺 Designing Fluid Interfaces 50:13

Spring Animations

A demo showing the ability to define a spring animation with "design-friendly" parameters.

Spring Demo

⚙️ Spring.swift

📺 Designing Fluid Interfaces 31:40

Flashlight Button

A button that mimics the behavior of the flashlight button on the lockscreen of iPhone X.

Flashlight Button Demo

⚙️ FlashlightButton.swift

📺 Designing Fluid Interfaces 37:59

Rubberbanding

A demo showing how to implement rubberbanding.

Rubberbanding Demo

⚙️ Rubberbanding.swift

📺 Designing Fluid Interfaces 17:01

Acceleration Pausing

A demo of using a gesture's acceleration to quickly detect when the user's motion has paused.

Acceleration Pausing Demo

⚙️ Acceleration.swift

📺 Designing Fluid Interfaces 10:40

Rewarding Momentum

A drawer with an open and closed state which has bounciness dependent on the velocity of the gesture.

Rewarding Momentum Demo

⚙️ Momentum.swift

📺 Designing Fluid Interfaces 36:48

FaceTime PiP

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

FaceTime PiP Demo

⚙️ Pip.swift

📺 Designing Fluid Interfaces 41:56

Rotation

A demo showing how the concepts from the PiP interface can apply to other animations.

Rotation Demo

⚙️ Rotation.swift

📺 Designing Fluid Interfaces 47:25

Author

You can find me on Twitter @nathangitter

Contributing

Feel free to add issues or pull requests here on GitHub. I cannot guarantee that I will accept your changes, but feel free to fork the repo and make changes as you see fit. Thanks!

License & Copyright

© 2018 Nathan Gitter, licensed under Apache-2.0. See LICENSE for more information.