Блог

Здесь я получил 2 фигуры, один прямоугольник и один круг, которые при нажатии кнопки только одна из них стала видна пользователю, я попытался использовать @Namespace для этого преобразования, но ничего не получилось!

МОЯ цель: иметь красивую и плавную анимацию преобразования из одной формы в другую.

 struct ContentView: View {

@State var action: Bool = false
@Namespace var sameShape

var body: some View {
    
    
    ZStack
    {
        
        Group
        {
            if action
            {
                Circle()
                    .fill(Color.blue).frame(width: 150, height: 150, alignment: .center)
                    .matchedGeometryEffect(id: "Dakota148Zero", in: sameShape)
            }
            else
            {
                Rectangle()
                    .fill(Color.red).frame(width: 150, height: 150, alignment: .center)
                    .matchedGeometryEffect(id: "Dakota148Zero", in: sameShape)
            }
        }
        .animation(.easeInOut)
        
        
        
        VStack
        {
            
            Spacer()
            
            Button("transform") { action.toggle() }.font(Font.largeTitle).padding()
            
        }
        
    }
    
    
    }
}
  

Вот способ сделать это, представив круг и квадрат как a RoundedRectangle с разными cornerRadius значениями:

 struct ContentView: View {
    
    @State var action = false
    
    var body: some View {
        
        ZStack
        {
            RoundedRectangle(cornerRadius: action ? 0 : 75)
                .fill(action ? Color.red : .blue)
                .frame(width: 150, height: 150, alignment: .center)
                .animation(.easeInOut)
            
            VStack
            {
                Spacer()
                
                Button("transform") {
                    action.toggle()
                }
                .font(Font.largeTitle)
                .padding()
            }
        }
    }
}
  

Group это не настоящий контейнер, поэтому не сохраняйте анимацию. Group Замените некоторым стеком, например

         VStack
        {
            if action
              // ... other code no change
  

При выходе iOS14 вы можете использовать matchedGeometryEffect() . Если вы используете iOS14, я бы рекомендовал этот подход.

https://www.hackingwithswift.com/quick-start/swiftui/how-to-synchronize-animations-from-one-view-to-another-with-matchedgeometryeffect

https://developer.apple.com/documentation/swiftui/view/matchedgeometryeffect(id:in:properties:anchor:issource:)

Итак, в вашем решении, если вы замените action.toggle() на withAnimation{self.action.toggle()} в своем коде кнопки, он будет анимироваться.

 Button("transform") { 
    withAnimation{self.action.toggle()} 
    }
.font(Font.largeTitle).padding()
  

Это решение работает на симуляторе для меня (Xcode 12.1, iPhone 11 iOS 14.1):

 import SwiftUI

struct ContentView: View {

@State var action: Bool = false
@Namespace var transition

var body: some View {
    ZStack {
        Group {
            if action {
                Circle()
                    .fill(Color.blue).frame(width: 150, height: 150, alignment: .center)
                    .matchedGeometryEffect(id: "shape", in: transition)
            } else {
                Rectangle()
                    .fill(Color.red).frame(width: 150, height: 150, alignment: .center)
                    .matchedGeometryEffect(id: "shape", in: transition)
            }
        }
        .animation(.easeInOut)
        
        VStack {
            Spacer()
            
            Button("transform") { withAnimation{self.action.toggle()} }.font(Font.largeTitle).padding()
                
        }
    }
}
}
  

matchedGeometryEffect() не хочет так красиво анимировать разные формы (включая cornerRadius) или цвета, не уверен, является ли это ошибкой, которая будет исправлена в будущих патчах, или просто функцией, которую нужно обойти с помощью обычной анимации. Когда я играю с matchedGeometryEffect(), кажется, он отлично справляется с увеличением и уменьшением размеров, как показано в этом коде:

 import SwiftUI

struct ContentView: View {
@State private var animate: Bool = false
@Namespace private var transition

    var body: some View {
        VStack {
            if animate {
                RoundedRectangle(cornerRadius: 75.0)
                    .matchedGeometryEffect(id: "shape", in: transition)
                    .frame(width: 250, height: 250, alignment: .center)
                    .foregroundColor(Color.blue)
                    .animation(.easeInOut)
                    .onTapGesture {
                        animate.toggle()
                    }
         
            } else {
                // Circle
                RoundedRectangle(cornerRadius: 75.0)
                    .matchedGeometryEffect(id: "shape", in: transition)
                    .frame(width: 150, height: 150, alignment: .center)
                    .foregroundColor(Color.red)
                    .animation(.easeInOut)
                    .onTapGesture {
                        animate.toggle()
                    }
            }
        }
    }
}