除了 .foregroundColor 之外的所有 SwiftUI 动画

Question

基于@State var 的值，除了一个参数之外，我如何为任何其他参数设置动画？例如，我想为.offset 设置动画，但不是.foregroundColor。这听起来像是一件容易的事，但是当使用相同的“基础视图”来创建某种单元格视图并结合不同的修饰符和过渡时，就不是那么容易了。

对于下面的动画，我试图“避免”改变颜色的动画，同时允许发生偏移 - 我需要立即改变颜色，而不是动画。

对于这个动画，我也在尝试“避免”那种变色动画。这里的挑战是基础视图也有一个转换。

“基本视图”名称是LogoView。这是我的代码：

struct Test_ForegroundColorAnimation: View {
    var array: [Color] = [.yellow, .green, .blue]
    @State var activeIndex1: Int = -1
    @State var activeIndex2: Int = -1
    @State var show: Bool = true

    private func animationFor(index: Int) -> Animation {
        Animation
            .easeInOut(duration: 0.85)
            .delay(0.15 * Double(array.count - index))
    }

    func zindexfor(index: Int) -> Double {
        Double(index == activeIndex1 ? 100 : index)
    }

    func opacityfor(index: Int) -> Double {
        self.activeIndex1 >= 0 ? (index == self.activeIndex1 ? 1 : 0) : 1
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 25) {
            Spacer()

            VStack {
                Text("Offset animation").font(.title)
                Text("Click any item").font(.subheadline)
            }

            ZStack {
                ForEach(array.indices, id: \.self) { index in
                    LogoView(isSelected: index == self.activeIndex1, color: self.array[index])
                        .offset(x: self.activeIndex1 == -1 ? CGFloat(90 * index) : 0)
                        .zIndex(self.zindexfor(index: index))
                        .opacity(self.opacityfor(index: index))
                        .animation(self.animationFor(index: index))
                        .onTapGesture {
                            self.activeIndex1 = index == self.activeIndex1 ? -1 : index
                        }
                }
            }
            .padding(.bottom, 70)

            VStack {
                Text("Transition").font(.title)
                Text("Click any item").font(.subheadline)
            }

            Button(action: {
                self.show.toggle()
            }) {
                Color.purple
                    .frame(width: 100, height: 70)
                    .overlay(Text("Activate transition!").foregroundColor(.white))
            }

            HStack(spacing: 5) {
                ForEach(array.indices, id: \.self) { index in
                    HStack {
                        if self.show {
                            LogoView(isSelected: index == self.activeIndex2, color: self.array[index])
                                .transition(AnyTransition.move(edge: .bottom))
                                .onTapGesture {
                                    self.activeIndex2 = index == self.activeIndex2 ? -1 : index
                                }
                        }
                    }
                    .frame(width: 90, height: 90)
                    .animation(self.animationFor(index: index))
                }
            }
        }
    }
}

struct Test_ForegroundColorAnimation_Previews: PreviewProvider {
    static var previews: some View {
        Test_ForegroundColorAnimation()
    }
}

struct LogoView: View {
    var isSelected: Bool = false
    var color: Color = Color(#colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1))
    var shadow: Color = Color(#colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1))

    var body: some View {
        Image(systemName: "heart.fill")
            .resizable()
            .frame(width: 28, height: 28)
            .foregroundColor(isSelected ? Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)) : color)
            .padding()
            .overlay(
                Circle()
                    .stroke(lineWidth: 3)
                    .foregroundColor(color)
            )
            .background(
                Circle()
                    .foregroundColor(isSelected ? color : Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
                    .shadow(color: isSelected ? color.opacity(0.7) : Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.3), radius: 5, x: 0, y: 10)
            )
            .frame(width: 90, height: 90)
    }
}

Answer 1

如果我正确理解了您的需求，这里有一个修复

struct LogoView: View {
    var isSelected: Bool = false
    var color: Color = Color(#colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1))
    var shadow: Color = Color(#colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1))

    var body: some View {
        Image(systemName: "heart.fill")
            .resizable()
            .frame(width: 28, height: 28)
            .foregroundColor(isSelected ? Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)) : color)
            .padding()
            .overlay(
                Circle()
                    .stroke(lineWidth: 3)
                    .foregroundColor(color)
            )
            .background(
                Circle()
                    .foregroundColor(isSelected ? color : Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
                    .animation(nil)                  // << fix !!
                    .shadow(color: isSelected ? color.opacity(0.7) : Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.3), radius: 5, x: 0, y: 10)
            )
            .frame(width: 90, height: 90)
    }
}