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

Question

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

这是它的代码：

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 给出的答案几乎是正确的，但是它在移动图像的同时保持圆形（如下所示）。

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

Answer 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)

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

How can I implement a slowly sliding image that has been clipped to shape using SwiftUI?

animation

image

swift

swiftui

swiftui-animation