2016-04-18 1 views
1

Je veux créer une animation où un objet anime sa position le long d'une path. Le problème que j'ai fait ce path sens dynamique qui fonctionne sur toutes les tailles d'écran.dynamique UIBezierPath Animations pour

Le vaisseau spatial dans le gif ci-dessus suit une forme de « U » path initialement.

J'utilise cette forme de « U » path et il fonctionne, voici le code:

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 
} 

Le problème est que le UIBezierPath est pas dynamique. Il fonctionne très bien sur la taille de l'écran de l'appareil iPhone 6, mais ne fonctionne pas très bien sur toute autre taille de l'appareil, car il est statique. J'ai essayé d'utiliser PaintCode pour créer des chemins dynamiques avec des variables, mais je n'arrive tout simplement pas à le faire fonctionner.

Des idées?

+0

ne pouvait pas vous appliquer une échelle de transformation sur votre chemin? – nielsbot

+0

@nielsbot Merci d'avoir répondu! Je ne suis pas sûr de savoir comment je ferais ça. Pourriez-vous fournir un exemple? – JEL

Répondre

0

PaintCode peut générer du code pour redimensionnable UIBezierPaths en utilisant Cadres.

Mettre le Bezier l'intérieur d'un cadre objet, puis fixés les ressorts de redimensionnement automatique désirées (toute flexible). Le code résultant sera paramétré avec CGRect/NSRect et utilisera des coefficients relatifs pour calculer les points de Bézier.

Il y a aussi un didacticiel vidéo about Dynamic Shapes si vous voulez approfondir vos connaissances.

PaintCode Bezier in Frame