GithubHelp home page GithubHelp logo

playful-swiftui-examples's Introduction

playful-swiftui-examples

A growing collection of pretty SwiftUI code snippets to use in your projects based on code from my projects.

Most examples are focused on having a great UX and adding a little bit of fun for the user.

Feel free to star the repo and follow @fabiangruss on Twitter - many more examples to come :)


This button toggles between play and pause and is a squishy button that changes its shape when pressed. It uses a combination of animations and symbol effects to achieve a playful look.

previews_play_button.mov

Go to code


This button handles audio playback (provided as Data) and displays an animated waveform when music/voicenotes are playing. Works like this:

  • audio data is divided into chunks
  • each chunk's average amplitude is converted to decibels to create waveform bars
  • these are rendered in SwiftUI
Squishy_Waveform_Button.mp4

Go to code


This code snippet shows how to highlight the search term in a list of results. It builds a custom HStack with multiple text elements in which the search term is highlighted and contrasted against the rest of the text.

Highlighted search

Go to code


This code snippet shows how to build a custom pull to refresh and attach it to a scroll view. It replaces iOS' default ProgressView by your own view. This view receives the current pull down percentage from 0 to 1 to be used for custom interactions. Inspiration to this refresh view is based on kavsoft.dev

Custom_Pull_to_Refresh.mp4

Go to code


This code snippet shows an animation of a stack of notifications that I used in a notification permission priming screen. Add custom image/avatar paths to make the file runnable.

NotificationAnimation_Preview.mov

Go to code

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.