انیمیشن های فنری (Spring Animations)
انیمیشن های فنری (Spring Animations) یعنی حرکت شبیه فنر واقعی. جسم می پرد، سپس آرام می شود. این مدل حس طبیعی می دهد؛ مثل برگه ای که روی موبایل می لغزد.
ایده اصلی و کاربرد
فنر از سه بخش ساده می آید: جرم، سفتی، و میرایی. «پاسخ (Response)» سرعت واکنش را می سازد. «کسر میرایی (DampingFraction)» مقدار پرش و برگشت را کم وزیاد می کند.
سینتکس پایه فنر
تغییر state را داخل withAnimation(.spring(response:..., dampingFraction:...)) انجام بده. سپس همه تغییرهای وابسته، فنری انیمیت می شوند.
مثال 1: فنر ساده با دکمه Toggle
با زدن دکمه، اندازه دایره فنری تغییر می کند. پاسخ و میرایی رفتار پرش را تعیین می کنند.
import SwiftUI
struct SpringDemo: View {
@State private var on = false
var body: some View {
VStack(spacing: 12) {
Circle()
.fill(on ? Color.green : Color.gray)
.frame(width: on ? 120 : 60, height: on ? 120 : 60)
Button("Toggle") {
withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) {
on.toggle()
}
}
}
.padding()
}
}
struct ContentView: View {
var body: some View {
SpringDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: پاسخ کمتر معمولاً سریع تر به نظر می رسد. اما دقت کن پرش زیاد نشود.
مثال 2: تنظیم فنر برای اجزای مختلف
با میرایی کمتر، پرش بیشتر می شود. هر شکل می تواند زمان بندی متفاوتی بگیرد.
import SwiftUI
struct SpringTunedDemo: View {
@State private var on = false
var body: some View {
VStack(spacing: 16) {
RoundedRectangle(cornerRadius: 12)
.fill(Color.blue.opacity(0.2))
.frame(width: on ? 220 : 140, height: 40)
.animation(.spring(response: 0.25, dampingFraction: 0.45), value: on)
Circle()
.fill(Color.orange.opacity(0.4))
.frame(width: on ? 80 : 40, height: on ? 80 : 40)
.animation(.spring(response: 0.5, dampingFraction: 0.65), value: on)
Button(on ? "Reset" : "Bounce") {
on.toggle()
}
}
.padding()
}
}
struct ContentView: View {
var body: some View {
SpringTunedDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
هشدار: میرایی خیلی کم، رابط را بی قرار می کند. کاربران گیج می شوند.
گام های عملی تنظیم درست
- ابتدا پاسخ را برای سرعت مناسب تنظیم کن.
- سپس میرایی را کم وزیاد کن تا پرش طبیعی شود.
- در پایان، روی دستگاه واقعی تست بگیر.
برای پیوستگی بین چیدمان ها، به MatchedGeometryEffect سر بزن. همچنین راهنمای ترنزیشن ها را ببین. صفحه انیمیشن های فنری مرجع همین مبحث است.
جمع بندی سریع
- پاسخ، سرعت واکنش را کنترل می کند.
- میرایی، مقدار پرش را تنظیم می کند.
- پارامترها را کم کم تغییر بده.
- تجربه طبیعی مهم تر از سرعت صرف است.