标签: swiftui-animation

我有一个黄色容器，里面有绿色的视图。我想移动容器，同时隐藏/显示内部绿色视图，并带有动画。目前，我正在使用.offset运动，以及if绿色视图过渡的声明。

问题是，虽然黄色容器移动，但绿色视图却没有。它只是在目标偏移处淡入和淡出。我希望它也沿着黄色容器移动。

这就是我目前得到的	这就是我要的

这是我的代码：

struct ContentView: View {
    @State var showingSubview = false
    
    var body: some View {
        VStack {
            Button("Show Subview") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }
            
            if showingSubview {
                Text("Subview")
                    .padding()
                    .background(Color.green)
            }
        }
        .padding()
        .background(Color.yellow)
        .offset(x: showingSubview ? 150 : 0, y: 0)
    }
}

当绿色视图淡入和淡出时，如何使绿色视图与黄色容器一起移动？最好，我想继续使用iforswitch语句进行插入/删除。

我正在开发一系列屏幕，这些屏幕应该在按下按钮时发生变化，并且应该从右向左滑入/滑出。
一切工作正常，除了.slide过渡使其从前缘移入并移出到后缘。（从左到右）
我想反转过渡动画方向而不改变尾随/前导是什么（至少不在应用程序的整个上下文中）。

我尝试将过渡更改为.move(edge: .trailing)，但随后视图从同一方向移入和移出。

import SwiftUI

struct ContentView: View {
    enum screens {
        case start, mid, final
    }
    @State var curScreen: screens = .start
    
    func changeScreen() {
        switch curScreen {
        case .start:
            curScreen = .mid
        case .mid:
            curScreen = .final
        case .final:
            return
        }
    }
    
    var body: some View {
        switch curScreen {
        case .start:
            ScreenView(callback: changeScreen, text: "Start")
                .transition(.slide)
        case .mid:
            ScreenView(callback: changeScreen, text: "Mid")
                .transition(.slide)
        case .final:
            ScreenView(callback: {}, text: "Final")
                .transition(.slide)
        } …

我的主视图包含CustomView，点击时可通过 来打开详细视图NavigationLink。详细视图还包含CustomView，只是位置不同。

CustomView我可以使用匹配几何效果在单击导航链接时对位置进行过渡/动画吗？

struct HomeView: View {
    @Namespace var namespace
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Top")
                NavigationLink {
                    DetailView(namespace: namespace)
                } label: {
                    CustomView()
                        .matchedGeometryEffect(id: "testId", in: namespace)
                }
                Text("Bottom")
            }
        }
    }
}

struct DetailView: View {
    var namespace: Namespace.ID
    
    var body: some View {
        VStack {
            CustomView()
                .matchedGeometryEffect(id: "testId", in: namespace)
            Text("Details")
            Spacer()
        }
    }
}

我有一个显示 CoreData FetchRequest 的列表，并且有一个可以更改列表排序方式的选取器。我目前的实现方式如下：

struct ParentView: View {
    enum SortMethod: String, CaseIterable, Identifiable {
        var id: Self { self }
        
        case byName = "Name"
        case byDateAdded = "Date Added"
    }

    @State private var currentSortMethod = SortMethod.byName

    var body: some View {
        ItemListView(sortMethod: currentSortMethod) // See child view implementation below
        .toolbar {
            ToolbarItem(placement: .principal) {
                Picker("Sort by", selection: $currentSortMethod) {
                    ForEach(SortMethod.allCases) { sortMethod in
                        Text(sortMethod.rawValue)
                    }
                }
            }
        }
    }
}

子视图如下所示：

struct ItemListView: View {
    
