Как оживить более двух точек на трапеции?

Question

Часть пользовательского интерфейса, над которой я работаю, имеет большие элементы, меняющие размер в ответ на пользовательский ввод. Анимация видов изменяет размер просто;Сейчас я работаю над созданием трапеций, которые обеспечивают визуальный переход между одинаково окрашенными прямоугольниками (Представления) разных размеров, и я хочу, чтобы длина верха и низа трапеций менялась плавно, так как прямоугольники выше и ниже меняют размер.

Пока у меня есть следующий код, который может анимировать две нижние точки, изменяющиеся в ответ на пользовательский ввод, и он отлично работает. Что мне нужно сделать, это расширить это так, чтобы не только ДВЕ x-координаты могли изменяться с анимацией, но все ЧЕТЫРЕ x-координаты(Y-координаты не меняются, поэтому все, что нужно передать, нужно анимировать, это значения x.)

struct NewTrapezoid: Shape {
  var xTopLeft : Double
  var xTopRight : Double
  var xBottomLeft : Double
  var xBottomRight : Double
  var height : Double
  var animatableData: AnimatablePair<Double, Double> {
    // top two points WERE always fixed  -- the base of the top rectangle
    // what needs to happen NEXT is that these two top points can animate. Present code, they don't.
    // the y-coord of the bottom two points are fixed -- height of the transition zone
    // these two doubles are the X coords of the two bottom points. They animate fine.
    get { AnimatablePair(xBottomLeft, xBottomRight) }
    set {
      xBottomLeft = newValue.first
      xBottomRight = newValue.second
      }
    }
  }

  func path(in rect: CGRect) -> Path {
    let topLeft: CGPoint = CGPoint(x: xTopLeft, y: 0)
    let bottomLeft: CGPoint = CGPoint(x: xBottomLeft, y: height)
    let topRight: CGPoint  = CGPoint(x: xTopRight, y: 0)
    let bottomRight: CGPoint = CGPoint(x: xBottomRight, y: height)
    var path = Path()
    path.move(to: topLeft)
    path.addLine(to: topRight)
    path.addLine(to: bottomRight)
    path.addLine(to: bottomLeft)
    path.addLine(to: topLeft)
    return path   
  }
} 

Я подозреваю, что все упростит, если вместо AnimatablePair<Double, Double>У меня может быть что-то вроде AnimatableMany<Double, Double, Double, Double>, но я не нашел способа сделать это.

Любая помощь будет наиболее ценной!