https://github.com/lucasbrown/swiftui-visual-effects

View modifiers that wrap UIVisualEffectView, with environment integration.
https://github.com/lucasbrown/swiftui-visual-effects

apple ios swift swift-library swift-package swiftui uikit

Last synced: about 1 month ago
JSON representation

View modifiers that wrap UIVisualEffectView, with environment integration.

• Host: GitHub
• URL: https://github.com/lucasbrown/swiftui-visual-effects
• Owner: lucasbrown
• License: mit
• Created: 2020-05-26T23:10:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-09T16:25:34.000Z (over 4 years ago)
• Last Synced: 2024-08-03T18:11:29.626Z (5 months ago)
• Topics: apple, ios, swift, swift-library, swift-package, swiftui, uikit
• Language: Swift
• Homepage:
• Size: 28.3 KB
• Stars: 289
• Watchers: 8
• Forks: 14
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-swiftui-libraries - SwiftUIVisualEffects - View modifiers that wrap UIVisualEffectView, with environment integration. (Blur / Content)

README

        
# SwiftUI Visual Effects



  

  

  


  System materials in SwiftUI



View modifiers that wrap `UIVisualEffectView` and all of its associated objects, with environment integration for storing effect styles. Vibrancy effects will always use the current blur effect style for proper vibrancy-effect layering.

### Adding and Styling a Blur Effect

```swift

YourView()

  // Add a blur effect.

  .blurEffect()

  // Style the blur effect.

  .blurEffectStyle(.systemChromeMaterial)

```

### Adding and Styling a Vibrancy Effect

```swift

YourView()

  // Add a vibrancy effect.

  .vibrancyEffect()

  // Style the vibrancy effect.

  .vibrancyEffectStyle(.fill)

```

### Adding and Styling Blur and Vibrancy Effects

```swift

ZStack {

  YourBackgroundContent()

    // Add a blur effect.

    .blurEffect()

  YourForegroundContent()

    // Add a vibrancy effect.

    .vibrancyEffect()

}

// Set the style for blur effects within this view.

.blurEffectStyle(.systemChromeMaterial)

// Set the style for vibrancy effects within this view.

.vibrancyEffectStyle(.fill)

```

## Adding Blur and Vibrancy Effects Directly to a View

Adding both a blur and vibrancy effect directly to a view only displays the blur effect.

If you’d like to blur the view’s background content, while adding vibrancy to the view’s foreground content, use the `.background()` modifier, and pass `BlurEffect()` as its argument. Although `BlurEffect` may not be very Apple-like, it’s better than the `.blurEffect()` modifier implementation below.

```swift

YourView()

  .vibrancyEffect()

  .background(BlurEffect())

// as opposed to:

YourView()

  .vibrancyEffect()

  .background(

    Color.clear

      .blurEffect()

  )

```