在我的應用程式中，我想通過從一個日期到下一個日期、到下一個日期、到下一個日期等的“日歷”過渡來顯示時間的流逝。因此，例如，如果我想顯示從18th, to 19th, to 20th, 我會顯示 18 1 秒鐘，然后淡出，淡入 19，淡出，然后淡入 20。
我有以下顯示一個日期影片到下一個（例如 18 > 19th）：
struct Calendar: View {
@State var date: String
var body: some View {
VStack {
Spacer()
ZStack {
RoundedRectangle(cornerRadius: 20)
.stroke(Color.black, lineWidth: 2)
.frame(width: 200, height: 200)
RoundedRectangle(cornerRadius: 20)
.fill(Color.red)
.frame(width: 200, height: 200)
.offset(y: 160)
.clipped()
.offset(y: -160)
RoundedRectangle(cornerRadius: 20)
.stroke(Color.black, lineWidth: 2)
.frame(width: 200, height: 200)
.offset(y: 160)
.clipped()
.offset(y: -160)
Text(date).font(.system(size: 70.0))
.offset(y: 20)
}
Spacer()
Spacer()
}.padding()
}
}
我在我的代碼中使用：
ScrollView(showsIndicators: false) {
VStack {
Spacer()
ZStack {
if showseconddate == false {
Calendar(date: "18").animation(.easeInOut(duration: 1.0))
.transition(.opacity)
}
if showseconddate == true {
Calendar(date: "19").animation(.easeInOut(duration: 1.0))
.transition(.opacity)
}
Spacer()
}
}.onAppear {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
withAnimation(Animation.linear(duration: 0.5)) {
self.showseconddate.toggle()
self.showfirstdate.toggle() }
timer.invalidate()
}
}
}
這一切都按預期作業，但我正在努力將其擴展到我想顯示它通過多個日期轉換的情況，例如 18 > 19 > 20 > 21 等。有誰知道如何擴展它，或者使用替代解決方案？任何解決方案都必須淡出舊日期，然后淡入新日期。非常感謝！
uj5u.com熱心網友回復：
這是一個相對緊湊的解決方案。它不依賴于Bool值，而是回圈遍歷一個陣列：
struct ContentView: View {
private var dates = ["18","19","20","21","22"]
@State private var dateIndex = 0
private let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
var body: some View{
ScrollView(showsIndicators: false) {
VStack {
Spacer()
ZStack {
Calendar(date: dates[dateIndex])
.transition(.opacity)
.id("date-\(dateIndex)")
Spacer()
}
}.onReceive(timer) { _ in
var newIndex = dateIndex 1
if newIndex == dates.count { newIndex = 0 }
withAnimation(.easeInOut(duration: 0.5)) {
dateIndex = newIndex
}
}
}
}
}
uj5u.com熱心網友回復：
我重新撰寫了您的代碼以使影片運行，我覺得觀看整個日歷閃爍有點煩人，所以我將它重新撰寫為CalendarPage（我將 Calendar 重命名為 CalendarPage，因為 Calendar 是 Swift 中的一種型別）并且CalendarView需要日期并將其覆寫在頁面上。
CalendarPage 是帶有datevar 并Text()已洗掉的日歷：
struct CalendarPage: View {
var body: some View {
VStack {
Spacer()
ZStack {
RoundedRectangle(cornerRadius: 20)
.stroke(Color.black, lineWidth: 2)
.frame(width: 200, height: 200)
RoundedRectangle(cornerRadius: 20)
.fill(Color.red)
.frame(width: 200, height: 200)
.offset(y: 160)
.clipped()
.offset(y: -160)
RoundedRectangle(cornerRadius: 20)
.stroke(Color.black, lineWidth: 2)
.frame(width: 200, height: 200)
.offset(y: 160)
.clipped()
.offset(y: -160)
}
Spacer()
Spacer()
}.padding()
}
}
CalendarView 使用計時器來增加您的日期，直到您到達endDate，它只影響日期本身的不透明度，而不是整個日歷：
struct CalendarView: View {
@State var date: Int = 0
@State var animate = false
@State var calendarSize: CGFloat = 20
let endDate = 31
// This keeps the font size consistent regardless of the size of the calendar
var fontSize: CGFloat {
calendarSize * 0.45
}
private let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
var body: some View {
CalendarPage(date: date.description)
.overlay(alignment: .bottom) {
VStack {
Text(date.description)
.font(.system(size: fontSize))
.opacity(animate ? 1 : 0)
}
.frame(height: calendarSize * 0.8)
}
.frame(width: 200, height: 200)
.readSize(onChange: { size in
calendarSize = min(size.width, size.height)
})
.onReceive(timer) { _ in
date = 1
withAnimation(.linear(duration: 0.3)) {
animate = true
}
DispatchQueue.main.asyncAfter(deadline: .now() 0.75) {
if date != endDate {
withAnimation(.linear(duration: 0.2)) {
animate = false
}
} else {
timer.upstream.connect().cancel()
}
}
}
}
}
我還使用來自FiveStars 博客的CalendarPage這個View擴展來使用首選項鍵來計算（雖然我可以硬編碼它）的高度
extension View {
func readSize(onChange: @escaping (CGSize) -> Void) -> some View {
background(
GeometryReader { geometryProxy in
Color.clear
.preference(key: SizePreferenceKey.self, value: geometryProxy.size)
}
)
.onPreferenceChange(SizePreferenceKey.self, perform: onChange)
}
}
fileprivate struct SizePreferenceKey: PreferenceKey {
static var defaultValue: CGSize = .zero
static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405681.html
標籤：
下一篇：Xcode啟動影片故事板問題