let animation = CAKeyframeAnimation(keyPath: "position")animation.path = trackPath.cgPathanimation.rotationMode = kCAAnimationRotateautoanimation.speed = 0animation.timeOffset = offsetanimation.duration = 1animation.calculationMode = kCAAnimationPacedsquare.layer.add(animation,forKey: "animate position along path")
但是,这只会将视图移动到所需的点,并且不会为其设置动画.如何在BezIEr路径的一部分上为视图设置动画?
谢谢
解决方法 您可以通过修改“完整”动画的时间和包装它的动画组来完成此 *** 作.为了说明这种动画的定时如何工作,想象 – 而不是沿着路径动画一个位置 – 一个颜色被动画化.然后,从一种颜色到另一种颜色的完整动画可以这样说明,其中右边的值是稍后的时间 – 所以最左边是起始值,最右边是结束值:
请注意,此动画的“时间”是线性的.这是故意的,因为最终结果的“时间”将在稍后配置.
在这个动画中,想象一下我们只想动画中间三分之一,动画的这一部分:
只有几个步骤可以动画动画的这一部分.
首先,将“完整”动画配置为具有线性定时(或者沿着路径动画;具有节奏计算模式)并具有“完整”持续时间.
例如:如果您要为动画的三分之一设置动画,需要花费1秒钟,请将完整动画配置为3秒.
let relativeStart = 1.0/3.0let relativeEnd = 2.0/3.0let duration = 1.0let innerDuration = duration / (relativeEnd - relativeStart) // 3 seconds// configure the "complete" animationanimation.duration = innerDuration
这意味着当前动画如下所示(完整动画):
接下来,为了使动画“开始”进入完整动画的三分之一,我们将其时间“偏移”持续时间的三分之一:
animation.timeOffset = relativeStart * innerDuration
现在,动画如下所示,从其结束值到其起始值的偏移和包装:
接下来,为了仅显示此动画的一部分,我们创建一个具有所需持续时间的动画组,并仅向其添加“完整”动画.
let group = CAAnimationGroup()group.animations = [animation]group.duration = duration
即使该组包含3秒长的动画,它也会在1秒后结束,这意味着永远不会显示2秒的偏移“完成”动画.
现在,组动画就像这样说明,在“完整”动画的三分之一后结束:
如果你仔细观察,你会发现这个(没有淡出的部分)是“完整”动画的中间三分之一.
现在该组在所需值之间设置动画动画,可以进一步配置它(组),然后将其添加到图层.例如,如果您希望此“部分”动画反转,重复并具有时序曲线,则可以在组上配置这些内容:
group.repeatCount = HUGEgroup.autoreverses = truegroup.timingFunction = camediatimingFunction(name: "easeInEaSEOut")
使用此附加配置,动画组将如下所示:
作为一个更具体的例子,这是我使用这种技术创建的动画(实际上所有代码都来自该示例),它像钟摆一样来回移动图层.在这种情况下,“完整”动画是沿着完整圆的路径的“位置”动画
总结以上是内存溢出为你收集整理的ios – 沿着bezier路径的一部分为UIView设置动画全部内容,希望文章能够帮你解决ios – 沿着bezier路径的一部分为UIView设置动画所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)