2016-04-18 10 views
1

オブジェクトがpathに沿ってその位置をアニメートするアニメーションを作成したいと思います。私が抱えている問題は、これをすべての画面サイズで動作することを意味する動的な意味であるpathです。アニメーションの動的UIBezierPath

上記の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を使って変数で動的パスを作成しようとしましたが、動かすことができません。

アイデア?

+0

あなたはスケールがあなたのパスに変換を適用することができませんでしたか? – nielsbot

+0

@nielsbot応答してくれてありがとう!私はそれをどうやってやるか分からない。例を教えてください。 – JEL

答えて

0

PaintCodeは、フレームを使用して、サイズ変更可能なコードUIBezierPathsを生成できます。

フレームオブジェクト内ベジェを入れ、次いで、所望の自動サイズスプリング(すべてフレキシブル)を設定します。結果コードはCGRect/NSRectでパラメータ化され、相対係数を使用してベジェポイントを計算します。

さらに詳細を知りたい場合は、ビデオチュートリアルabout Dynamic Shapesもあります。

PaintCode Bezier in Frame

関連する問題