从 RoundedRectangle 到 Circle 的 SwiftUI 缩放效果

Posted 2023-02-24

【中文标题】从 RoundedRectangle 到 Circle 的 SwiftUI 缩放效果

【英文标题】：SwiftUI scale effect from RoundedRectangle to Circle

【发布时间】：2021-10-24 09:24:17

【问题描述】：

我正在尝试制作一个矩形按钮，在点击手势时变成一个具有缩放和平滑动画的圆形按钮。

ZStack 
   ZStack 
       RegularPolygon(sides: started ? 50 : 4)
           .scale(started ? 0.75 : 1.0)
           .fill(started ? Color(.green) : .red)
   
   .frame(width: 350, height: 200)
   .padding()
   Text(started ? "start" : "Stop")
       .font(.system(size: 36, design:.rounded))
       .fontWeight(.heavy)

.animation(.easeOut(duration: 0.5))

这是我的代码，但我不喜欢这种方法，我认为这是一项难以完成的简单任务。

将矩形按钮转换为具有平滑缩放动画的圆形按钮的最佳方法是什么？

【参考方案1】：

尝试使用此代码将矩形按钮更改为圆形按钮。

ZStack 
        // Rectangle CGFloat(self.isTapped ? 25.0 : 50)
        RoundedRectangle(cornerRadius: CGFloat(self.isTapped ? 25.0 : 50))
            .foregroundColor(self.isTapped ?.red :.blue)
            .frame(width: CGFloat(self.isTapped ? 200 : 100), height: CGFloat(self.isTapped ? 40 : 100), alignment: .center)
        
       Text(self.isTapped ? "Start" : "Stop")
        .foregroundColor(Color.white)
    
    .animation(.easeOut(duration: 0.5))
    .onTapGesture 
        withAnimation 
            self.isTapped.toggle()
        
        
    

【讨论】：

这太棒了，谢谢！