问题[animation](coding)

我有一个有序概念类别的数据集，并按照它们出现的顺序绘制图形，并根据节点之间连接多次发生的时间来标记概念距离和厚度。

我在 networkx 中有一个由以下方式生成的图表：

1. 一次添加一条边；然后
2. 将字典中的所有边缘信息添加到标签中；然后
3. 根据位置词典将位置应用到所有事物上

我花了很长时间才弄清楚如何制作正确的图表，但现在我对它很满意。我的问题是我想采用完整的图表 G 并一次复制一条边，这样我就可以随时制作动画。

这是我所做的，但它非常容易出错，因为标签出现在边缘之前。有什么想法可以正确做到这一点吗？

   ###############################################
    # Doing the bit where we output the video of the graph being constructed

    # Create an empty directed graph for animation
    positions = pos_dic
    G_animated = nx.DiGraph()

    # Initialize figure and axis for animation
    fig, ax = plt.subplots(figsize=(20, 12))
    plt.title(f'Graph for {key} at {timestamp}',font)

    # Step 2: Extract the edges, colors, weights, and labels from the original graph
    edges = list(G.edges(data=True))
    edge_colors = [attr['color'] for u, v, attr in edges]
    edge_weights = [attr['weight'] for u, v, attr in edges]
    edge_labels = {(u, v): attr['label'] for u, v, attr in edges}

    # Step 3: Function to update the graph step by step
    def update_graph(num):
        ax.clear()  # Clear the plot for the next frame
        
        if num < len(edges):
            u, v, attr = edges[num]
            
            # Add the nodes if they don't exist yet in G_animated
            if u not in G_animated.nodes:
                G_animated.add_node(u)
            if v not in G_animated.nodes:
                G_animated.add_node(v)
            
            # Now, add the edge with the attributes
            G_animated.add_edge(u, v, **attr)
        
        # Draw the updated graph with custom positions
        edge_color_list = [edge_colors[i] for i in range(len(G_animated.edges))]
        nx.draw(G_animated, pos=positions, ax=ax, with_labels=False, node_color='lightblue', 
                edge_color=edge_color_list, width=edge_weights[:len(G_animated.edges)], 
                node_size=500, arrows=True)
        nx.draw_networkx_labels(G_animated, pos_dic, font_size=11, font_color='black', font_weight='bold', bbox=dict(facecolor='white', edgecolor='black', boxstyle='round,pad=0.3'))
        # Draw edge labels (showing the label attributes)
        nx.draw_networkx_edge_labels(G_animated, pos=positions, edge_labels=edge_labels)

    # Step 4: Create animation object
    ani = FuncAnimation(fig, update_graph, frames=len(edges), repeat=False, interval=3000)

    # Step 5: Save the animation as a video (e.g., .mp4)
    writer = FFMpegWriter(fps=1, metadata=dict(artist='Nick Kelly'), bitrate=1800)
    ani.save(f"graph_animation_{key}.mp4", writer=writer)

    # plt.show()
    plt.close()

    # End video here
    ##################################################

这会产生非常故障的动画，请参阅此文件作为示例：https ://1drv.ms/v/s!AuaSDysD-RqIhOsFSP6pYZCUmvDYvQ?e=iz2k8L

我正在尝试制作幼苗生长的动画。计划是让叶子沿着茎的路径生长（用虚线表示）。现在这个方法可行（经过一些尝试和错误）。但是，我希望叶子能够沿着路径旋转（从底部中心开始）（理想情况下，在移动时生长）。

当我将旋转设置为“自动”时，结果并不像我所预料的那样。

<svg width="150" height="150" viewBox="0 0 150 150">
  <path fill="none" stroke="black" stroke-width="1px" stroke-dasharray="5" id="stem" d="m 29.7,149.1
c 0.3,-1 1.7,-8.6 -0.7,-20.1 -4.3,-20.6 -5.7,-48.9 42.1,-52"/>
  <path id="leaves" d="M 8.5,132.8
