Question

我对这个简单的线条动画有点挣扎。我想出了如何暂停它，但我需要的是能够从我调用函数resetAnimation（）的那一刻起动画回到起点。

let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
    let pathLayer = CAShapeLayer()

     func lineAnimation() {

        let path = UIBezierPath()
        let screenWidth = self.view.bounds.width
        let screenHeight = self.view.bounds.height
        path.moveToPoint(CGPointMake(screenWidth, screenHeight / 2))
        path.addLineToPoint(CGPointMake(screenWidth - screenWidth, screenHeight / 2))

        self.pathLayer.frame = self.view.bounds
        self.pathLayer.path = path.CGPath
        self.pathLayer.strokeColor = UIColor.whiteColor().CGColor
        self.pathLayer.fillColor = nil
        self.pathLayer.lineWidth = 3.0
        self.pathLayer.lineCap = kCALineCapRound
        self.pathLayer.speed = 1

        self.view.layer.addSublayer(pathLayer)

        self.pathAnimation.duration = 5.0
        self.pathAnimation.fromValue = 0.0
        self.pathAnimation.toValue = 1.0

        pathLayer.addAnimation(pathAnimation, forKey: "animate")

    }

    func pauseAnimation() {

        let pausedTime = pathLayer.convertTime(CACurrentMediaTime(), fromLayer: nil)
        pathLayer.speed = 0
        pathLayer.timeOffset = pausedTime

    }

    func resetAnimation() {


    }

Answer 1

您只需要创建一个新动画并删除旧动画。新动画的起点将是表示层中该属性的当前值。我还建议将形状图层的边框设置为实际贝塞尔曲线形状的边界而不是整个视图 - 当你开始移动物体并缩放/旋转等时，这是一个很好的习惯。否则，您将面临一系列时髦的转换或锚点更改。

这就是我要做的事情：

let pathLayer = CAShapeLayer()

// first, separate your drawing code from your animation code.
// this way you can call animations without instantiating new objects
func drawLine() {
    let path = UIBezierPath()
    // draw your path with no position translation.. move the layer
    path.moveToPoint(CGPointMake(view.bounds.width, 0))
    path.addLineToPoint(CGPointMake(0, 0))
    pathLayer.frame = path.bounds
    // this line sets the position of the layer appropriately
    pathLayer.position = view.bounds.width - pathLayer.bounds.width / 2
    pathLayer.path = path.CGPath
    pathLayer.strokeColor = UIColor.whiteColor().CGColor
    pathLayer.fillColor = nil
    pathLayer.lineWidth = 3.0
    pathLayer.lineCap = kCALineCapRound
    view.layer.addSublayer(pathLayer)
}

func lineAnimation() {
    let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
    pathAnimation.duration = 5.0
    pathAnimation.fromValue = 0.0
    pathAnimation.toValue = 1.0
    pathLayer.addAnimation(pathAnimation, forKey: "strokeEnd")

}

func reverseAnimation() {
    let revAnimation = CABasicAnimation(keyPath: "strokeEnd")
    revAnimation.duration = 5.0
    // every Core Animation has a 'presentation layer' that contains the animated changes
    revAnimation.fromValue = pathLayer.presentationLayer()?.strokeEnd
    revAnimation.toValue = 0.0
    pathLayer.removeAllAnimations()
    pathLayer.addAnimation(revAnimation, forKey: "strokeEnd")
}

请注意，您还需要设置属性，以便保留动画的结束值。

Answer 2

您还可以使用autoreverses所遵循的CAMediaTiming协议的CABasicAnimation属性

CABasicAnimation反向（向后）

2 个答案: