منحنی های انیمیشن (Animation Curves)
منحنی های انیمیشن (Animation Curves) سرعت حرکت را شکل می دهند. یعنی شیء کی تند شود و کی آرام. با انتخاب منحنی درست، حرکت طبیعی و خوش حس می شود.
تعریف ساده منحنی ها
ایز-این (easeIn) آرام شروع می کند و سریع تمام می کند. ایز-اوت (easeOut) سریع شروع می کند و آرام تمام می کند. ایز-این اوت (easeInOut) اول و آخر نرم است. لینیر (linear) همیشه یکنواخت حرکت می کند.
سینتکس پایه زمان بندی
برای کنترل منحنی، تغییر state را داخل withAnimation(.easeInOut(duration: 1)) بگذار. سپس شتاب گیری و کندشدن با همان منحنی انجام می شود.
مثال 1: EaseIn در برابر EaseOut
با دو دکمه، نقطه را با دو منحنی جابه جا کن و تفاوت حس را ببین.
import SwiftUI
struct CurvesDemo: View {
@State private var x: CGFloat = 0
var body: some View {
VStack(spacing: 12) {
HStack {
Circle()
.frame(width: 24, height: 24)
.offset(x: x)
Spacer()
}
HStack(spacing: 12) {
Button("EaseIn") {
withAnimation(.easeIn(duration: 1)) {
x = 240
}
}
Button("EaseOut") {
withAnimation(.easeOut(duration: 1)) {
x = 0
}
}
}
}
.padding()
}
}
struct ContentView: View {
var body: some View {
CurvesDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: برای حرکت ورود، معمولاً easeOut حس طبیعی تری روی عناصر دارد.
مثال 2: Linear در برابر EaseInOut
در این مقایسه، خط بالا یکنواخت است؛ خط پایین نرم شروع و پایان دارد.
import SwiftUI
struct CurvesCompareDemo: View {
@State private var go = false
var body: some View {
VStack(spacing: 16) {
HStack {
Circle()
.frame(width: 16, height: 16)
.offset(x: go ? 240 : 0)
Spacer()
}
.animation(.linear(duration: 1), value: go)
HStack {
Circle()
.frame(width: 16, height: 16)
.offset(x: go ? 240 : 0)
Spacer()
}
.animation(.easeInOut(duration: 1), value: go)
Button(go ? "Reset" : "Animate") {
go.toggle()
}
}
.padding()
}
}
struct ContentView: View {
var body: some View {
CurvesCompareDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
هشدار: از linear برای حرکت های بلند و ظریف کمتر استفاده کن. معمولاً خشک به نظر می رسد.
گام های عملی تنظیم منحنی ها
- اول هدف حرکت را مشخص کن.
- سپس منحنی نزدیک به حس دلخواه را انتخاب کن.
- در پایان، زمان را دقیق تنظیم کن.
برای جهش طبیعی، به انیمیشن های فنری برو. برای تغییر نمایش، بخش ترنزیشن ها را ببین. هماهنگی بین چیدمان ها را با MatchedGeometryEffect بساز.
جمع بندی سریع
- easeIn آرام شروع می کند.
- easeOut آرام تمام می کند.
- easeInOut نرم و متوازن است.
- linear همیشه یکنواخت می ماند.