如何在Swift中的BezierPath之后为imageView的点1到2和点2到3设置不同的animation.duration时间?

Posted

技术标签:

【中文标题】如何在Swift中的BezierPath之后为imageView的点1到2和点2到3设置不同的animation.duration时间?【英文标题】:How to set different animation.duration times for point 1 to 2 and point 2 to 3 of an imageView following a BezierPath in Swift? 【发布时间】:2018-12-05 23:54:54 【问题描述】:

我有一个带有 BezierPath 的 UIView 子视图和一个遵循从 a 到 b 的路径的 ImageView。路径有 8 个点,我需要点 1 到点 2 具有与点 2 到点 3 等不同的持续时间

我已经能够设置视图和路径并沿路径为图像设置动画,但完整动画的持续时间相同。这是我的动画代码,任何帮助将不胜感激。

let pathToFollow = path
    let animation = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
    animation.path = pathToFollow?.cgPath
    animation.duration = 10.0
    animation.calculationMode = kCAAnimationPaced
    animation.delegate = self
    self.icons[Icon].layer.add(animation, forKey: nil)

【问题讨论】:

【参考方案1】:

您有一个关键帧动画,这是一个好的开始。但是你忘了添加一些实际的帧!为此,请提供一些 keyTimes。 (并去掉kCAAnimationPaced;这意味着整个动画有一个单一的速度,这与你所说的你想要的相反。)

请注意,对于这种路径动画,帧分割点是用于定义路径的贝塞尔点,所以一切都取决于路径最初是如何构建的。

这是一个实际的例子:

当我们绕着广场前进时,观察我们在每个拐角处是如何加速的。角是控制点所在的位置。这是我使用的代码:

    let path = CGPath(rect: CGRect(x: 120, y: 120, width: 100, height: 100), 
        transform: nil)
    let anim = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
    anim.duration = 10
    anim.path = path
    anim.calculationMode = .linear
    anim.keyTimes = [0.0, 0.7, 0.9, 0.98, 1.0]
    self.v.layer.add(anim, forKey: nil)

【讨论】:

以上是关于如何在Swift中的BezierPath之后为imageView的点1到2和点2到3设置不同的animation.duration时间?的主要内容,如果未能解决你的问题,请参考以下文章

如何将图像拉伸成自定义形状(swift3)

如何使用 BezierPath 绘制 1px 线

在 Tableview 中使用 BezierPath 创建时间线视图

如何在 Swift 中的 NSJSONSerialization.dataWithJSONObject 之后获取可读的 JSON

UIImage 在 Swift 中的 UIImagePickerController 之后为 nil

为啥`[bezierPath closePath]`方法没有关闭我的路径?