Question

我正试图建立卡片翻转过程。放大。我在Origami中制作了它的模型 - Movie (less that 1Mb)

正如您所看到的，同时应用了3种变换： 1.将视图中心移动到屏幕中心 2.缩放 3. 3D腐烂

我们可以在相同的两个阶段划分动画：
阶段1：按钮缩放，移动并在侧面旋转（PI / 2弧度）。第1阶段按钮结束时消失 阶段2： toView（我的模态视图）旋转（从-PI / 2到0弧度），缩放到正常大小并将视图的中心移动到屏幕中心。如果我们排除弹跳 - 这是非常简单的转换。

但是我在构建它时遇到了一些问题：
我只翻了一个按钮，而不是整个视图。这个按钮背后有一个背景。因此，如果我应用CATransform3DMakeRotation按钮的一半消失 - 它与3D空间（Z轴）中的背景相交。有没有办法在这里使用3DTransform？
2.屏幕上有一些人工制品。我不知道他们来自哪里。

您可以查看result movie（3.8Mb）。我已经放慢了电影中第二张卡片的动画效果。

以下是此动画的代码：

func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

let container = transitionContext.containerView()

let fromViewBig = transitionContext.viewForKey(UITransitionContextFromViewKey)!
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!

// Converting button to UIImageView and hiding actual button
let button = sourceViewController.view.viewWithTag(sourceViewController.buttonIndex)!
UIGraphicsBeginImageContextWithOptions(button.bounds.size, false, 0.0)
button.layer.renderInContext(UIGraphicsGetCurrentContext())
var img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext();
let fromView = UIImageView(frame: button.frame)
fromView.image = img
button.hidden = true

container.addSubview(toView)
container.addSubview(fromView)



let duration = self.transitionDuration(transitionContext)

// Add a perspective transform
var transform = CATransform3DIdentity
transform.m34 = -0.002
container.layer.sublayerTransform = transform

//calculating "median" frame size - size of the frame in 1/2 of animation
let medianX = (toView.frame.width + fromView.frame.width) / 2
let medianY = (toView.frame.height + fromView.frame.height) / 2

// at the midpoint of our animation final size of fromView should be equal to starting size of toView
// initial scale transfor fo toView (it will appear in second half of animation)
let initialToScaleTransform = CATransform3DMakeScale(medianX/toView.frame.width, medianY/toView.frame.height, 1.0)
// final scale of fromView
let finalFromScaleTransform = CATransform3DMakeScale(medianX/fromView.frame.width, medianY/fromView.frame.height, 1.0)
let finalToScaleTransform = CATransform3DMakeScale(1.0, 1.0, 1.0)

// our view is moving diring animation too
let startCenter = fromView.center
let endCenter = toView.center
let midCenter = CGPoint(x: (startCenter.x + endCenter.x)/2, y: (startCenter.y + endCenter.y)/2)

// flip the to VC halfway round - hiding it
toView.layer.transform = CATransform3DRotate(initialToScaleTransform, CGFloat(-M_PI_2), 0.0, 1.0, 0.0)
toView.center = midCenter

// animate
UIView.animateKeyframesWithDuration(duration, delay: 0, options: UIViewKeyframeAnimationOptions.allZeros, animations: { () -> Void in
    UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.5, animations: { () -> Void in
        fromView.layer.transform = CATransform3DRotate(finalFromScaleTransform, CGFloat(M_PI_2), 0.0, 1.0, 0.0)
        fromView.center = midCenter
    })
    UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: { () -> Void in
        toView.layer.transform = CATransform3DRotate(finalToScaleTransform, 0.0, 0.0, 1.0, 0.0)
        toView.center = endCenter
    })
}) { (finished) -> Void in
    transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
}
}

翻转和缩放3D过渡问题（iOS 7+）

0 个答案: