Как заставить Spring Animations с ограничениями вести себя правильно?

Не совсем понятно, какова ваша конечная цель, но...

UIViewPropertyAnimator с UISpringTimingParameters — это визуальный эффект... он колеблется «пружинкой», пока не достигнет своего «конечного пункта назначения».

Вот как это может выглядеть:

он не меняет постоянно рамку обзора.

Вот ваш код, измененный, чтобы мы могли его объяснить:

class SomeViewController: UIViewController {
    
    let blueAnimView: UIView = UIView()
    let redFollowView: UIView = UIView()
    
    let smallFrameView: UIView = UIView()
    let bigFrameView: UIView = UIView()
    
    var bigRect: CGRect = .zero
    var smallRect: CGRect = .zero
    
    var isBig = false
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // define the small and big frames (rects)
        smallRect = CGRect(x: view.frame.midX - 120, y: view.frame.midY - 180, width: 240, height: 360)
        bigRect = CGRect(x: view.frame.midX - (270/2), y: view.frame.midY - (480/2), width: 270, height: 480)
        
        // 3-point red border
        redFollowView.border(3, color: .red)

        // let's make blue view's border thicker to make it easier to see what's going on
        blueAnimView.border(8, color: .blue)

        view.addSubview(bigFrameView)
        view.addSubview(smallFrameView)
        view.addSubview(blueAnimView)
        view.addSubview(redFollowView)
        
        // set the "start" frame of the blue view
        blueAnimView.frame = smallRect

        redFollowView.translatesAutoresizingMaskIntoConstraints = false

        // for simplicity, let's constrain redView to blueView on all 4 sides
        NSLayoutConstraint.activate([
            redFollowView.topAnchor.constraint(equalTo: blueAnimView.topAnchor),
            redFollowView.leadingAnchor.constraint(equalTo: blueAnimView.leadingAnchor),
            redFollowView.trailingAnchor.constraint(equalTo: blueAnimView.trailingAnchor),
            redFollowView.bottomAnchor.constraint(equalTo: blueAnimView.bottomAnchor),
        ])
        
        let gr = UITapGestureRecognizer(target: self, action: #selector(MyViewController.handleTap(_:)))
        view.addGestureRecognizer(gr)

        // so we can see the small and big frames
        bigFrameView.backgroundColor = .systemYellow
        smallFrameView.backgroundColor = .yellow
        bigFrameView.frame = bigRect
        smallFrameView.frame = smallRect
    }
    
    @objc func handleTap(_ gr: UITapGestureRecognizer) {

        let newFrame: CGRect
        if isBig {
            newFrame = smallRect
        } else {
            newFrame = bigRect
        }
        
        // slow spring
        let timing = UISpringTimingParameters.init(dampingRatio: 0.01, frequencyResponse: 10)
        
        // quick spring
        //let timing = UISpringTimingParameters.init(dampingRatio: 0.1, frequencyResponse: 0.5)
        
        let anim = UIViewPropertyAnimator(duration: 10, timingParameters: timing)
        anim.addAnimations {
            self.blueAnimView.frame = newFrame
        }
        anim.addCompletion { _ in
            print("completion")
            self.isBig = !self.isBig
        }
        
        anim.startAnimation()
    }
    
}

extension UIView {
    
    func border(_ width: Float, color: UIColor) {
        layer.borderColor = color.cgColor
        layer.borderWidth = CGFloat(width)
    }
}

extension UISpringTimingParameters {
    public convenience init(dampingRatio: CGFloat, frequencyResponse: CGFloat) {
        
        let mass = 1 as CGFloat
        let stiffness = pow(2 * .pi / frequencyResponse, 2) * mass
        let damping = 4 * .pi * dampingRatio * mass / frequencyResponse
        
        self.init(mass: mass, stiffness: stiffness, damping: damping, initialVelocity: .zero)
    }
}

Первый,

• давайте назовем виды blueAnimView и redFollowView
• давайте объявим маленькие и большие рамки (прямоугольники)
• давайте пока забудем о соотношении сторон 9:16 и ограничим redFollowView всеми 4 сторонами blueAnimView

Давайте также добавим представления Yellow и SystemYellow, чтобы мы могли видеть маленькие и большие рамки:

Когда мы добавим красный и синий виды, поначалу это будет выглядеть так:

Теперь, как только мы вызываем anim.startAnimation(), мы видим, что ограничения redFollowView заставляют его соответствовать кадру «конечного пункта назначения» blueAnimView:

когда происходит пружинная анимация, redFollowView не меняет размер, потому что рамка blueAnimView не меняет размер во время анимации:

Здесь замедлено для ясности:

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

Редактировать

Чтобы получить желаемый эффект, синий вид использует анимацию Spring для изменения размера, а красный (подвид) соответствует либо ширине, либо высоте, сохраняя при этом соотношение 9:16 (фактически «подгонка с обратным соотношением сторон»):

Нам нужно отказаться от идеи ограничения взглядов (см. обсуждение выше).

