In the early 2000's, with a little bit of CSS and JQuery we had a technique known as the yellow fade technique (YFT). This UI technique was a nice way of spotlighting what has changed on a webpage when editing or updating a page. It was popularized by 37 signals.
I made a swift package that allows you to do something similar but it's called HighlightFade, part of SwiftUI and requires no javascript or npm packages. The implementation details are straight forward.
HighlightFade-video-snippet.mp4
The Swift Package Manager is the preferred tool
From Xcode 12+ :
- Select File > Swift Packages > Add Package Dependency.
- Enter
https://github.com/alenm/HighlightFade
in the "Choose Package Repository" dialog. - In the next page, specify the version resolving rule as "Up to Next Major" from "1.0.0".
- After Xcode checked out the source and resolving the version, you can choose the "HighlightFade" library and add it to your app target.
For more info, read Adding Package Dependencies to Your App from Apple.
Use it as a view modifier as shown below. The only parameter to be concerned with is isActive:Bool
. See the example below.
import HighlightFade
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.modifier(HighlightFade(isActive: true))
}
}
The view modifer has also been made as an extension on the view. This means you can use .highlightFade(isActive:)
as shown below.
import HighlightFade
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.highlightFade(isActive: true)
}
}
// or
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.highlightFade {
return true
}
}
}
The modifier does offer some customization such as changing the color, opacity of the color and the animation duration of the opacity.
/// The default color for this is .yellow
public var color: Color
/// The fading out animation is by default 4 seconds long
public var duration: Seconds
/// The colors opacity is started at 0.4
public var startOpacity: Double
/// The color opacity will end at 0.0
public var endOpacity: Double
An example of using the customization could look like this.
import HighlightFade
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.modifier(HighlightFade(color: .blue, duration: 3, startOpacity: 1.0, endOpacity: 0.2, isActive: true))
}
}
// OR using the extension view
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.highlightFade(color: .blue, duration: 3, startOpacity: 1.0, endOpacity: 0.2, isActive: true)
}
}
HighlightFade is released under the MIT license. See LICENSE for details.