[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7110":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":15,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":31,"discoverSource":32},7110,"fluid-interfaces","nathangitter\u002Ffluid-interfaces","nathangitter","Natural gestures and animations inspired by Apple's WWDC18 talk \"Designing Fluid Interfaces\"","",null,"Swift",2590,145,48,2,0,58.69,"Apache License 2.0",false,"master",[22,23,24,25,26,27],"animation","fluid","gesture","interfaces","spring-animation","swift","2026-06-12 04:00:32","\u003Cp align=\"center\">\u003Cimg src=\"Resources\u002Frepo-banner.png\" alt=\"Fluid Interfaces Title Graphic\">\u003C\u002Fp>\n\n### Check out the accompanying blog post for more details: [Building Fluid Interfaces](https:\u002F\u002Fmedium.com\u002F@nathangitter\u002Fbuilding-fluid-interfaces-ios-swift-9732bb934bf5)\n\n⭐️ If you found this repo helpful, please star it. Thanks! ⭐️\n\n### Background\n\nAt 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](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F))\n\nIt 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.\n\nThe goal with this project is to bridge the gap between inspiration and implementation.\n\n### Installation\n\nDownload or clone the repo and open the `FluidInterfaces.xcodeproj` file with Xcode.\n\n### Interfaces\n\n[Calculator Button](#calculator-button)\n\n[Spring Animations](#spring-animations)\n\n[Flashlight Button](#flashlight-button)\n\n[Rubberbanding](#rubberbanding)\n\n[Acceleration Pausing](#acceleration-pausing)\n\n[Rewarding Momentum](#rewarding-momentum)\n\n[FaceTime PiP](#facetime-pip)\n\n[Rotation](#rotation)\n\n## Calculator Button\n\nA button that mimics the behavior of buttons in the iOS Calculator app.\n\n\u003Cimg src=\"Resources\u002Fcalcdemo.gif\" alt=\"Calculator Button Demo\">\n\n[⚙️ CalculatorButton.swift](FluidInterfaces\u002FFluidInterfaces\u002FCalculatorButton.swift)\n\n[📺 Designing Fluid Interfaces 50:13](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=3013)\n\n## Spring Animations\n\nA demo showing the ability to define a spring animation with \"design-friendly\" parameters.\n\n\u003Cimg src=\"Resources\u002Fspringdemo.gif\" alt=\"Spring Demo\">\n\n[⚙️ Spring.swift](FluidInterfaces\u002FFluidInterfaces\u002FSpring.swift)\n\n[📺 Designing Fluid Interfaces 31:40](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=1900)\n\n## Flashlight Button\n\nA button that mimics the behavior of the flashlight button on the lockscreen of iPhone X.\n\n\u003Cimg src=\"Resources\u002Fflashdemo.gif\" alt=\"Flashlight Button Demo\">\n\n[⚙️ FlashlightButton.swift](FluidInterfaces\u002FFluidInterfaces\u002FFlashlightButton.swift)\n\n[📺 Designing Fluid Interfaces 37:59](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=2279)\n\n## Rubberbanding\n\nA demo showing how to implement rubberbanding.\n\n\u003Cimg src=\"Resources\u002Frubberdemo.gif\" alt=\"Rubberbanding Demo\">\n\n[⚙️ Rubberbanding.swift](FluidInterfaces\u002FFluidInterfaces\u002FRubberbanding.swift)\n\n[📺 Designing Fluid Interfaces 17:01](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=1021)\n\n## Acceleration Pausing\n\nA demo of using a gesture's acceleration to quickly detect when the user's motion has paused.\n\n\u003Cimg src=\"Resources\u002Faccelerationdemo.gif\" alt=\"Acceleration Pausing Demo\">\n\n[⚙️ Acceleration.swift](FluidInterfaces\u002FFluidInterfaces\u002FAcceleration.swift)\n\n[📺 Designing Fluid Interfaces 10:40](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=640)\n\n## Rewarding Momentum\n\nA drawer with an open and closed state which has bounciness dependent on the velocity of the gesture.\n\n\u003Cimg src=\"Resources\u002Fmomentumdemo.gif\" alt=\"Rewarding Momentum Demo\">\n\n[⚙️ Momentum.swift](FluidInterfaces\u002FFluidInterfaces\u002FMomentum.swift)\n\n[📺 Designing Fluid Interfaces 36:48](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=2208)\n\n## FaceTime PiP\n\nA re-creation of the picture-in-picture UI of the iOS FaceTime app.\n\n\u003Cimg src=\"Resources\u002Fpipdemo.gif\" alt=\"FaceTime PiP Demo\">\n\n[⚙️ Pip.swift](FluidInterfaces\u002FFluidInterfaces\u002FPip.swift)\n\n[📺 Designing Fluid Interfaces 41:56](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=2516)\n\n## Rotation\n\nA demo showing how the concepts from the PiP interface can apply to other animations.\n\n\u003Cimg src=\"Resources\u002Frotationdemo.gif\" alt=\"Rotation Demo\">\n\n[⚙️ Rotation.swift](FluidInterfaces\u002FFluidInterfaces\u002FRotation.swift)\n\n[📺 Designing Fluid Interfaces 47:25](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2018\u002F803\u002F?time=2845)\n\n## Author\nYou can find me on Twitter [@nathangitter](https:\u002F\u002Ftwitter.com\u002Fnathangitter)\n\n## Contributing\nFeel 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!\n\n## License & Copyright\n© 2018 Nathan Gitter, licensed under Apache-2.0. See LICENSE for more information.\n","该项目旨在实现Apple WWDC18演讲“设计流畅界面”中所介绍的自然手势和动画。核心功能包括模仿iOS计算器应用按钮行为、弹簧动画、手电筒按钮效果及橡皮筋效果等，通过Swift语言编写，为开发者提供了丰富的UI交互示例。特别适合于希望提升iOS应用用户体验、增加界面生动性和响应性的场景下使用。项目采用Apache License 2.0许可协议发布，鼓励社区贡献与学习。","2026-06-11 03:10:35","top_language"]