Вместо этого мы:

• используйте явные рамки
• реализовать CADisplayLink
• в обратном вызове ссылки на дисплей вычислите новый кадр 9:16 для красного представления на основе кадра уровня представления синего представления.

Пример кода (без соединений @IBOutlet или @IBAction)... просто назначьте новый пустой контроллер представления UsingDisplayLinkVC:

class UsingDisplayLinkVC: UIViewController {
    
    let blueAnimView: UIView = UIView()
    let redFollowView: UIView = UIView()
    
    let smallFrameView: UIView = UIView()
    let bigFrameView: UIView = UIView()
    
    var bigRect: CGRect = .zero
    var smallRect: CGRect = .zero
    
    var isBig = false
    
    var displayLink: CADisplayLink!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        // define the small and big frames (rects)
        smallRect = CGRect(x: view.frame.midX - 120, y: view.frame.midY - 180, width: 240, height: 360)
        bigRect = CGRect(x: view.frame.midX - (270/2), y: view.frame.midY - (480/2), width: 270, height: 480)
        
        // 3-point red border
        redFollowView.border(8, color: .red)
        
        // let's make blue view's border thicker to make it easier to see what's going on
        blueAnimView.border(3, color: .blue)
        
        view.addSubview(bigFrameView)
        view.addSubview(smallFrameView)
        
        // add redFollowView as subview of blueAnimView
        blueAnimView.addSubview(redFollowView)
        
        view.addSubview(blueAnimView)
        
        // set the "start" frame of the blueAnimView
        blueAnimView.frame = smallRect
        
        // calculate and set the redFollowView frame
        let h: CGFloat = blueAnimView.frame.width * 16.0 / 9.0
        redFollowView.frame = .init(x: 0.0, y: 0.0, width: blueAnimView.frame.width, height: h)
        redFollowView.center.x = blueAnimView.bounds.midX
        redFollowView.center.y = blueAnimView.bounds.midY
        
        
        let gr = UITapGestureRecognizer(target: self, action: #selector(MyViewController.handleTap(_:)))
        view.addGestureRecognizer(gr)
        
        // so we can see the small and big frames
        bigFrameView.backgroundColor = .systemYellow
        smallFrameView.backgroundColor = .yellow
        bigFrameView.frame = bigRect
        smallFrameView.frame = smallRect
        
        // init displayLink
        displayLink = CADisplayLink(target: self, selector: #selector(update))

        // start displayLink paused
        displayLink.isPaused = true
        
        // add to run loop
        displayLink.add(to: .current, forMode: .common)

    }
    
    @objc func handleTap(_ gr: UITapGestureRecognizer) {
        
        // if animation is running, return
        if !displayLink.isPaused { return }
        
        let newFrame: CGRect
        if isBig {
            newFrame = smallRect
        } else {
            newFrame = bigRect
        }
        
        // slow spring
        let timing = UISpringTimingParameters.init(dampingRatio: 0.01, frequencyResponse: 10)
        
        // quick spring
        //let timing = UISpringTimingParameters.init(dampingRatio: 0.1, frequencyResponse: 0.5)
        
        let anim = UIViewPropertyAnimator(duration: 10, timingParameters: timing)
        anim.addAnimations {
            self.blueAnimView.frame = newFrame
        }
        
        anim.addCompletion { _ in
            print("completion")
            self.isBig = !self.isBig
            // pause displayLink
            self.displayLink.isPaused = true
        }
        
        // un-pause displayLink
        displayLink.isPaused = false
        
        anim.startAnimation()
        
    }
    
    @objc func update() {

        // get the current frame of blueAnimView's presentation layer
        if let curBlueAnimFrame = blueAnimView.layer.presentation()?.frame {
            let aspect: CGFloat = curBlueAnimFrame.width / curBlueAnimFrame.height
            var w: CGFloat = 0.0
            var h: CGFloat = 0.0
            
            // if curBlueAnimFrame has aspect ratio greater than 9:16
            //  use curBlueAnimFrame width and calculate the new redFollowView height
            // else
            //  use curBlueAnimFrame height and calculate the new redFollowView width
            if aspect > 9.0 / 16.0 {
                w = curBlueAnimFrame.width
                h = w * 16.0 / 9.0
            } else {
                h = curBlueAnimFrame.height
                w = h * 9.0 / 16.0
            }
            // keep redFollowView centered
            let x: CGFloat = curBlueAnimFrame.midX - curBlueAnimFrame.origin.x
            let y: CGFloat = curBlueAnimFrame.midY - curBlueAnimFrame.origin.y
            redFollowView.frame = .init(x: 0.0, y: 0.0, width: w, height: h)
            redFollowView.center = .init(x: x, y: y)
        }
        
    }
    
}

Примечание. Это только пример кода! Он не предназначен и не должен считаться «готовым к производству».

Редактировать 2

Как обсуждалось в комментариях, сказанное выше не совсем верно. При обратном звонке update() мы:

• получить кадр анимированного изображения presentation layer
• вычислить кадр 9:16 для просмотра «следить»
• установить рамку этого вида

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

Одним из вариантов было бы написать собственный (или найти) код Spring Animation, а затем вычислить и установить оба кадра при каждом обновлении Display Link.

Или мы можем «обмануть»…

• добавьте ясность UIView
• оживить этот вид
• при каждом обратном вызове обновления получите кадр уровня представления этого представления, установите соответствующий кадр синего представления, вычислите кадр следующего представления и установите его кадр.

Теперь рамки обоих контурных представлений будут установлены одновременно. Мы по-прежнему будем находиться «на один кадр позади» кадра анимации, но, поскольку он очевиден, мы его не увидим.

Быстрый пример кода для демонстрации:

class CheatVC: UIViewController {
    
