ios - 滚动时在曲线/圆弧路径中移动 View

Question

使用 LTInfiniteScrollView，我能够使用以下代码为下图中所示的增长或圆圈制作动画:

- (void)updateView:(UIView *)view withProgress:(CGFloat)progress scrollDirection:(ScrollDirection)direction {
    CGFloat size = 50;
    CGPoint center = view.center;
    view.center = center;
    size = size * (1.4 - 0.5 * (fabs(progress)));
    view.frame = CGRectMake(0, 0, size, size);
    view.layer.cornerRadius = size / 2;
    view.center = center;
}

我想要实现的是像下图这样滚动时的弧形运动效果。我想在圆弧路径中移动圆。有没有一种方法或公式可以计算新的 Y 值，使圆看起来像在弧形路径中移动？

Answer 1

这是我最终做的，到目前为止对我来说效果很好:

我的 Storyboard设置:

您在这里可以看到的是一个普通的 UIScrollView 和一个 UIView 作为 Content View。 Content View 内部有一个垂直的 UIStackView，它负责平均放置图像。有一个堆栈也很好，因为你可以简单地添加或删除图像，而不必重新约束任何东西，也不必为每个图像设置导出。相反，您可以仅约束您的堆栈 View 并为您的 View Controller 创建一个导出并使用其 arrangedSubviews 属性来遍历您的图像。

如您所见，我实际上在另一个 UIView 中有我的 UIImageView“Profile_One”。这不是必需的，但我将使用下图进行解释:

基本上我将普通的 UIView 限制为与 UIScrollView 具有相同的高度，但是里面的 UIImageView 只有它的一半高度.我这样做是因为当图像沿着一条路径向上移动时，用户试图将它们拖回原处，触摸通常在 UIScrollViews 边界之外，没有接收到触摸。

一般设置到此为止。神奇之处在于:

为了让图像移动到他们想要的任何地方，请确保禁用 UIScrollView 及其所有 subview 的 clipsToBounds。

现在我只是将 UIScrollViews 委托(delegate)分配给 UIViewController 并覆盖

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    arrangeImageStack()
}

这是我的 arrangeImageStack 方法的作用:

func arrangeImageStack() {
    for arrangedSubview in imageStack.arrangedSubviews {
        // Subview is the UIImageViw
        let subview = arrangedSubview.subviews[0]
        // X has to be translated from the image's superview to the view controller's view
        let x = subview.superview?.convert(subview.center, to: view).x
        // Then move the center along the new Y value
        subview.center = view.convert(CGPoint(x: x!, y: getYOnCircumference(forX: x!) - scrollView.contentOffset.y), to: subview.superview)
    }
}

这是神奇的getYOnCircumference(forX: CGFloat):

func getYOnCircumference(forX x : CGFloat) -> CGFloat {
    let converted_x = x - view.frame.width / 2
    let radius = profileImageView.frame.width
    let result = sqrt(abs(pow(radius, 2) - pow(converted_x, 2)))
    return result
}

不要被 converted_x 搞糊涂了，这只是因为我希望图像对齐的路径位于一个圆圈内，比 View Controller 的 View 大得多，在为了获得光滑的圆度。您必须确保您插入公式的 X 值与您的 CIRCLE 的坐标系一致，而不是您的 View 。然后简单地获取该圆的半径并将其全部代入公式，您可以在 this link 上自己查看。在“求解坐标”部分。

您的 UIScrollView 现在将始终根据其自身的滚动将您的 UIStackView 中的每个图像转换为圆形路径。

我真的希望这对你有帮助，因为几个月来我一直在努力寻找解决这个完全相同问题的方法。

祝你好运!