如何使用 SwiftUI 实现已裁剪为形状的缓慢滑动图像？

Posted 2023-02-24

【中文标题】如何使用 SwiftUI 实现已裁剪为形状的缓慢滑动图像？

【英文标题】：How can I implement a slowly sliding image that has been clipped to shape using SwiftUI?

【发布时间】：2021-04-07 09:37:14

【问题描述】：

到目前为止，我的视图中有这个圆圈和图像：

这是它的代码：

Image(chosenImage)
    .resizable()
    .scaledToFit()
    .clipShape(Circle())
    .shadow(radius: 20)
    .overlay(Circle().stroke(Color.white, lineWidth: 5).shadow(radius: -20))
    .frame(width: width, height: width, alignment: .center)
    .offset(y: -height * 0.05)

如何让图片在圆圈内慢慢向左滑动？

圆圈不应该移动，只有其中的图像应该移动。 当图像结束时，应显示它的另一个副本并重复该操作。或者图像可能会迅速跳回之前的位置并再次开始移动。另一种方法是，当图像到达终点时，它开始缓慢向右移动。

关于如何做到这一点的任何想法，或者是否有任何库可以帮助我实现这一点？

Jeeva Tamil 给出的答案几乎是正确的，但是它会在保持圆形形状的同时移动图像（如下所示）。

而我需要它“在移动时显示图像的不同部分”。

【参考方案1】：

在.overlay 修饰符之前使用.mask 在圆圈内移动图像。在这里，我使用 Draggesture 来演示该行为。

 @State private var horizontalTranslation: CGFloat = .zero
.
.
.
        Image(chosenImage)
            .resizable()
            .scaledToFit()
            .clipShape(Circle())
            .offset(x: horizontalTranslation)
            .gesture(
                DragGesture()
                    .onChanged( (value) in
                        withAnimation 
                            horizontalTranslation = value.translation.width
                            print(horizontalTranslation)
                        
                    )
                    .onEnded( (value) in
                        withAnimation 
                            horizontalTranslation = .zero
                        
                    )
            )
            .mask(Circle())
            .shadow(radius: 20)
            .overlay(Circle().stroke(Color.white, lineWidth: 5).shadow(radius: -20))
            .frame(width: width, height: width, alignment: .center)

【讨论】：

这几乎可以工作，但是当图像被拖动时，它会保持圆形。而我需要它在拖动时“显示图像的不同部分”。我将更新我的问题以显示您的答案。

尝试删除“.clipShape(Circle())”修饰符。该修饰符正在使图像变成圆形。