C 14.3,133 16.4,132.5 19.9,135.4 23.2,138.2 29.6,144.2 28.5,148.6
L 29.6,149 30.4,149.2
C 32.6,144.2 35.2,140.7 39.3,137.4 43.7,133.9 49.6,133.2 56.9,133.1 56.9,133.1 47.1,126.3 39.5,129.3 31.1,132.8 33.8,138.4 29.7,148.4 29.6,143.6 27.9,132 22.8,130 16.5,127.5 8.5,132.7 8.5,132.7
Z">
      <animateMotion
        dur="1s"
        repeatCount="1"
        rotate="auto"
        begin="leaves.click" fill="freeze" path="M 0,0
C 0.3,-1 1.7,-8.6 -0.7,-20.1 -5,-40.7 -6.4,-69 41.400002,-72.1"/>
</path>
</svg>

我认为路径可能存在问题，因此我尝试使用相对路径和绝对路径，但两者的结果相同。

我试图实现一个相当简单的动画，其中列表中的选定项会应用背景。目标是选定项后面的灰色框能够平滑地从上一个位置变形到下一个位置。

我使用 来实现这一点，matchedGeometryEffect以便 SwiftUI 可以匹配两个状态之间的背景视图，即使从技术上讲它们具有不同的 ID 路径。然而，这一努力被以下因素所阻碍：List

这是示例项目。要中断动画，您只需将按钮放在列表中即可。

为什么 List 会破坏此动画？有什么方法可以解决这个问题吗？

struct AnimationButtonStyle: ButtonStyle {
    
    var isCurrent: Bool
    var animationNamespace: Namespace.ID
    
    var backgroundView: some View {
        Color.gray
        .cornerRadius(8)
        .matchedGeometryEffect(id: "Shape", in: animationNamespace)
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(
                isCurrent ? backgroundView : nil
            )
            .opacity(configuration.isPressed ? 0.5 : 1.0)
    }
}

struct ContentView: View {
    enum cases: String, CaseIterable {
        case foo = "Foo"
        case bar = "Barrrrrr"
        case bat = "Battttttttttttttt"
    }
    
    @Namespace private var animationNamespace
    @State var animatedCurrentCase: cases = .foo
    @State var currentCase: cases = .foo
    @State var isAnimating: Bool = false
    
    var body: some View {
        VStack {
            // Without the list this animation will work
            List {
                Section {
                    VStack(alignment: .leading, spacing: 0) {
                        ForEach(Array(cases.allCases.enumerated()), id: \.offset) { index, theCase in
                            var isCurrent: Bool { theCase == animatedCurrentCase }
                            Button {
                                isAnimating = true
                                Task { @MainActor in
                                    animatedCurrentCase = theCase
                                    try? await Task.sleep(nanoseconds: 200_000_000)
                                    currentCase = theCase
                                    isAnimating = false
                                }
                            } label: {
                                Label {
                                    Text(theCase.rawValue)
                                } icon: {
                                    VStack(alignment: .leading) {
                                        Text("\(index)")
                                    }
                                    .frame(width: isCurrent ? 16 + 4 : 16)
                                }
                            }
                            .disabled(isAnimating)
                            .buttonStyle(AnimationButtonStyle(isCurrent: isCurrent, animationNamespace: animationNamespace))
                            .animation(.smooth, value: animatedCurrentCase)
                        }
                    }
                }
            }
            Spacer().frame(height: 10)
            Text("Selected: \(currentCase.rawValue)")
                .font(.title)
        }
        .padding()
    }
}

我的一个 maui android 项目在一个页面中有一个集合视图。

