Как я могу настроить анимацию изменения угла в SwiftUI

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

struct Location {
    var centre:CGPoint
    var facing:Angle
}

SwiftUI волшебным образом и автоматически выполняет большую часть анимации, когда они перемещаются из местоположения A в местоположение B.

withAnimation {
    person.location = newLocation
}

Однако для свойства Angle (облицовка) я хочу, чтобы анимация проходила по кратчайшему пути (имея в виду, что в реальном мире углы повторяются).

например Swift UI корректно анимирует при изменении угла 5 -> 10 (градусов)

5,6,7,8,9,10

но переходя от 2 до 358, нужно пройти долгий путь

SwiftUI делает 2,3,4,5,6,7 ......., 357,358

где я бы хотел это сделать

2,1,0,359,358

как я могу это сделать?

Спасибо

update: я надеюсь на решение, которое позволит мне работать с системой анимации, возможно, используя новую структуру MyAngle, которая напрямую предоставляет шаги анимации, возможно, используя какой-то модификатор анимации. .easeInOut изменяет шаги - есть ли эквивалентный подход, при котором я могу создать анимацию .goTheRightWay?


swiftui swiftui-animation
person Confused Vorlon    schedule 30.01.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Хорошо - отправляю свой ответ. Это немного похоже на ответ @Ben, но перемещает управление «углом тени» к эффекту вращения.

Все, что вам нужно сделать, это переключить rotationEffect(angle:Angle) на shortRotationEffect(angle:Angle,id:UUID)

это похоже

        Image(systemName: "person.fill").resizable()
            .frame(width: 50, height: 50)
            .shortRotationEffect(self.person.angle,id:person.id)
            .animation(.easeInOut)

ShortRotationEffect использует предоставленный идентификатор для поддержки словаря предыдущих углов. Когда вы устанавливаете новый угол, он определяет эквивалентный угол, который обеспечивает короткий поворот, и применяет его к нормальному rotationEffect(...)

Вот:

extension View {
    
    /// Like RotationEffect - but when animated, the rotation moves in the shortest direction.
    /// - Parameters:
    ///   - angle: new angle
    ///   - anchor: anchor point
    ///   - id: unique id for the item being displayed. This is used as a key to maintain the rotation history and figure out the right direction to move
    func shortRotationEffect(_ angle: Angle,anchor: UnitPoint = .center, id:UUID) -> some View {
        modifier(ShortRotation(angle: angle,anchor:anchor, id:id))
    }
}


struct ShortRotation: ViewModifier {
    static var storage:[UUID:Angle] = [:]
    
    var angle:Angle
    var anchor:UnitPoint
    var id:UUID
    
func getAngle() -> Angle {
    var newAngle = angle
    
    if let lastAngle = ShortRotation.storage[id] {
        let change:Double = (newAngle.degrees - lastAngle.degrees) %% 360.double
          
        if change < 180 {
            newAngle = lastAngle + Angle.init(degrees: change)
        }
        else {
            newAngle = lastAngle + Angle.init(degrees: change - 360)
        }
    }
    
    ShortRotation.storage[id] = newAngle

    return newAngle
}
    
    
    func body(content: Content) -> some View {
        content
            .rotationEffect(getAngle(),anchor: anchor)
    }
}

это зависит от моей функции положительного модуля:

public extension Double {
    
    /// Returns modulus, but forces it to be positive
    /// - Parameters:
    ///   - left: number
    ///   - right: modulus
    /// - Returns: positive modulus
    static  func %% (_ left: Double, _ right: Double) -> Double {
        let truncatingRemainder = left.truncatingRemainder(dividingBy: right)
        return truncatingRemainder >= 0 ? truncatingRemainder : truncatingRemainder+abs(right)
    }
}
person Confused Vorlon    schedule 01.02.2020
comment
Это лучше, но не совсем работает. Когда я вращаюсь по полному кругу, он все равно прыгает в конце поворота на 360 градусов. Тем не менее, это решает скачок, который происходил между 0 и 360. - person Dominic Holmes; 11.06.2020

arrow_upward
0
arrow_downward

Как насчет того, чтобы установить значение newLocation в пределах 180 ° от начала? Вот функция, позволяющая проверить, больше ли анимированное расстояние, чем половина, и предоставить новую конечную точку, которая ей соответствует.

func adjustedEnd(from start: CGFloat, to target: CGFloat) -> CGFloat {

    // Shift end to be greater than start
    var end = target
    while end < start { end += 360 }

    // Mod the distance with 360, shifting by 180 to keep on the same side of a circle
    return (end - start + 180).truncatingRemainder(dividingBy: 360) - 180 + start
}

