[英]Animating a CAShapeLayer / CAGradientLayer
This is an addition to a question that I asked yesterday.这是我昨天问的一个问题的补充。 The result worked perfect, but I would like a modification.
结果很完美,但我想要修改。 Using drawRect to draw & animate two graphs.
使用 drawRect 绘制和动画两个图形。 A background graph, and a foreground graph
一个背景图和一个前景图
The following code, based on the thread above, produces a CABasicAnimation that grows the dark blue "triangle."下面的代码基于上面的线程,生成一个 CABasicAnimation,它增长了深蓝色的“三角形”。 Instead of a dark blue solid color, I would like this to be a CAGradientLayer with 3 stops: Red / Green / Blue.
我希望它不是深蓝色纯色,而是具有 3 个停靠点的 CAGradientLayer:红色/绿色/蓝色。
I tried adding a CAGradientLayer to configure the gradient, then used addSubLayer to add the gradient to the CAShapeLayer that animates out.我尝试添加一个 CAGradientLayer 来配置渐变,然后使用 addSubLayer 将渐变添加到动画出来的 CAShapeLayer。 The result that I am posting below does not animate.
我在下面发布的结果没有动画。 The color and shape just remain static.
颜色和形状只是保持静态。 The gradient looks great, just need for it to animate out:
渐变看起来很棒,只需要让它动画出来:
import UIKit
import QuartzCore
import XCPlayground
let view = UIView(frame: CGRect(x: 0, y: 0, width: 521, height: 40))
view.backgroundColor = UIColor.whiteColor()
XCPlaygroundPage.currentPage.liveView = view
let maskPath = UIBezierPath()
maskPath.moveToPoint(CGPoint(x: 0, y: 30))
maskPath.addLineToPoint(CGPoint(x: 0, y: 25))
maskPath.addLineToPoint(CGPoint(x: 300, y: 10))
maskPath.addLineToPoint(CGPoint(x: 300, y: 30))
maskPath.closePath()
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.CGPath
maskLayer.fillColor = UIColor.whiteColor().CGColor
let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40))
let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 97, height: 40))
let backgroundGray = CAShapeLayer()
backgroundGray.path = maskPath.CGPath
backgroundGray.fillColor = UIColor.grayColor().CGColor
let foregroundGradient = CAShapeLayer()
foregroundGradient.mask = maskLayer
foregroundGradient.backgroundColor = UIColor.clearColor().CGColor
let gradientLayer = CAGradientLayer()
gradientLayer.startPoint = CGPointMake(0, 0)
gradientLayer.endPoint = CGPointMake(1, 0)
gradientLayer.frame = maskPath.bounds
let colors = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor, UIColor.blueColor().CGColor]
gradientLayer.colors = colors
foregroundGradient.addSublayer(gradientLayer)
view.layer.addSublayer(backgroundGray)
view.layer.addSublayer(foregroundGradient)
let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = rectToAnimateFrom.CGPath
animation.toValue = rectToAnimateTo.CGPath
animation.duration = 2
animation.removedOnCompletion = false
animation.fillMode = kCAFillModeForwards
foregroundGradient.addAnimation(animation, forKey: nil)
I need the foregroundGradient object (with the gradientLayer sublayer!) to animate from left to right.我需要foregroundGradient 对象(带有gradientLayer 子层!)从左到右设置动画。
If you remove the gradient from my code above, and keep foregroundGradient as a solid color, you'll see the animating.如果您从我上面的代码中删除渐变,并将 foregroundGradient 保留为纯色,您将看到动画。
I think you have to use your mask
in your view as mention below.我认为你必须在你的观点中使用你的
mask
,如下所述。
//Remove below line
view.layer.addSublayer(backgroundGray)
//Add your mask to view
view.layer.mask = backgroundGray
the whole function looks like this:整个函数如下所示:
func getGradientView() {
let view = UIView(frame: CGRect(x: 0, y: 50, width: 521, height: 40))
view.backgroundColor = UIColor.grayColor()
self.view.addSubview(view)
let maskPath = UIBezierPath()
maskPath.moveToPoint(CGPoint(x: 0, y: 30))
maskPath.addLineToPoint(CGPoint(x: 0, y: 25))
maskPath.addLineToPoint(CGPoint(x: 300, y: 10))
maskPath.addLineToPoint(CGPoint(x: 300, y: 30))
maskPath.closePath()
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.CGPath
maskLayer.fillColor = UIColor.whiteColor().CGColor
let rectToAnimateFrom = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 0, height: 40))
let rectToAnimateTo = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 300, height: 40))
let backgroundGray = CAShapeLayer()
backgroundGray.path = maskPath.CGPath
backgroundGray.fillColor = UIColor.grayColor().CGColor
let foregroundGradient = CAShapeLayer()
foregroundGradient.mask = maskLayer
foregroundGradient.backgroundColor = UIColor.clearColor().CGColor
let gradientLayer = CAGradientLayer()
gradientLayer.startPoint = CGPointMake(0, 0)
gradientLayer.endPoint = CGPointMake(1, 0)
gradientLayer.frame = maskPath.bounds
let colors = [UIColor.redColor().CGColor, UIColor.greenColor().CGColor, UIColor.blueColor().CGColor]
gradientLayer.colors = colors
foregroundGradient.addSublayer(gradientLayer)
//Remove below line
//view.layer.addSublayer(backgroundGray)
view.layer.addSublayer(foregroundGradient)
//Add you mask to view
view.layer.mask = backgroundGray
let animation = CABasicAnimation(keyPath: "path")
animation.fromValue = rectToAnimateFrom.CGPath
animation.toValue = rectToAnimateTo.CGPath
animation.duration = 1
animation.repeatCount = 1000
animation.removedOnCompletion = false
animation.fillMode = kCAFillModeForwards
maskLayer.addAnimation(animation, forKey: "fill animation")
}
Let me know if its working as per your exceptions.让我知道它是否按照您的例外工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.