我像这样设置集合视图的属性：

    <CollectionView x:Name="ModelList"
                    SelectionMode="None"
                    IsGrouped="False"
                    ItemSizingStrategy="MeasureAllItems"
                    ItemsSource="{Binding Models}"
                    VerticalOptions="FillAndExpand">

        <CollectionView.ItemsLayout>
            <GridItemsLayout Span="2" Orientation="Vertical"/>
        </CollectionView.ItemsLayout>

        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Model">
                <VerticalStackLayout Spacing="3" HorizontalOptions="Center" Margin="0,0,0,10">
                    <views:CustomView
                        x:Name="Cstm"                                
                        IsBusy="{Binding IsBusy, Source={RelativeSource AncestorType={x:Type viewmodel:ViewModel}}}"  <-- IsBusy property is bindable Property.-->
                        ControlTemplate="{StaticResource TappedView}">
                        
                        <views:CustomView.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ModelDetailsPageCommand, Source={RelativeSource AncestorType={x:Type viewmodel:ProjectPageViewModel}}}" CommandParameter="{Binding Id}"/>
                        </views:CustomView.GestureRecognizers>

                    </views:CustomView>
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

Collection View 的 item 模板使用自定义视图填充，而自定义视图的控件模板是自定义控件。其布局如下：

<ControlTemplate x:Key="CustomControl">
    <Border x:Name="CustomLayout">
        <Grid>
            <Border attached:ControlTappedAttachedProperty.Value="{TemplateBinding IsBusy}"> <--AttachedProperty-->
                <Image HeightRequest="60">
                    <Image.Source>
                        <FontImageSource FontFamily="Font" Glyph="{x:Static Font.ThereIsAProblem}" Color="{StaticResource YsSomeColor}" />
                    </Image.Source>
                </Image>
            </Border>
        </Grid>
    </Border>
</ControlTemplate>

这将控制附加属性的值与自定义控件的可绑定属性的绑定。

附加属性只是为附加的视觉元素设置动画。

问题就在这里。当点击集合视图中的项目时，所有项目都会动画。而不仅仅是被点击的项目。

尝试过：

• 将选择模式更改为单一不起作用。
• 将附加属性顶部父对象 (Collectionview item -> <views:CustomView/>) 附加到自定义控件无效。同样的问题。

所以……我很困惑。任何帮助或想法都将不胜感激。提前致谢。

以下是一个简单的示例代码。当Button被按下时，Image会出现在 的左侧Text，从而导致Text缩小。

但是当动画发生时，字母Text会在水平方向上摆动。以下是动画示例的链接： TextTruncatingTest.gif

import SwiftUI

struct TextTruncatingTest: View {
    @State private var imageVisible: Bool = true
    
    var body: some View {
        VStack {
            Button {
                withAnimation {
                    imageVisible.toggle()
                }
            } label: {
                Text("Toggle Image")
            }
            
            HStack {
                if imageVisible {
                    Image(systemName: "circle")
                }
                
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
                    .transition(.identity)
                    .lineLimit(1)
                
            }
            .padding()
            .background {
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                    .foregroundStyle(Color.basicSecondaryBackground)
            }
        }
        .padding()
    }
}

#Preview {
    TextTruncatingTest()
}

我尝试使用.transition(.identity)，Text但没有帮助。我需要保留这种布局类型并找到此动画问题的解决方案。

我尝试使用以下方法创建热图动画：矩阵和“带图像”，但我想逐点创建动画。我设法逐列进行，但不能逐点进行

这是我的妈妈

$Data <<EOD
2 1 9 3 9 4 4 9 1 4 1 
9 0 4 9 0 4 2 3 6 7 1 
1 8 5 5 2 1 5 4 1 5 9 
7 3 5 8 4 7 3 6 4 7 0 
9 0 6 5 5 9 0 5 0 0 2 
2 6 3 2 1 1 4 0 3 5 7 
9 2 6 8 9 2 2 5 1 5 2 
3 2 4 9 6 0 0 1 9 3 8 
6 7 1 9 1 0 8 9 1 7 6 
2 7 3 0 3 6 8 5 5 1 4 
9 0 2 6 4 6 9 4 5 0 8
EOD