    @Environment(\.managedObjectContext) private var managedObjectContext
    @FetchRequest …

SwiftUI 提供了.animation()可以在视图中动画更改的绑定。但是，如果某个@Published属性@ObserveredObject“自主”更改（例如，从计时器更改），而视图将响应更改而更新，则没有明显的方法可以让视图以动画形式呈现更改。

在下面的示例中，当isOn从“切换”更改时，它会产生动画，但当从“更改”时，Timer它不会。有趣的是，如果我在这里使用三元条件而不是if/ else，即使切换也不会触发动画。

struct ContentView: View {
    @ObservedObject var model: Model
    var body: some View {
        VStack {
            if model.isOn {
                MyImage(color: .blue)
            } else {
                MyImage(color: .clear)
            }
            Spacer()
            Toggle("switch", isOn: $model.isOn.animation(.easeIn(duration: 0.5)))
            Spacer()
        }
    }
}

struct MyImage: View {
    var color: Color
    var body: some View {
        Image(systemName: "pencil.circle.fill")
            .resizable()
            .frame(width: 100, height: 100)
            .foregroundColor(color)
    }
}

class Model: ObservableObject {
    @Published var …

在 SwiftUI 中，我成功地使用修改器在视图第一次绘制到屏幕上时使按钮具有动画效果animation(_:)，这在 macOS 12 中已被弃用。

我尝试用新的animation(_:value:)修饰符替换它，但是这次没有任何反应：所以这不起作用：

struct ContentView: View {
    @State var isOn = false
    var body: some View {
        Button("Press me") {
            isOn.toggle()
        }
        .animation(.easeIn, value: isOn)
        .frame(width: 300, height: 400)
    }
}

但这是有效的。为什么？

struct ContentView: View {
    var body: some View {
        Button("Press me") {
        }
        .animation(.easeIn)
        .frame(width: 300, height: 400)
    }
}

第二个示例在视图显示时为按钮设置动画，而第一个示例不执行任何操作

注意：我解决了这个问题。如果你对动画感兴趣，我用 SPM 创建了一个包，可以在https://github.com/simibac/ConfettiSwiftUI 上找到

所以我试图在 SwiftUI 中创建一个五彩纸屑动画。这是我到目前为止：

这一切都按预期工作，并使用以下代码完成：

struct Movement{
    var x: CGFloat
    var y: CGFloat
    var z: CGFloat
    var opacity: Double
}

struct FancyButtonViewModel: View {
    @State var animate = [false]
    @State var finishedAnimationCouter = 0
    @State var counter = 0
    
    var body: some View {
        VStack{
            ZStack{
                ForEach(finishedAnimationCouter...counter, id:\.self){ i in
                    ConfettiContainer(animate:$animate[i], finishedAnimationCouter:$finishedAnimationCouter, num:1)
                }
            }
            
            Button("Confetti"){
                animate[counter].toggle()
                animate.append(false)
                counter+=1
            }
        }
    }
}

struct ConfettiContainer: View {
    @Binding var animate:Bool
    @Binding var finishedAnimationCouter:Int

    var num:Int
    
    var …

我想永远重复一个动画，没有它自动反转，并且在动画播放后的重复之间有延迟/暂停。

我知道有一个.delay()修改器，但它延迟了动画的开始：

let ani = Animation.easeInOut.delay(1.0).repeatForever(autoreverses: false)\n

除了.repeatForever修改器之外，动画播放后它会立即跳回到开头。但我希望最后一个关键帧在屏幕上保持短时间内可见。

我\xe2\x80\x99ve也尝试了相反的方法，在修饰符.delay()后面添加一个.repeatForever，但没有成功（delay没有效果）。

let ani = Animation.easeInOut.repeatForever(autoreverses: false).delay(1.0)\n

如何在动画播放后添加延迟？

我正在尝试创建一个从底部进入屏幕的视图的动画。但第一次它只出现在屏幕上，没有任何动画，然后它就开始正常工作。

这是代码：

struct ContentView: View {
@State private var showView = false
var body: some View {
    ZStack(alignment: .bottom){
        VStack{
            Button("TAP HERE") {
                withAnimation(.spring()) {
                    showView.toggle()
                }
            }
            Spacer()
        }
        if showView {
            RoundedRectangle(cornerRadius: 30)
                .frame(height: UIScreen.main.bounds.height * 0.5)
                .transition(.move(edge: .bottom))
        }
    }
    .edgesIgnoringSafeArea(.bottom)
}

}

这是行为：

我做错了什么？

我正在使用 Xcode 14 beta 5 和 Swift 5

如何在macOS中设置 Push/Pop 动画NavigationStack？因为目前没有动画，我想推送/弹出控制器向右滑动（向左滑动），类似于AppStore应用程序

enum Nav {
    case a
}

struct MainView: View {
  
    var body: some View {
        NavigationStack {
            NavigationLink(value: Nav.a) {
                Text("Go to a")
            }
            .navigationDestination(for: Nav.self) { path in
                switch path {
                case .a:
                    Text("a")
                }
            }
        }
    }
}