ترنزیشن ها (Transitions)
«ترنزیشن (Transition)» یعنی انیمیشن ورود و خروج نما. «ترنزیشن SwiftUI» ظاهر یا محو شدن را نرم می کند. با withAnimation زمان اجرا را تعیین کن. سپس با .transition(...) نوع اثر را مشخص کن.
تعریف و زمان بندی ترنزیشن SwiftUI
ترنزیشن روی نمایی اعمال می شود که اضافه یا حذف می گردد. بنابراین تغییر state را داخل withAnimation بگذار تا ورود و خروج انیمیت شود.
نکته: ترنزیشن فقط هنگام insert/remove اعمال می شود؛ نه روی تغییر اندازه.
سینتکس پایه ترنزیشن
نمونه رایج: .transition(.opacity). همچنین می توانی چند افکت را ترکیب کنی؛ مثلاً .opacity با .scale.
مثال 1: ترنزیشن Opacity + Scale
با دکمه، متن اضافه یا حذف می شود. ورود و خروج با محو و بزرگ نمایی است.
import SwiftUI
struct TransitionDemo: View {
@State private var show = false
var body: some View {
VStack(spacing: 12) {
Button(show ? "Hide" : "Show") {
withAnimation(.easeInOut) {
show.toggle()
}
}
if show {
Text("Hello")
.padding(12)
.background(Color.blue.opacity(0.1))
.cornerRadius(8)
.transition(.opacity.combined(with: .scale))
}
}
.padding()
}
}
struct ContentView: View {
var body: some View {
TransitionDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
افکت ترکیبی باعث ورود نرم و خروج تمیز می شود. دکمه فقط state را تغییر می دهد.
مثال 2: ترنزیشن نامتقارن
ورود و خروج می توانند متفاوت باشند. با .asymmetric جهت ها را جدا تعیین کن.
import SwiftUI
struct AsymmetricTransitionDemo: View {
@State private var show = false
var body: some View {
VStack(spacing: 12) {
Button(show ? "Hide" : "Show") {
withAnimation(.easeInOut) {
show.toggle()
}
}
if show {
Text("Panel")
.padding(12)
.frame(maxWidth: .infinity)
.background(Color.green.opacity(0.15))
.cornerRadius(8)
.transition(
.asymmetric(
insertion: .move(edge: .bottom).combined(with: .opacity),
removal: .move(edge: .top).combined(with: .opacity)
)
)
}
}
.padding()
}
}
struct ContentView: View {
var body: some View {
AsymmetricTransitionDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
پنل از پایین وارد می شود و از بالا می رود. نتیجه طبیعی تر دیده می شود.
گام های عملی پیاده سازی
- state نمایش را تعریف کن.
- نمای واردشونده را با
.transition(...)تزئین کن. - تغییر state را داخل
withAnimation(...)قرار بده.
نکته: اگر ترنزیشن کافی نیست، انیمیشن صریح را ترکیب کن. برای دید کلی، صفحه ترنزیشن SwiftUI و دیگر مثال ها را ببین. همچنین انیمیشن صریح و انیمیشن ضمنی را بررسی کن.
جمع بندی سریع
- ترنزیشن فقط زمان ورود/خروج است.
- از
.transition(...)روی نمای هدف استفاده کن. withAnimationاجرا را زمان بندی می کند.- برای رفتار متفاوت، از
.asymmetricکمک بگیر.