stats $Data nooutput   # get the number of rows
lin = STATS_records
col = STATS_columns

nb_p = lin * col

print "lin: " . lin
print "col: " . col
print "nb_p: " . nb_p

do for [cur = 0 : nb_p] {
    plot $Data matrix using 1:2:3 every ::::cur with image title "n: ".cur
    pause 1
}

我也尝试：

do for [c = 0 : col] {
    do for [l = 0 : lin] {
    plot $Data using c:l with points pt 5 title 'c: '.c.' l: '.l
    pause 1
    }
}

我试图将图像从右向左移动以制作动画，但无法弄清楚如何根据设备类型（iPad 和 iPhone）更改起始位置和结束位置。我无法在视图内设置 xpos 和 ypos 作为起始位置，否则我会收到“Type () 无法符合 View”错误，因此我将代码移动到 .onAppear，它根据设备类型设置 xpos 和 ypos，但此代码在起始位置已设置后执行。代码如下

import Foundation
import SwiftUI

struct Home1View: View {

    @State var xpos: CGFloat = 350
    @State var ypos: CGFloat = 450

    @State var opac: Double = 1.0
    @State var dHeight: Int = 0
    let layoutProperties:LayoutProperties
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                ResponsiveView {properties in
                    VStack{
                        Text("XXXX")
                        
                
                Image("number-one")
                    .resizable()
                    .frame(width: layoutProperties.dimensValues.frameSz, height: layoutProperties.dimensValues.frameSz)
                    .position(x: xpos, y: ypos)
                    .opacity(opac)
                 
                    .onAppear {
                        //ipad 13in width = 1032 height 870
                        print("display height on appear = ", geometry.size.height)
                        print("display width on appear = ", geometry.size.width)
                        xpos = geometry.size.width - 100
                        ypos = geometry.size.height - 150
                        
                        withAnimation(Animation.easeInOut(duration: 3).repeatCount(2, autoreverses: false)) {
                            xpos = 100
                            //.position(x: layoutProperties.dimensValues.xpos, y: layoutProperties.dimensValues.ypos-250)
                        } completion: {
                            opac = 0.0
                        }
                    }
            } //end ZStack
        } //end geometry
    }
}

• 很抱歉使用了伪代码，但我不允许分享我的代码。

我有一个 ScrollView，其中包含顶部的固定项目和底部的取消固定项目。

 ______________
|    Item 1    |
|    Item 2    |
|    Item 3    |
|--------------|
|    Item 4    |
|    Item 5    |
|    Item 6    |
|    Item 7    |
|    Item 8    |
|______________|

Scroll 视图由两个集合（pinnedItems 和 unpinnedItems）填充，使用 ScrollView 中的两个 ForEach 子句。

var pinnedItems = ["Item 1", "Item 2", "Item 3"]
var unpinnedItems = ["Item 4", "Item 5", "Item 6", "Item 7", "Item 8"]

ScrollView {
    ForEach(pinnedTasks) { task in
        NavigationLink(value: NavigationPath.task(task)) {
            TaskCardView(task: task, onPinning: {
                withAnimation {
                    togglePinnedTask(task: task)
                }
            })
            .padding(.bottom)
        }.buttonStyle(.plain)
    }


    Divider()
        .frame(minHeight: 3)
        .background(.gray)
        .padding(.bottom)


    ForEach(unPinnedTasks) { task in
        NavigationLink(value: NavigationPath.task(task)) {
            TaskCardView(task: task, onPinning: {
                withAnimation {
                    togglePinnedTask(task: task)
                }
            })
            .padding(.bottom)
        }.buttonStyle(.plain)
    }
}
                

togglePinnedTask() 函数从一个集合中删除任务并将其插入到另一个集合中。

自动动画只会淡出任务卡。我想让它们“飞”到新的位置。这样做的方法是什么？

我使用 tailwind 和 svelte 创建了一个简单的标签组件，如下所示：

