相关疑难解决方法(0)

如何移动形状(从椭圆形到矩形,反之亦然)动画？

脏代码:

UIBezierPath *roundedRectBezierPath = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:10];
UIBezierPath *ovalBezierPath = [UIBezierPath bezierPathWithOvalInRect:newRect];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 3;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

if (isRect) {

    self.shapeLayer.path = roundedRectBezierPath.CGPath;
    animation.fromValue = (__bridge id)(ovalBezierPath.CGPath);
    animation.toValue = (__bridge id)(roundedRectBezierPath.CGPath);

} else {

    self.shapeLayer.path = ovalBezierPath.CGPath;
    animation.fromValue = (__bridge id)(roundedRectBezierPath.CGPath);
    animation.toValue = (__bridge id)(ovalBezierPath.CGPath);

}    

[self.shapeLayer addAnimation:animation forKey:@"animatePath"];

结果很奇怪:

我希望形状缩小/扩展,而不是怪异的重绘.

我正在尝试使用 CASpringAnimation 对 CAShapeLayer 路径进行动画处理。预期的结果是形状之间的“变形”，表现出“弹性”。

我有一个圆形和方形路径之间的基本代码示例，如下所示，但最终结果是一个弹簧动画，它不会“超出”最终的较大方形路径，这是预期的行为。

我的代码是：

let springAnimation = CASpringAnimation(keyPath: "path")
springAnimation.damping = 1
springAnimation.duration = springAnimation.settlingDuration
springAnimation.fromValue = standardCirclePath().cgPath
springAnimation.toValue = standardSquarePath().cgPath

circleLayer.add(springAnimation, forKey: nil) // Where circleLayer (red background) is a sublayer of a basic UIView in the frame (blue background)

我从这个答案中得到了我的道路。

有没有办法使用 CASpringAnimation 来实现 CAShapeLayer 路径转换？否则，还有什么替代方案？

我正在尝试从圆形动画到带有圆角的正方形。据我所知，为了流畅的动画，两条路径的点数应该相等。所以我写了一个函数，它基于许多弧来构建一个圆：

private func circleShape(segmentNumber: Int = 8, radius: CGFloat = 32) -> CGPath {
    let center = self.bounds.center
    let circlePath = UIBezierPath()
    let segmentAngle = CGFloat.pi * CGFloat(2) / CGFloat(segmentNumber)
    var currentAngle: CGFloat = 0

    for _ in 0 ..< segmentNumber {
        let nextAngle = currentAngle + segmentAngle
        circlePath.addArc(withCenter: center, radius: radius,
                startAngle: currentAngle, endAngle: nextAngle, clockwise: true)
        currentAngle = nextAngle
    }

    circlePath.close()
    return circlePath.cgPath
}

我正在使用getPathElementsPointsAndTypes()检查点数，它与segmentNumber不成比例地增加（segmentNumber: 1, points: 13; sN: 2, p: 14; sN: 3, …