    let blueView = UIView()
    let redView = UIView()
    let cheatAnimView = UIView()
    
    let smallFrameView: UIView = UIView()
    let bigFrameView: UIView = UIView()
    
    var bigRect: CGRect = .zero
    var smallRect: CGRect = .zero
    
    var isBig = false
    
    var displayLink: CADisplayLink!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBackground
        
        // define the small and big frames (rects)
        smallRect = CGRect(x: view.frame.midX - 120, y: view.frame.midY - 180, width: 240, height: 360)
        //smallRect = CGRect(x: view.frame.midX - 120, y: view.frame.midY - 80, width: 240, height: 160)
        bigRect = CGRect(x: view.frame.midX - (270/2), y: view.frame.midY - (480/2), width: 270, height: 480)
        
        // 3-point red border
        redView.border(3, color: .red)
        
        // let's make blueView's border thicker to make it easier to see what's going on
        blueView.border(8, color: .blue)
        
        view.addSubview(bigFrameView)
        view.addSubview(smallFrameView)
        
        // add blueView and redView as siblings
        view.addSubview(blueView)
        view.addSubview(redView)
        
        // set the "start" frame of the blueAnimView
        blueView.frame = smallRect
        
        // calculate and set the redView frame
        let h: CGFloat = blueView.frame.width * 16.0 / 9.0
        redView.frame = .init(x: 0.0, y: 0.0, width: blueView.frame.width, height: h)
        redView.center = blueView.center
        
        cheatAnimView.frame = smallRect
        view.addSubview(cheatAnimView)
        cheatAnimView.backgroundColor = .clear
        
        let gr = UITapGestureRecognizer(target: self, action: #selector(MyViewController.handleTap(_:)))
        view.addGestureRecognizer(gr)
        
        // so we can see the small and big frames
        bigFrameView.backgroundColor = .systemYellow
        smallFrameView.backgroundColor = .yellow
        bigFrameView.frame = bigRect
        smallFrameView.frame = smallRect
        
        // init displayLink
        displayLink = CADisplayLink(target: self, selector: #selector(update))
        
        // start displayLink paused
        displayLink.isPaused = true
        
        // add to run loop
        displayLink.add(to: .current, forMode: .common)
        
    }
    
    @objc func handleTap(_ gr: UITapGestureRecognizer) {
        
        // if animation is running, return
        if !displayLink.isPaused { return }
        
        let newFrame: CGRect
        if isBig {
            newFrame = smallRect
        } else {
            newFrame = bigRect
        }
        
        // slow spring
        var timing = UISpringTimingParameters.init(dampingRatio: 0.01, frequencyResponse: 10)
        
        // quick spring
        timing = UISpringTimingParameters.init(dampingRatio: 0.1, frequencyResponse: 0.15)
        
        let anim = UIViewPropertyAnimator(duration: 2, timingParameters: timing)
        anim.addAnimations {
            self.cheatAnimView.frame = newFrame
        }
        
        anim.addCompletion { _ in
            print("completion")
            self.isBig = !self.isBig
            // pause displayLink
            self.displayLink.isPaused = true
        }
        
        // un-pause displayLink
        displayLink.isPaused = false
        
        anim.startAnimation()
        
    }
    
    @objc func update() {
        // get the current frame of cheatAnimView's presentation layer
        if let curAnimFrame = cheatAnimView.layer.presentation()?.frame {
            let aspect: CGFloat = curAnimFrame.width / curAnimFrame.height
            var w: CGFloat = 0.0
            var h: CGFloat = 0.0
            
            // if blueView's frame has aspect ratio greater than 9:16
            //  use blueView width and calculate the new redView height
            // else
            //  use blueView height and calculate the new redView width
            if aspect > 9.0 / 16.0 {
                w = curAnimFrame.width
                h = w * 16.0 / 9.0
            } else {
                h = curAnimFrame.height
                w = h * 9.0 / 16.0
            }
            
            blueView.frame = curAnimFrame
            
            redView.frame = .init(x: 0.0, y: 0.0, width: w, height: h)
            redView.center = blueView.center
        }
        
    }
    
}