列表行平滑动画

Posted 2023-02-24

【中文标题】列表行平滑动画

【英文标题】：List Row smooth animation

【发布时间】：2019-11-06 06:34:25

【问题描述】：

我有一个列表，我想让view 出现。当我点击该行时，以下代码会产生一个生涩的animation。我想修改以创建更流畅的动画。有没有办法平滑地对List 进行动画更改？

import SwiftUI

struct ContentView: View 
    var body: some View 
        List(0..<10)index in
             ListItem(title: index)
        
    


struct ListItem: View 
    @State var title: Int
    @State var bOpen = false

    var body: some View 
        VStack
            Text("\(title+2) items")
            withAnimation
                self.bOpen ? Options() : nil
            
        .onTapGesture 
            self.bOpen.toggle()
        
    


struct Options: View 
    var body: some View 
        HStack 
            Image(systemName:"circle.fill")
            Image(systemName:"star")
        

    

struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

【参考方案1】：

在ListItem 上使用.animation() 修饰符

喜欢：

ListItem(title: index).animation(.default)

您也可以将其应用于VStack 本身（如果您设法不为所有ListItem 更改设置动画）。

而且不需要withAnimation

【参考方案2】：

如果您没有其他项目，则 listItem 的其他答案就足够了。

但具体来说，你在 listItem 中有一些其他的动画项，你可以这样做：

 var body: some View 
    VStack
        Text("\(title+2) items")
        self.bOpen ? Options().transition(AnyTransition.move(edge: .top)) : nil
    .onTapGesture 
    withAnimation
    self.bOpen.toggle()
    

更正放置“withAnimation”的位置 引入和平的transtion 行动。

【讨论】：

感谢您的反馈。还是达不到我想要的效果。动画显得生涩。视图的出现和消失是突然的。当您观看剧集时，正在寻找类似于应用 Overcast 中的内容。