在给定偏移处开始动画

Posted 2023-03-10

【中文标题】在给定偏移处开始动画

【英文标题】：Starting animation at a given offset

【发布时间】：2014-12-24 13:07:53

【问题描述】：

有没有办法实现动画的timeOffset 属性的作用，在某个时间点开始动画，但没有“包装”行为？

我有两个动画（在两个不同的层）：

// This is the animation of the stroke of a circle
let progressAnim = CABasicAnimation(keyPath: "strokeEnd")
progressAnim.duration = duration
progressAnim.fromValue = 0
progressAnim.toValue = 1
progressAnim.fillMode = kCAFillModeBackwards
progressAnim.timeOffset = elapsed

// This is the animation of a pointer that follow the same circle as above
let arrowAnim = CAKeyframeAnimation(keyPath: "position")
arrowAnim.duration = duration
arrowAnim.rotationMode = kCAAnimationRotateAuto
arrowAnim.path = arrowPath.CGPath
arrowAnim.fillMode = kCAFillModeBackwards
arrowAnim.timeOffset = elapsed

这会在想要的进度处开始动画，但是当它达到预期的结束时，它会重新开始并持续剩余的持续时间。我意识到这就是 timeOffset 被指定的工作方式，但我希望可以在没有包装的情况下以某种方式实现同​​样的效果。

【参考方案1】：

您可以计算正确的fromValue 和对应的duration，而不是timeOffset。

例如

progressAnim.duration = duration - elapsed
progressAnim.fromValue = elapsed / duration

【讨论】：

这是我首先尝试的，但是当我计算圆圈的strokeEnd 和箭头动画的startAngle 时，两个动画不同步。它们同时开始和结束，但在两者之间，行为有点……错误……

【参考方案2】：

是的，这是可能的。您需要使用与暂停和恢复“飞行中”动画相同的设置。文档非常薄弱，动画的属性令人困惑。每次我必须处理暂停和恢复动画时，我都必须花半天时间重新弄清楚，然后一周后，我又忘记了如何做。我已经处理了至少 6 个月了，所以我真的忘记了该怎么做。

我在 github 上有一个演示项目，它展示了如何暂停和恢复动画，甚至使用滑块向前和向后移动动画。我建议你看看那个。它有你需要的所有东西：

Keyframe view animation demo on Github

【参考方案3】：

我想我明白了。通过反复试验，当我将动画的beginTime 设置为过去的某个时间时，它似乎可以工作，如下所示：

let beginTime = CACurrentMediaTime() - offset
// Set the beginTime of the progress animation
progressAnim.beginTime = beginTime
// Set the begintTime of the arrow animation
arrowAnim.beginTime = beginTime

这似乎达到了预期的效果。