在两个贝塞尔曲线路径形状之间进行动画处理

coco 发表于 Dev

可可

我发现要UIImageView在两种状态之间设置动画很麻烦：其原始矩形框，以及使用创建的新形状UIBezierPath。提到了许多不同的技术，其中大多数对我不起作用。

首先是意识到使用UIView块动画是行不通的。显然，不能在一个animateWithDuration:块中执行子层动画。（请参见此处和此处）

剩下的CAAnimation是具体的子类CABasicAnimation。我很快意识到，不能从一个视图CAShapeLayer到另一个视图不能进行动画处理（例如，请参见此处）。

而且它们不能只是任何两个形状层路径，而是“仅当从喜欢到喜欢进行动画设置时，才能保证对形状层的路径进行动画处理”（请参见此处）

有了这些，就会出现一些更平凡的问题，例如，用于fromValue和toValue（应该是CAShapeLayer或CGPath？），将动画添加到什么（（layer或mask？））等。

似乎变量太多了。哪种组合会给我我想要的动画？

可可

第一个重要点是类似地构造两条贝塞尔曲线路径，因此矩形是较复杂形状的（平凡）类似物。

// the complex bezier path
let initialPoint = CGPoint(x: 0, y: 0)
let curveStart = CGPoint(x: 0, y: (rect.size.height) * (0.2))
let curveControl = CGPoint(x: (rect.size.width) * (0.6), y: (rect.size.height) * (0.5))
let curveEnd = CGPoint(x: 0, y: (rect.size.height) * (0.8))
let firstCorner = CGPoint(x: 0, y: rect.size.height)
let secondCorner = CGPoint(x: rect.size.width, y: rect.size.height)
let thirdCorner = CGPoint(x: rect.size.width, y: 0)

var myBezierArc = UIBezierPath()
myBezierArc.moveToPoint(initialPoint)
myBezierArc.addLineToPoint(curveStart)
myBezierArc.addQuadCurveToPoint(curveEnd, controlPoint: curveControl)
myBezierArc.addLineToPoint(firstCorner)
myBezierArc.addLineToPoint(secondCorner)
myBezierArc.addLineToPoint(thirdCorner)

创建矩形的更简单的“平凡”贝塞尔曲线路径完全相同，但是controlPoint设置了，所以它似乎不存在：

let curveControl = CGPoint(x: 0, y: (rect.size.height) * (0.5))

（尝试删除该addQuadCurveToPoint行以获得非常奇怪的动画！）

最后，动画命令：

let myAnimation = CABasicAnimation(keyPath: "path")

if (isArcVisible == true) {
    myAnimation.fromValue = myBezierArc.CGPath
    myAnimation.toValue = myBezierTrivial.CGPath
} else {
    myAnimation.fromValue = myBezierTrivial.CGPath
    myAnimation.toValue = myBezierArc.CGPath
}       
myAnimation.duration = 0.4
myAnimation.fillMode = kCAFillModeForwards
myAnimation.removedOnCompletion = false

myImageView.layer.mask.addAnimation(myAnimation, forKey: "animatePath")

如果有人感兴趣，该项目就在这里。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。