Question

我正在处理的UI的一部分具有较大的元素，以响应用户输入而改变大小。对改变大小的视图进行动画处理非常简单；我现在正在研究的是构建梯形，以便在不同大小的相似颜色的矩形（视图）之间提供可视过渡，并且我希望梯形的顶部和底部的长度能够平滑地更改大小，因为上方和下方的矩形会更改大小

到目前为止，我有以下代码可以为响应用户输入而变化的两个最低点设置动画，并且效果很好。我需要做的是扩展此范围，以便不仅两个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>，但我还没有找到一种解决方法。

任何帮助将不胜感激！

Answer 1

对于多个值，您可以像这样层叠/嵌套AnimatablePairs：

AnimatablePair< Double, AnimatablePair< Double, AnimatablePair< Double, Double>>>

不好，但是可以正常工作

如何在梯形上为两个以上的点设置动画？

1 个答案: