iOS 3DAnimations: проблемы при повороте нескольких совмещенных видов - PullRequest
Новая
       30

iOS 3DAnimations: проблемы при повороте нескольких совмещенных видов

0 голосов
/ 22 марта 2019

Выпуск

Если при одновременном переворачивании ( например, pi вращения) на одной и той же оси одновременно иерархия видов (какая спереди, а какая сзади) нарушается.

Подробные объяснения

В GIF ниже серый вид со значком swift находится впереди , а синий вид сзади .

Вы можете заметить, что, когда первое вращение серого вида достигает pi / 2, его прозрачность, кажется, изменяется. Кроме того, когда серый цвет завершает свое первое вращение, вместо того, чтобы оставаться за синим видом, он оказывается впереди в течение всего следующего вращения.

With blue coloured supView

Теперь, повторяя ту же самую анимацию, синий вид теперь не применяет цвета, но он все еще находится в иерархии видов за серым видом и все еще анимирован .

no colour view

Желаемый результат

Я пытаюсь добиться той же анимации, сохраняя синий вид поверх серого, без видимого изменения прозрачности на сером виде. Я использую UIViewPropertyAnimator, чтобы потом можно было очистить анимацию.

Код

Следующий код описывает упрощенный метод переворота (как расширение UIView), на котором основана анимация. 

extension UIView{


    func flipping(_ times: Int = 1, to direction: FoldingDirection, within duration: Double = 0.01, startAfter delay: Double = 0) {
        guard times > 0 else { return }


        // resets the layer anchor point depending on the current transform states of the view (calling a specific method)
        self.setAnchorPoint(at: direction.anchor())

        // adding perspective effect 
        self.layer.transform.m34 = 1 / 250

        // setting rotation axis          
        let axis: CGPoint = {
            switch direction {
            case .right, .left:
                return CGPoint(x: 1, y: 0)
            default:
                return CGPoint(x: 0, y: 1)
            }
        }()

        let flipDuration = duration > 0 ? duration / Double(times) : 0.01

        // creating animator
        let animator = UIViewPropertyAnimator(duration: flipDuration, curve: .linear) {
            self.layer.transform = CATransform3DRotate(self.layer.transform, .pi, axis.y, axis.x, 0)
        }

        animator.startAnimation(afterDelay: delay)

        animator.addCompletion { (position) in
            if position == .end {
                self.flipping(times - 1, to: direction, within: duration * ( 1 - 1 / Double(times)), startAfter: 0)
            }   
        }
    }
}

Вызов анимации: 

greyView.flipping(3, to: .right, within: 9, startAfter: 0)
blueView.flipping(2, to: .right, within: 6, startAfter: 3)

Спасибо за вашу помощь!

EDIT После запуска нескольких тестов кажется, что иерархия представления действительно изменяется во время анимации: вращение происходит за плоскостью представления.

1 Ответ

0 голосов
/ 22 марта 2019

В этом типе анимации их Zpotion не назначается, так что вы не можете контролировать, какая из них ближе, а другая - дальше.

Назначение zPosition слоям во время события решит ваши проблемы.Вы можете сравнить 

      greyView.layer.zPosition = 20
       blueView.layer.zPosition = -20

и 

         greyView.layer.zPosition = 200
       blueView.layer.zPosition = -200

, и вы поймете, что я имею в виду.

...