你可以看到它在这个repl上运行

我想制作从一个选项到另一个选项的动画

与此页面中发生的情况类似：https://www.shadcn-svelte.com/examples/dashboard

我怎样才能实现这样的动画，是使用 tailwind 类还是 svelte 指令？

代码：使用此代码，我可以导航到（ProfileView（）、HomeNew、NotificationsTabView、MessageTabView）之间的视图，非常清晰，我的意思是像非常快速的变化，但我需要它可以更顺畅地从一个视图更改为另一个视图

因为我的代码如果我快速地逐个更改视图然后在视图虚拟数据设计之前稍微花一点时间在当前视图中显示..

所以我需要在视图之间非常流畅的导航。那么如何实现视图之间的流畅导航呢？请指导我。

struct TabContainerViewNew: View {
    @Binding var index: Int?
    @State private var showSideMenu = false
    @State private var gotoSearch = false

    init(index: Binding<Int?>) {
        self._index = index
        UITabBar.appearance().isHidden = true
    }

    let tabs = [("Menu", "Menu_New"), ("My profile", "user"), ("Home", "MenuNew_Home"), ("Notification", "MenuNew_Notification"), ("Message", "MenuNew_Message")]
    
    var body: some View {
        ZStack(alignment: .bottom) {
            if let index = index {
                TabView(selection: Binding(
                    get: { index },
                    set: { newValue in
                        self.index = newValue
                    }
                )) {
                    ProfileView()
                        .tabItem {
                            Label("My profile", image: "icn_settings_tab")
                        }
                        .tag(1)

                    HomeNew()
                        .tabItem {
                            Label("Home", image: "icn_home_tab")
                        }
                        .tag(2)

                    NotificationsTabView()
                        .tabItem {
                            Label("Notification", image: "icn_notifications_tab")
                        }
                        .tag(3)

                    MessageTabView()
                        .tabItem {
                            Label("Message", image: "icn_message_tab")
                        }
                        .tag(4)
                }
                .tint(.white)
                .transition(.slide)
          }

            VStack(spacing: 0) {
          
                HStack(spacing: 0) {
                    ForEach(0..<tabs.count) { i in
                        if tabs[i].0 == "Menu" {
                            VStack {
                                Button(action: {
                                    withAnimation {
                                        showSideMenu.toggle()
                                    }
                                }) {
                                    Image(tabs[i].1)
                                        .renderingMode(.template)
                                        .resizable()
                                        .scaledToFit()
                                        .tint(.white.opacity(0.6))
                                        .frame(width: 24, height: 24)
                                        .padding(8)
                                }
                                Text(tabs[i].0)
                                    .foregroundColor(.white.opacity(0.6))
                                    .font(.system(size: 11))
                            }
                            .frame(maxWidth: .infinity)
                        } else {
                            TabButton(image: tabs[i].1, title: tabs[i].0, item: i, index: $index)
                                .frame(maxWidth: .infinity)
                        }
                    }
                }
                .padding(.horizontal, 7)
                .padding(.bottom, 15)
                .padding(.top, 5)
                .background(Color.appGreen2)
            }
        }
        
        .sideMenu(isShowing: $showSideMenu) {
            SideMenuView(isShowingMenu: $showSideMenu)
        }
    }
}

struct TabButton: View {
    var image: String
    var title: String
    var item: Int
    @Binding var index: Int?

    var body: some View {
        VStack {
            Button(action: {
                    index = item
            }) {
                Image(image)
                    .renderingMode(.template)
                    .resizable()
                    .foregroundColor(index == item ? .white : .white.opacity(0.6))
                    .frame(width: 24, height: 24)
                    .padding(8)
            }
            Text(title)
                .foregroundColor(index == item ? .white : .white.opacity(0.6))
                .fontWeight(index == item ? .bold : .regular)
                .font(.system(size: (index == item ? 11 : 11)))
        }
        .frame(maxWidth: .infinity) 
    }
}