在UIBezier路径的某些部分制作动画 [英] Animating on some part of UIBezier path
问题描述
我有两个UIBezierPath ...
第一个路径显示了往返目的地的总路径，第二个路径是第一个路径的副本，但该副本
基本上我希望飞机停在绿色UIBezier路径结束的那部分，直到
我正在将视频附加到hte链接中，该视频将显示我尝试获取的动画。 http://cl.ly/302I3O2f0S3Y
还问类似的问题是通过UIBezierPath移动CALayer
此处是相关代码
重写func viewDidLoad（）{
super。 viewDidLoad（）
让endPoint = CGPointMake（fullFlightLine.frame.origin.x + fullFlightLine.frame.size.width，fullFlightLine.frame.origin.y + 100）
self.layer = CALayer（）
self.layer.contents = UIImage（named： Plane）?. CGImage
self.layer.frame = CGRectMake（fullFlightLine.frame.origin。 x-10，fullFlightLine.frame.origin.y + 10，120，120）
self.path = UIBezierPath（）
self.path.moveToPoint（CGPointMake（fullFlightLine.frame.origin .x，fullFlightLine.frame.origin.y + fullFlightLine.frame.size.height / 4））
self.path.addQuadCurveToPoint（endPo int，controlPoint：CGPointMake（self.view.bounds.size.width / 2，-200））
self.animationPath = self.path.copy（）为！ UIBezierPath
让w =（viewModel？.completePercentage）作为CGFloat！
// //让animationRectangle = UIBezierPath（rect：CGRectMake（fullFlightLine.frame.origin.x-20，fullFlightLine.frame.origin.y-270，fullFlightLine.frame.size.width * w，fullFlightLine.frame.size .height-20））
//让currentContext = UIGraphicsGetCurrentContext（）
// CGContextSaveGState（currentContext）
// self.animationPath.appendPath（animationRectangle）
//自我。 animationPath.addClip（）
// CGContextRestoreGState（currentContext）
self.shapeLayer = CAShapeLayer（）
self.shapeLayer.path = path.CGPath
self.shapeLayer .strokeColor = UIColor.redColor（）。CGColor
self.shapeLayer.fillColor = UIColor.clearColor（）。CGColor
self.shapeLayer.lineWidth = 10
self.animationLayer = CAShapeLayer（）
self.animationLayer.path = animationPath.CGPath
self.animationLayer.strokeColor = UIColor.greenColor（）。CGColor
self.animationLayer.strokeEnd = w
self。动画ionLayer.fillColor = UIColor.clearColor（）。CGColor
self.animationLayer.lineWidth = 3
fullFlightLine.layer.addSublayer（shapeLayer）
fullFlightLine.layer.addSublayer（animationLayer）
fullFlightLine.layer.addSublayer（self.layer）
}
覆盖func viewDidAppear（动画：Bool）{
super.viewDidAppear（动画）
updateAnimationForPath（self.animationLayer）
}
func updateAnimationForPath（pathLayer：CAShapeLayer）{
let animation：CAKeyframeAnimation = CAKeyframeAnimation（keyPath： position ）
animation.path = pathLayer.path
animation.calculationMode = kCAAnimationPaced
animation.delegate =自我
animation.duration = 3.0
self.layer.addAnimation（动画，forKey： bezierPathAnimation）
}
}
扩展Int {
var degreeToRadians：CGFloat {
return CGFloat（self ）* CGFloat（M_PI）/ 180.0
}
}
您的动画路径正确无误。现在唯一的问题是，您要将关键路径动画的路径设置为整个贝塞尔曲线路径：
animation.path = pathLayer.path
如果您希望动画仅覆盖该路径的一部分，您有两个选择： 。
或者，将整个动画包装在持续时间较短的CAAnimationGroup中。例如，如果将三秒钟的动画包装在一个两秒钟的动画组中，它将停止播放过程的三分之二。
I have two UIBezierPath...
First path shows the total path from to and fro destination and the second path is a copy of the first path but that copy should be a percentage of the first path which I am unable to do.
Basically I would like the plane to stop at the part where green UIBezier path ends and not go until the past green color.
I am attaching a video in hte link that will show the animation I am trying to get. http://cl.ly/302I3O2f0S3Y
Also a similar question asked is Move CALayer via UIBezierPath
Here is the relevant code
override func viewDidLoad() {
super.viewDidLoad()
let endPoint = CGPointMake(fullFlightLine.frame.origin.x + fullFlightLine.frame.size.width, fullFlightLine.frame.origin.y + 100)
self.layer = CALayer()
self.layer.contents = UIImage(named: "Plane")?.CGImage
self.layer.frame = CGRectMake(fullFlightLine.frame.origin.x - 10, fullFlightLine.frame.origin.y + 10, 120, 120)
self.path = UIBezierPath()
self.path.moveToPoint(CGPointMake(fullFlightLine.frame.origin.x, fullFlightLine.frame.origin.y + fullFlightLine.frame.size.height/4))
self.path.addQuadCurveToPoint(endPoint, controlPoint:CGPointMake(self.view.bounds.size.width/2, -200))
self.animationPath = self.path.copy() as! UIBezierPath
let w = (viewModel?.completePercentage) as CGFloat!
// let animationRectangle = UIBezierPath(rect: CGRectMake(fullFlightLine.frame.origin.x-20, fullFlightLine.frame.origin.y-270, fullFlightLine.frame.size.width*w, fullFlightLine.frame.size.height-20))
// let currentContext = UIGraphicsGetCurrentContext()
// CGContextSaveGState(currentContext)
// self.animationPath.appendPath(animationRectangle)
// self.animationPath.addClip()
// CGContextRestoreGState(currentContext)
self.shapeLayer = CAShapeLayer()
self.shapeLayer.path = path.CGPath
self.shapeLayer.strokeColor = UIColor.redColor().CGColor
self.shapeLayer.fillColor = UIColor.clearColor().CGColor
self.shapeLayer.lineWidth = 10
self.animationLayer = CAShapeLayer()
self.animationLayer.path = animationPath.CGPath
self.animationLayer.strokeColor = UIColor.greenColor().CGColor
self.animationLayer.strokeEnd = w
self.animationLayer.fillColor = UIColor.clearColor().CGColor
self.animationLayer.lineWidth = 3
fullFlightLine.layer.addSublayer(shapeLayer)
fullFlightLine.layer.addSublayer(animationLayer)
fullFlightLine.layer.addSublayer(self.layer)
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
updateAnimationForPath(self.animationLayer)
}
func updateAnimationForPath(pathLayer : CAShapeLayer) {
let animation : CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
animation.path = pathLayer.path
animation.calculationMode = kCAAnimationPaced
animation.delegate = self
animation.duration = 3.0
self.layer.addAnimation(animation, forKey: "bezierPathAnimation")
}
}
extension Int {
var degreesToRadians : CGFloat {
return CGFloat(self) * CGFloat(M_PI) / 180.0
}
}
Your animation for traveling a path is exactly right. The only problem now is that you are setting the key path animation's path to the whole bezier path:
animation.path = pathLayer.path
If you want the animation to cover only part of that path, you have two choices:
Supply a shorter version of the bezier path, instead of
pathLayer.path.Alternatively, wrap the whole animation in a CAAnimationGroup with a shorter duration. For example, if your three-second animation is wrapped inside a two-second animation group, it will stop two-thirds of the way through.
这篇关于在UIBezier路径的某些部分制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
