如何动画结束和控制点SWIFT

问题描述:

我有一个CAShapeLayer在我的视图中,它具有CGPath铸造的Bezierpath实例的路径。我现在想要动画结束和两个控制点,例如该行的结尾正在移动(不停止)。怎么做?我看着CABasicAninmations,但没有得到如何访问终点。与有持续时间的动画相同。如何让这发生在无尽的时间。如何动画结束和控制点SWIFT

+0

http://stackoverflow.com/a/30292047/2303865 –

您可以使用CADisplayLink(它就像是NSTimer,除了动画帧更新的最佳时间外)并更新CAShapeLayerpath


例如:

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 
} 

即产率:

enter image description here

这里有一些可能性。

  • 配置预先动画,即,通过产生一系列附图,就像一个卡通的细胞,并使用这些图片的简单的UIImageView动画。

  • 使用CAShapeLayer和两个path值之间的动画。不幸的是,这并不能让你完全控制中间帧,但你可以使用关键帧动画来提供中间帧,从而提供额外的控制。

  • 动画绘制的实际点。这是最难配置的,但它是真正的动画,它可以让你完全控制动画。这就是我在这里所做的:我通过创建一个自定义动画属性来实现它 - 在这种情况下,它是一个表示三角形底点的x位置的属性。你必须这样做所有你想要动画的点。

enter image description here

+0

你能共享的源代码,你实施的第三个选项,请? – Vitaly

+0

@Vitaly https://github.com/mattneub/Programming-iOS-Book-Examples/tree/master/bk2ch04p165customAnimatableProperty3 – matt