Question

我有卡的正面和背面。我为这两者之间的过渡设置动画：

private func flipToBack() {
    UIView.transition(from: frontContainer, to: backContainer, duration: 0.5, options: [.transitionFlipFromRight, .showHideTransitionViews], completion: nil)
}

private func flipToFront() {
    UIView.transition(from: backContainer, to: frontContainer, duration: 0.5, options: [.transitionFlipFromLeft, .showHideTransitionViews], completion: nil)
}

这很好用。但是，我想使该动画具有交互性，以便如果用户在卡上水平平移，则翻转动画将按比例前进。通常，我会使用UIViewPropertyAnimator进行这种交互式动画处理，但是我不知道在不从头开始构建翻转动画的情况下，我会在动画制作器中设置什么属性。

是否可以使用UIViewPropertyAnimator，还是有其他替代方法可以使翻页互动？

Answer 1

我最终自己写了。代码很长，因此这是GitHub上the full program的链接。以下是关键部分：

所有内容都封装在InteractiveFlipAnimator对象中，该对象具有前视图（v1）和后视图（v2）。每个视图还具有一个黑色的封面，当该视图转为透视图时，它会充当阴影以添加该变暗效果。

这是平移功能：

/// Add a `UIPanGestureRecognizer` to the main view that contains the card and pass it onto this function.
@objc func pan(_ gesture: UIPanGestureRecognizer) {
    guard let view = gesture.view else { return }
    if isAnimating { return }

    let translation = gesture.translation(in: view)
    let x = translation.x
    let angle = startAngle + CGFloat.pi * x / view.frame.width

    // If the angle is outside [-pi, 0], then do not rotate the view and count it as touchesEnded. This works because the full width is the screen width.
    if angle < -CGFloat.pi || angle > 0 {
        if gesture.state != .began && gesture.state != .changed {
            finishedPanning(angle: angle, velocity: gesture.velocity(in: view))
        }
        return
    }

    var transform = CATransform3DIdentity
    // Perspective transform
    transform.m34 = 1 / -500
    // y rotation transform
    transform = CATransform3DRotate(transform, angle, 0, 1, 0)
    self.v1.layer.transform = transform
    self.v2.layer.transform = transform

    // Set the shadow
    if startAngle == 0 {
        self.v1Cover.alpha = 1 - abs(x / view.frame.width)
        self.v2Cover.alpha = abs(x / view.frame.width)
    } else {
        self.v1Cover.alpha = abs(x / view.frame.width)
        self.v2Cover.alpha = 1 - abs(x / view.frame.width)
    }

    // Set which view is on top. This flip happens when it looks like the two views make a vertical line.
    if abs(angle) < CGFloat.pi / 2 {
        // Flipping point
        v1.layer.zPosition = 0
        v2.layer.zPosition = 1
    } else {
        v1.layer.zPosition = 1
        v2.layer.zPosition = 0
    }

    // Save state
    if gesture.state != .began && gesture.state != .changed {
        finishedPanning(angle: angle, velocity: gesture.velocity(in: view))
    }
}

完成平移的代码非常相似，但也更长。要查看所有内容，请访问上面的GitHub链接。

交互式UIView翻转过渡

1 个答案: