用于动画的动态UIBezierPath

时间:2016-04-18 04:25:43

标签: ios swift animation core-animation paint-code

我想创建一个动画,其中一个对象沿着path设置其动画的位置。我遇到的麻烦是使path动态意味着它适用于所有屏幕尺寸。

上面的GIF中的太空船跟随着一个" U"最初形成path

我用这个" U"形状path并且它有效,这是代码:

func animateAlongPath() {
    // Create and add image to view
    let myImage = UIImage(named: "myImage")!
    let myImageView = UIImageView(image: myImage)

    myImageView.frame = CGRect(x: 100, y: 100, width: myImage.size.width, height: myImage.size.height)
    holderView.addSubview(myImageView)

    // Create "U" shape path for animation (path code created in PaintCode)
    let path = UIBezierPath()
    path.moveToPoint(CGPointMake(59.5, 81.5))
    path.addCurveToPoint(CGPointMake(66.5, 91.5), controlPoint1: CGPointMake(63.64, 84.13), controlPoint2: CGPointMake(62.62, 85.9))
    path.addCurveToPoint(CGPointMake(81.5, 110.5), controlPoint1: CGPointMake(72.31, 99.88), controlPoint2: CGPointMake(75.91, 103.08))
    path.addCurveToPoint(CGPointMake(109.5, 142.5), controlPoint1: CGPointMake(88.44, 119.71), controlPoint2: CGPointMake(102.39, 135.23))
    path.addCurveToPoint(CGPointMake(145.5, 156.5), controlPoint1: CGPointMake(122.47, 155.76), controlPoint2: CGPointMake(129.15, 157.54))
    path.addCurveToPoint(CGPointMake(237.5, 81.5), controlPoint1: CGPointMake(185.04, 153.99), controlPoint2: CGPointMake(237.5, 81.5))

    let pathAnimation = CAKeyframeAnimation(keyPath: "position")
    pathAnimation.path = path.CGPath // Use "U" shape path for animation
    pathAnimation.calculationMode = kCAAnimationPaced
    pathAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
    pathAnimation.duration = 1
    pathAnimation.removedOnCompletion = false
    pathAnimation.fillMode = kCAFillModeForwards

    myImageView.layer.addAnimation(pathAnimation, forKey: nil)
    myImageView.layer.position = path.currentPoint
}

问题是UIBezierPath不是动态的。它在iPhone 6设备屏幕尺寸上运行良好,但在任何其他设备尺寸上都不能很好地工作,因为它是静态的。我尝试使用PaintCode创建带变量的动态路径,但却无法使其工作。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

PaintCode可以使用框架为可调整大小的UIBezierPaths生成代码。

Bezier 放入 Frame 对象中,然后设置所需的自动调整弹簧(全部灵活)。生成的代码将使用CGRect / NSRect进行参数化,并使用相对系数来计算贝塞尔点。

如果您想深入了解,还有一个视频教程about Dynamic Shapes

PaintCode Bezier in Frame