如何为结束点和控制点设置动画 SWIFT
How to animate the end and the control points SWIFT
我的视图中有一个 CAShapeLayer,它具有 Bezierpath 实例的 CGPath 转换路径。我现在想为结束和两个控制点设置动画,例如该行的末尾正在移动(不停止)。怎么做?我查看了 CABasicAninmations 但没有了解如何访问终点。与持续时间动画相同。如何让这一切在无尽的时间里发生。
您可以使用 CADisplayLink
(类似于 NSTimer
,除了动画帧更新的最佳时间)并更新 CAShapeLayer
的 path
。
例如:
var displayLink: CADisplayLink?
var startTime: CFAbsoluteTime?
let duration = 2.0
var shapeLayer: CAShapeLayer?
override func viewDidLoad() {
super.viewDidLoad()
shapeLayer = CAShapeLayer()
shapeLayer?.fillColor = UIColor.clearColor().CGColor
shapeLayer?.strokeColor = UIColor.blueColor().CGColor
shapeLayer?.lineWidth = 10
shapeLayer?.frame = view.bounds
view.layer.addSublayer(shapeLayer!)
startTime = CFAbsoluteTimeGetCurrent()
displayLink = CADisplayLink(target: self, selector: "handleDisplayLink:")
displayLink?.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSRunLoopCommonModes)
}
func handleDisplayLink(displayLink: CADisplayLink) {
let elapsed = CFAbsoluteTimeGetCurrent() - startTime!
let percent = (elapsed % duration) / duration
let path = UIBezierPath()
let startPoint = CGPoint(x: 0, y: view.bounds.size.height / 2.0)
let controlPoint = CGPoint(x: view.bounds.size.width / 20, y: view.bounds.size.height * CGFloat(0.5 + sin(percent * M_PI * 2.0) / 2.0))
let endPoint = CGPoint(x: view.bounds.size.width - 1, y: view.bounds.size.height / 2.0)
path.moveToPoint(startPoint)
path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)
shapeLayer?.path = path.CGPath
}
产生:
这里有一些可能性。
提前配置好动画,即生成一系列图画,就像卡通的单元格一样,并使用这些图像的简单UIImageView动画。
使用 CAShapeLayer 并在两个 path
值之间设置动画。不幸的是,这不能让您完全控制中间帧,但您可以使用关键帧动画来提供中间帧,从而提供额外的控制。
为绘图的实际点设置动画。这是最难配置的,但它是真正的动画,它使您可以完全控制动画。这就是我在这里所做的:我通过创建自定义动画 属性 来做到这一点 - 在本例中,属性 代表三角形底点的 x 位置。您必须为 所有 要设置动画的点执行此操作。
我的视图中有一个 CAShapeLayer,它具有 Bezierpath 实例的 CGPath 转换路径。我现在想为结束和两个控制点设置动画,例如该行的末尾正在移动(不停止)。怎么做?我查看了 CABasicAninmations 但没有了解如何访问终点。与持续时间动画相同。如何让这一切在无尽的时间里发生。
您可以使用 CADisplayLink
(类似于 NSTimer
,除了动画帧更新的最佳时间)并更新 CAShapeLayer
的 path
。
例如:
var displayLink: CADisplayLink?
var startTime: CFAbsoluteTime?
let duration = 2.0
var shapeLayer: CAShapeLayer?
override func viewDidLoad() {
super.viewDidLoad()
shapeLayer = CAShapeLayer()
shapeLayer?.fillColor = UIColor.clearColor().CGColor
shapeLayer?.strokeColor = UIColor.blueColor().CGColor
shapeLayer?.lineWidth = 10
shapeLayer?.frame = view.bounds
view.layer.addSublayer(shapeLayer!)
startTime = CFAbsoluteTimeGetCurrent()
displayLink = CADisplayLink(target: self, selector: "handleDisplayLink:")
displayLink?.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSRunLoopCommonModes)
}
func handleDisplayLink(displayLink: CADisplayLink) {
let elapsed = CFAbsoluteTimeGetCurrent() - startTime!
let percent = (elapsed % duration) / duration
let path = UIBezierPath()
let startPoint = CGPoint(x: 0, y: view.bounds.size.height / 2.0)
let controlPoint = CGPoint(x: view.bounds.size.width / 20, y: view.bounds.size.height * CGFloat(0.5 + sin(percent * M_PI * 2.0) / 2.0))
let endPoint = CGPoint(x: view.bounds.size.width - 1, y: view.bounds.size.height / 2.0)
path.moveToPoint(startPoint)
path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)
shapeLayer?.path = path.CGPath
}
产生:
这里有一些可能性。
提前配置好动画,即生成一系列图画,就像卡通的单元格一样,并使用这些图像的简单UIImageView动画。
使用 CAShapeLayer 并在两个
path
值之间设置动画。不幸的是,这不能让您完全控制中间帧,但您可以使用关键帧动画来提供中间帧,从而提供额外的控制。为绘图的实际点设置动画。这是最难配置的,但它是真正的动画,它使您可以完全控制动画。这就是我在这里所做的:我通过创建自定义动画 属性 来做到这一点 - 在本例中,属性 代表三角形底点的 x 位置。您必须为 所有 要设置动画的点执行此操作。