Danny Behar

@dbehar.com

iOS Dev 🧑🏻‍💻 | Musician 🎷 | Dog Dad 🐶 Building Tutti, a sheet music reader for iPad: https://apps.apple.com/us/app/sheet-music-reader-tutti/id6475010738 Baltimore, MD

struct BottomView: View {
@State private var isVisible = false
var body: some View {
VStack {
Button("Show / Hide") {
withAnimation(.bouncy) {
isVisible.toggle()
}
}
}
.frame(maxHeight: .infinity, alignment: .top)
.safeAreaInset(edge: .bottom) {
if isVisible {
RoundedRectangle(cornerRadius: 16)
.fill(.pink)
.padding(.horizontal, 20)
.padding(.bottom, 20)
.frame(height: 100)
.transition(.move(edge: .bottom))
.padding(.top, 40)
}
}
}
}

struct DrawAnimationView: View {
var isShowing: Bool
var icon: String
var color: any ShapeStyle
var drawOnEffect: DrawOnSymbolEffect = .drawOn
var speed: Double = 1.0
var body: some View {
VStack(spacing: 24) {
Image(systemName: icon)
.font(.system(size: 400))
.imageScale(.large)
.foregroundStyle(AnyShapeStyle(color))
.symbolEffect(drawOnEffect,
options: .speed(speed),
isActive: isShowing)
}
}
}

A valentine's day heart that says LOVE on the front of the heart. The heart's outline is being drawn over top of the heart.

A check mark circle SFSymbol being drawn onto the screen individually by layer. First the circle is drawn followed by the checkmark.

a scribble.variable sf symbol being drawn onto the screen

The signature sf symbol being drawn onto the screen as if it was hand drawn onto a piece of paper.

the rainbow SFSymbol in multicolor being drawn onto the screen starting in the center and spreading outwards.

struct ContentView: View {
@State private var isExpanded = true

var body: some View {
VStack(spacing: 24) {
Label("Good Morning", systemImage: "sun.max")
.labelStyle(ExpandableLabelStyle(isExpanded: isExpanded))

Button("Toggle Label Style") {
isExpanded.toggle()
}
}
}
}

struct ExpandableLabelStyle: LabelStyle {
@Namespace var namespace

var isExpanded: Bool

var transition: AnyTransition {
.opacity.combined(with: .scale)
}

func makeBody(configuration: Configuration) -> some View {
Group {
if isExpanded {
HStack {
configuration.icon
.matchedGeometryEffect(id: "expandableIcon", in: namespace)
configuration.title

}
.transition(transition)
} else {
configuration.icon
.matchedGeometryEffect(id: "expandableIcon", in: namespace)
.transition(transition)
}
}
.animation(.bouncy, value: isExpanded)
}
}

var labelStyle: any LabelStyle {
isExpanded ? . titleAndIcon : .iconOnly
}

Tutti loading indicator animation. A music stand icon with music notes floating out of the stand.

Don't Miss the latest version.

Paperless Music Stand - Tutti
Updated March 14, 2025

a video demo of the metronome music tool for the Tutti app.

A video of the metronome SFSymbol icon with a tick tock animation.

$SwiftUI code showcasing the clipAndStroke view modifier in action struct ClipAndStrokePreviewContainer: View { @State private var radius: CGFloat = 10 @State private var lineWidth: CGFloat = 3 var gradient: LinearGradient { LinearGradient(gradient: Gradient(colors: [.purple.opacity(0.3), .blue.opacity(0.3)]), startPoint: .top, endPoint: .bottom) } var body: some View { VStack { VStack { Image("pageOne") .resizable() .scaledToFit() .frame(width: 225, height: 300) } .clipAndStroke(gradient, radius: radius, lineWidth: lineWidth) VStack(spacing: 8) { Slider(value: $radius, in: 0...20) { Text("Radius").font(.title) } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("20") } Text("Radius: \(radius, specifier: "%.0f")") .foregroundStyle(Color.secondary) } VStack { Slider(value: $lineWidth, in: 0...20) { Text("Line Width") } minimumValueLabel: { Text("0") } maximumValueLabel: { Text("20") } Text("Line Width: \(lineWidth, specifier: "%.0f")") .foregroundStyle(Color.secondary) } } .padding(24) .border(Color.black, width: 2) } } #Preview { ClipAndStrokePreviewContainer() .padding() }$

$SwiftUI ViewModifier code for clipping an image or view to a shape with a stroked border import SwiftUI struct ClipAndStroke<S: Shape, C: ShapeStyle>: ViewModifier { var shape: S var styleContent: C var lineWidth: CGFloat func body(content: Content) -> some View { content .overlay(shape.stroke(styleContent, lineWidth: lineWidth)) .clipShape(shape) } } extension View { func clipAndStroke<S: Shape, C: ShapeStyle>(shape: S, content: C, lineWidth: CGFloat) -> some View { modifier(ClipAndStroke(shape: shape, styleContent: content, lineWidth: lineWidth)) } func clipAndStroke<C: ShapeStyle>(_ content: C, radius: CGFloat, lineWidth: CGFloat) -> some View { let shape = RoundedRectangle(cornerRadius: radius) return modifier(ClipAndStroke(shape: shape, styleContent: content, lineWidth: lineWidth)) } }$