Question

我正在进行一个过渡，在此过渡期间collectionView单元会展开以显示新元素。

为了防止新元素随单元动画，我从动画视图中将它们删除。

从动画视图中删除元素后，它们也不再被单元格裁剪，而是在单元格扩展之前就显示出来。

现在，我可以在为单元设置动画的元素或应该出现的元素之间进行选择。

Here is a video of the current state of the animation

您可以看到新元素出现在所选元素左侧的单元格中。

以下是我动画过渡的代码：

    let destination = transitionContext.viewController(forKey: .to) 
    let containerView = transitionContext.containerView

    containerView.addSubview(destination.view)


    // Initial state


    let widthConstraint = destination.header.widthAnchor.constraint(equalToConstant: 500)

    let heightConstraint =  destination.header.heightAnchor.constraint(equalToConstant: 601)

    NSLayoutConstraint.activate([widthConstraint, heightConstraint])

    let transform = CATransform3DMakeTranslation(cellFrame.origin.x, cellFrame.origin.y, 0.0)


    destination.topView.layer.transform = transform
    destination.view.layer.zPosition = 999

    containerView.layoutIfNeeded()


    let animator = UIViewPropertyAnimator(duration: 4, dampingRatio: 10) {

        // Final state

        NSLayoutConstraint.deactivate([widthConstraint, heightConstraint])
        destination.topView.layer.transform = CATransform3DIdentity

        destination.view.layoutIfNeeded()
    }

我当时正在考虑根据扩展单元的框架来掩盖新元素，但不确定如何使它起作用。

Answer 1

您可以执行的另一种解决方案是将labelingView转换为仅在应显示的时候显示。例如，仅在完成动画过渡后才显示labelingView。

一些伪代码。

 labelingView.alpha = 0
 UIView.animate(withDuration: 1, animations: {
    // perform transitions
 }) { _ in
    labelingView.alpha = 1
 }

Answer 2

我解决了它，事实证明它比预期的要容易。

我只是基于初始collectionViewCell创建了一个蒙版，然后将其动画化并与扩展单元格一起全屏显示。

let mask = UIView()
        mask.frame.origin = CGPoint(x: cellFrame.origin.x, y: cellFrame.origin.y)
        mask.frame.size = CGSize(width: 500, height: 601)
        mask.backgroundColor = .white
        mask.alpha = 1
        destination.labelingView.mask = mask


// Final mask state
            mask.frame.origin = CGPoint(x: 0.0, y: 0.0)
            mask.frame.size = CGSize(width: 1366, height: 1024)

在扩展的CollectionViewCell旁边对蒙版进行动画处理

2 个答案: