swiftui，应用于父级效果子动画的动画 [英] swiftui, animation applied to parent effect child animation

问题描述

RectangleView具有幻灯片动画，其子TextView具有旋转动画.我想当Go！时，RectangleView和他的孩子(TextView)一起作为整个幻灯片(easeInOut)进入屏幕.按下，然后TextView永远旋转(线性).但实际上，子级TextView与父级TextView分开旋转，线性和滑动，并永远重复.

RectangleView has a slide animation, his child TextView has a rotation animation. I suppose that RectangleView with his child(TextView) as a whole slide(easeInOut) into screen when Go! pressed, and TextView rotate(linear) forever. But in fact, the child TextView separates from his parent, rotating(linear) and sliding(linear), and repeats forever.

为什么将动画应用于父级效果子动画?

why animation applied to parent effect child animation?

struct AnimationTestView: View {
    @State private var go = false
    var body: some View {
        VStack {
            Button("Go!") {
                go.toggle()
            }
            if go {
                RectangleView()
                    .transition(.slide)
                    .animation(.easeInOut)
            }
        }.navigationTitle("Animation Test")
    }
}

struct RectangleView: View {
    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(.pink)
            .overlay(TextView())
    }
}

struct TextView: View {
    @State private var animationRotating: Bool = false
    let animation = Animation.linear(duration: 3.0).repeatForever(autoreverses: false)
    
    var body: some View {
        Text("Test")
            .foregroundColor(.blue)
            .rotationEffect(.degrees(animationRotating ? 360 : 0))
            .animation(animation)
            .onAppear { animationRotating = true }
            .onDisappear { animationRotating = false }
    }
}

推荐答案

如果同时存在多个动画，则通用解决方案(在大多数情况下)是为每个动画使用显式状态值.

If there are several simultaneous animations the generic solution (in majority of cases) is to use explicit state value for each.

所以这是一个更正的代码(已在Xcode 12.1/iOS 14.1上进行了测试，使用模拟器或设备，预览错误地渲染了一些过渡)

So here is a corrected code (tested with Xcode 12.1 / iOS 14.1, use Simulator or Device, Preview renders some transitions incorrectly)

struct AnimationTestView: View {
    @State private var go = false
    var body: some View {
        VStack {
            Button("Go!") {
                go.toggle()
            }
                VStack {      // container needed for correct transition !!
                    if go {
                         RectangleView()
                              .transition(.slide)
                    }
                }.animation(.easeInOut, value: go)    // << here !!
        }.navigationTitle("Animation Test")
    }
}

struct RectangleView: View {
    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(.pink)
            .overlay(TextView())
    }
}

struct TextView: View {
    @State private var animationRotating: Bool = false
    let animation = Animation.linear(duration: 3.0).repeatForever(autoreverses: false)
    
    var body: some View {
        Text("Test")
            .foregroundColor(.blue)
            .rotationEffect(.degrees(animationRotating ? 360 : 0))
            .animation(animation, value: animationRotating)          // << here !!
            .onAppear { animationRotating = true }
            .onDisappear { animationRotating = false }
    }
}

这篇关于swiftui，应用于父级效果子动画的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！