动画贝塞尔直线
Animate bezier straight lines
我想知道如何为像跷跷板一样的贝塞尔直线设置动画。有人可以建议吗?动画参考 link 它应该是什么样子 (https://www.youtube.com/watch?v=bjCx128BZK8)。
你没有说你是如何渲染这个 UIBezierPath
,但是如果你将它添加为 CAShapeLayer
你可以只应用 CAKeyframeAnimation
到它:
// create simple path
let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 50, y: view.bounds.size.height / 2))
path.addLineToPoint(CGPoint(x: view.bounds.size.width - 50, y: view.bounds.size.height / 2))
// create `CAShapeLayer` from that path
let layer = CAShapeLayer()
layer.path = path.CGPath
layer.lineWidth = 10
layer.strokeColor = UIColor.blueColor().CGColor
layer.fillColor = UIColor.clearColor().CGColor
view.layer.addSublayer(layer)
// animate it
let animation = CAKeyframeAnimation(keyPath: "transform")
var values = [NSValue]()
for var x: CGFloat = 0.0; x < CGFloat(M_PI * 4); x += CGFloat(M_PI * 4 / 100.0) {
var transform = CATransform3DMakeTranslation(view.frame.size.width/2, view.frame.size.height/2, 0.0)
transform = CATransform3DRotate(transform, sin(x) / 3.0, 0.0, 0.0, 1.0)
transform = CATransform3DTranslate(transform, -view.frame.size.width/2, -view.frame.size.height/2, 0.0)
values.append(NSValue(CATransform3D: transform))
}
animation.duration = 2
animation.values = values
layer.addAnimation(animation, forKey: "transform")
结果:
或者您可以将 CAShapeLayer
添加到视图,然后使用基于块的 UIView
动画来旋转视图。基本思路是一样的。
如果您想做一些更复杂的事情,您可以使用 CADisplayLink
,为 CAShapeLayer
更新 path
(如概述 here)或更新UIView
子类使用的属性,然后调用 setNeedsDisplay
.
我想知道如何为像跷跷板一样的贝塞尔直线设置动画。有人可以建议吗?动画参考 link 它应该是什么样子 (https://www.youtube.com/watch?v=bjCx128BZK8)。
你没有说你是如何渲染这个 UIBezierPath
,但是如果你将它添加为 CAShapeLayer
你可以只应用 CAKeyframeAnimation
到它:
// create simple path
let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 50, y: view.bounds.size.height / 2))
path.addLineToPoint(CGPoint(x: view.bounds.size.width - 50, y: view.bounds.size.height / 2))
// create `CAShapeLayer` from that path
let layer = CAShapeLayer()
layer.path = path.CGPath
layer.lineWidth = 10
layer.strokeColor = UIColor.blueColor().CGColor
layer.fillColor = UIColor.clearColor().CGColor
view.layer.addSublayer(layer)
// animate it
let animation = CAKeyframeAnimation(keyPath: "transform")
var values = [NSValue]()
for var x: CGFloat = 0.0; x < CGFloat(M_PI * 4); x += CGFloat(M_PI * 4 / 100.0) {
var transform = CATransform3DMakeTranslation(view.frame.size.width/2, view.frame.size.height/2, 0.0)
transform = CATransform3DRotate(transform, sin(x) / 3.0, 0.0, 0.0, 1.0)
transform = CATransform3DTranslate(transform, -view.frame.size.width/2, -view.frame.size.height/2, 0.0)
values.append(NSValue(CATransform3D: transform))
}
animation.duration = 2
animation.values = values
layer.addAnimation(animation, forKey: "transform")
结果:
或者您可以将 CAShapeLayer
添加到视图,然后使用基于块的 UIView
动画来旋转视图。基本思路是一样的。
如果您想做一些更复杂的事情,您可以使用 CADisplayLink
,为 CAShapeLayer
更新 path
(如概述 here)或更新UIView
子类使用的属性,然后调用 setNeedsDisplay
.