Некоторые примеры тестовых случаев:

let startValues: [CGFloat] = [2, -10, 345, 365, 700]
let endValues: [CGFloat] = [2, 10, 180, 185, 350, -10, 715, -700]
for start in startValues {
    print("From \(start):")
    for end in endValues {
        let adjusted = adjustedEnd(from: start, to: end)
        print("\t\(end) \tbecomes \(adjusted);\tdistance \(abs(adjusted - start))")
    }
}

печатает следующее:

From 2.0:
    2.0     becomes 2.0;    distance 0.0
    10.0    becomes 10.0;   distance 8.0
    180.0   becomes 180.0;  distance 178.0
    185.0   becomes -175.0; distance 177.0
    350.0   becomes -10.0;  distance 12.0
    -10.0   becomes -10.0;  distance 12.0
    715.0   becomes -5.0;   distance 7.0
    -700.0  becomes 20.0;   distance 18.0
From -10.0:
    2.0     becomes 2.0;    distance 12.0
    10.0    becomes 10.0;   distance 20.0
    180.0   becomes -180.0; distance 170.0
    185.0   becomes -175.0; distance 165.0
    350.0   becomes -10.0;  distance 0.0
    -10.0   becomes -10.0;  distance 0.0
    715.0   becomes -5.0;   distance 5.0
    -700.0  becomes 20.0;   distance 30.0
From 345.0:
    2.0     becomes 362.0;  distance 17.0
    10.0    becomes 370.0;  distance 25.0
    180.0   becomes 180.0;  distance 165.0
    185.0   becomes 185.0;  distance 160.0
    350.0   becomes 350.0;  distance 5.0
    -10.0   becomes 350.0;  distance 5.0
    715.0   becomes 355.0;  distance 10.0
    -700.0  becomes 380.0;  distance 35.0
From 365.0:
    2.0     becomes 362.0;  distance 3.0
    10.0    becomes 370.0;  distance 5.0
    180.0   becomes 540.0;  distance 175.0
    185.0   becomes 185.0;  distance 180.0
    350.0   becomes 350.0;  distance 15.0
    -10.0   becomes 350.0;  distance 15.0
    715.0   becomes 355.0;  distance 10.0
    -700.0  becomes 380.0;  distance 15.0
From 700.0:
    2.0     becomes 722.0;  distance 22.0
    10.0    becomes 730.0;  distance 30.0
    180.0   becomes 540.0;  distance 160.0
    185.0   becomes 545.0;  distance 155.0
    350.0   becomes 710.0;  distance 10.0
    -10.0   becomes 710.0;  distance 10.0
    715.0   becomes 715.0;  distance 15.0
    -700.0  becomes 740.0;  distance 40.0

(Отредактировано для учета отрицательных конечных значений)

Изменить: из вашего комментария о сохранении второго значения, как насчет установки Location.facing на скорректированный угол, а затем добавления в Местоположение чего-то вроде

var prettyFacing: Angle {
    var facing = self.facing
    while facing.degrees < 0 { facing += Angle(degrees: 360) }
    while facing.degrees > 360 { facing -= Angle(degrees: 360) }
    return facing
}
person Ben    schedule 30.01.2020
comment
спасибо за участие. Я рассмотрел этот подход, но он требует поддержки набора теневых местоположений, которые должны корректироваться по мере изменения фактического местоположения. Я надеюсь, что смогу изменить логику анимации напрямую. Где-то в системе анимации должно быть что-то, что определяет шаги между A и B ... - person Confused Vorlon; 30.01.2020
comment
А, я вижу @ConfusedVorlon. Нужно ли модели человека поддерживать значение угла от 0 до 360? Что, если бы location.facing был установлен на это скорректированное значение, а затем вы добавили вычисляемую переменную в Location, что-то вроде prettyFacing, которая при необходимости возвращает facing обратно в неотрицательное значение? - person Ben; 01.02.2020
comment
Ответ отредактирован с примером. Я понимаю, что все еще бесполезен в вопросе об анимации, просто подумал, может быть, это может быть полезно! - person Ben; 01.02.2020

arrow_upward
0
arrow_downward

Попробовав оба других варианта, мы по-прежнему получали визуальные сбои (менее распространенные, но все же присутствующие!).

Наше решение: используйте UIKit для анимации

Мы создали пакет SPM, который добавляет простой модификатор .uiRotationEffect(). Этот модификатор помещает ваш View в UIView и использует функцию .animate(...) UIView для получения правильного поведения.

Вы можете установить пакет здесь или просто скопировать и вставить код здесь, это не очень долго.

GIF рабочего решения:

введите описание изображения здесь

person Dominic Holmes    schedule 29.06.2020