在给定偏移处开始动画
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
这似乎达到了预期的效果。
【讨论】:
以上是关于在给定偏移处开始动画的主要内容,如果未能解决你的问题,请参考以下文章
React Transition Group:偏移动画开始时间