在给定偏移处开始动画

Posted

技术标签:

【中文标题】在给定偏移处开始动画【英文标题】: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

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

【讨论】:

以上是关于在给定偏移处开始动画的主要内容,如果未能解决你的问题,请参考以下文章

UISearchController 在编辑时添加偏移量

React Transition Group:偏移动画开始时间

拆分给定字节偏移量的 utf-8 编码字符串(python 2.7)

游戏动画中欧拉角与万向锁的理解

使用偏移量的容器动画 - Flutter

使用 React Native Animated 时,可以为偏移设置动画吗?