ios – 沿着bezier路径的一部分为UIView设置动画

ios – 沿着bezier路径的一部分为UIView设置动画,第1张

概述我正在尝试沿着bezier路径的一部分动画UIView.我发现了一种使用此代码将视图移动到路径的任何部分的方法: let animation = CAKeyframeAnimation(keyPath: "position")animation.path = trackPath.cgPathanimation.rotationMode = kCAAnimationRotateAutoan 我正在尝试沿着bezIEr路径的一部分动画UIVIEw.我发现了一种使用此代码将视图移动到路径的任何部分的方法:

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设置动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1007621.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存