Переверните и масштабируйте проблемы 3D-перехода (iOS 7+)
Я пытаюсь построить переход для карты перевернуть и увеличить. Я сделал его модель в Оригами - Фильм (менее 1 Мб)
Как вы можете видеть, одновременно применяются 3 преобразования: 1. перемещение центра обзора к центру экрана 2. масштабирование 3. трехмерное гниение
Мы можем разделить анимацию на равные 2 фазы:
Фаза 1: кнопка масштабируется, перемещается и вращается в сторону (PI/2 радиан). В конце Фазы 1 кнопка исчезает.
Фаза 2: toView
(мой модальный вид) вращается (от -PI/2 до 0 радиан), масштабируется до нормального размера и перемещает центр вида в центр экрана. Если мы исключаем подпрыгивание - это довольно простые преобразования.
Но я столкнулся с несколькими проблемами при его создании:
1. Я нажимаю только кнопку, а не весь вид. За этой кнопкой есть фон. Итак, если я подам заявку CATransform3DMakeRotation
половина кнопки исчезает - она пересекается с фоном в трехмерном пространстве (ось Z). Есть ли способ использовать 3DTransform здесь?
2. На экране есть некоторые артефакты. Я понятия не имею, откуда они.
Вы можете проверить результат фильма (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())
}
}