如何在Swift UI中为按下和释放状态创建自定义按钮和动画？

js5cn81o 于 4个月前发布在 Swift

关注(0)|答案(1)|浏览(87)

我正在开发一个自定义按钮的视图。它由两个元素ZStack和Image组成，当按钮按下和释放时，它们应该产生动画。两者的动画略有不同。要做到这一点，我基本上是在切换动画所基于的状态。
我可以用下面的onLongPressGesture属性来实现我想要的功能，但它有一些问题，主要是：
1.我似乎无法将onTapGesture添加到这个按钮来执行操作，在long pres的perform: {}中这样做需要等待一秒钟左右而不释放按钮，这并不理想，理想的操作应该在用户释放手指时执行。
1.我想按钮留在“按下”动画状态，而用户是持有它的手指，但它看起来像后1秒左右，它返回到它的默认状态。
我不确定长按是否是这里使用的正确工具，但我似乎找不到任何其他方法可以让我通过粒度控制显式地切换状态。理想情况下，我应该确切地知道何时按下按钮，何时释放按钮，并在.onTapGesture内部执行操作

struct ButtonIcon: View {
  // Public Variables
  let resource: ImageResource
  
  // Private Variables
  @State private var taping = false
  
  // Body
  var body: some View {
    ZStack {
      Image(resource)
        .resizable()
        .scaledToFit()
        .frame(width: 24, height: 24)
        .scaleEffect(taping ? 1.1 : 1)
    }
    .padding(12)
    .scaleEffect(taping ? 0.8 : 1)
    .onLongPressGesture(
      perform: {},
      onPressingChanged: { pressing in
        withAnimation(.smooth(duration: 0.2)) {
          taping.toggle()
        }
      }
    )
  }
}

字符串

swift

来源：https://stackoverflow.com/questions/77646298/how-to-create-custom-button-and-animation-for-pressed-and-released-state-in-swif

1条答案

按热度按时间

wlzqhblo1#

您可以使用拖动手势。

struct CustomButtom: View {
    @State private var tapping: Bool = false

    var body: some View {
        ZStack {
            Image(systemName: "heart.fill")
                .resizable()
                .scaledToFit()
                .foregroundStyle(Color.pink)
                .frame(width: 100, height: 100)
                .scaleEffect(tapping ? 1.1 : 1)
        }
        .padding(12)
        .scaleEffect(tapping ? 0.8 : 1)
        .gesture(
            DragGesture(minimumDistance: 0)
                .onChanged({ value in
                    withAnimation(.smooth(duration: 0.2)) {
                        tapping = true
                    }
                })
                .onEnded({ value in
                    withAnimation(.bouncy(duration: 0.5)) {
                        tapping = false
                    }
                })
        )

        Text(tapping ? "Pressing" : "Not pressing")
    }
}

字符串
输出：https://i.stack.imgur.com/FJ5zO.gif

赞(0）回复(0）举报 5个月前