-1

到目前为止，我的视图中有这个圆圈和图像： 在此处输入图像描述

这是它的代码：

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

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

4

1 回答 1

1

在修饰符.mask之前使用可在圆圈内移动图像。.overlay在这里，我使用 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)
于 2021-04-07T11:05:36.777 回答