App maken: ook jij kunt het leren!

---

Hallo,

Ik ben bezig met het maken van een achtbaan simulator-spelletje, en daarbij wil ik eej UIImageView (een karretje) laten bewegen/animeren langs een bepaald pad (de baan). Ik heb overal op internet al dingen proberen te zoeken, en heel vaak kwam ik UIBezierPath tegen. Kunnen jullie mij misschien verder helpen, en/of uitleggen hoe ik dit het beste kan aanpakken?

 

Groetjes,

 

Max

---

---

Max,

Voor zoiets heb je het Core Animation Framework nodig.

Maak een nieuwe Single View App en vervang ViewController.swift door de volgende programmacode, voor een korte demo. Succes!

 

//

//  ViewController.swift

//  PathAnimatie

//

//  Created by Developer on 23-10-15.

//  Copyright © 2015 www.iosacademie.nl. All rights reserved.

//

import UIKit

class ViewController: UIViewController {

  

  var subview: UIView!

  var tapGestureRecognizer: UITapGestureRecognizer!

  override func viewDidLoad() {

    super.viewDidLoad()

    // We maken een kleine blauwe subview:

    subview = UIView(frame: CGRectMake(50, 50, 50, 50))

    subview.backgroundColor = UIColor.blueColor()

    view.addSubview(subview)

    // Aan de subview hangen we een tap-gesturerecognizer:

    // Zodra de subview wordt aangeraakt, wordt de methode

    // .animeerLangsUIBezierpath() aangeroepen.

    tapGestureRecognizer = UITapGestureRecognizer(target: self, action: "animeerLangsUIBezierPath")

    subview.addGestureRecognizer(tapGestureRecognizer)

  }

  func animeerLangsUIBezierPath() {

    // We laten de view oneindig vaak het path volgen: de

    // tapGestureRecognizer hebben we dus niet meer nodig.

    subview.removeGestureRecognizer(tapGestureRecognizer)

    // Dit is het path dat de view gaat volgen:

    let path = UIBezierPath(roundedRect: CGRect(origin: subview.center, size: CGSizeMake(200, 200)), byRoundingCorners: UIRectCorner.AllCorners, cornerRadii: CGSizeMake(100,100))

    

    // We gebruiken Core Animation. Dit framework werkt

    // niet met views, maar met layers:

    let subviewLayer = subview.layer

    // Layers beschikken over een .position-property:

    // een CGPoint. Deze property animeren we:

    let pathAnimatie = CAKeyframeAnimation(keyPath: "position")

    

    pathAnimatie.duration = 3 // De tijdsduur, in seconden

    pathAnimatie.repeatCount = Float.infinity // De animatie loopt oneindig vaak

    // Core Animation werkt met CGPath,

    // niet met UIBezierPath:

    pathAnimatie.path = path.CGPath

    // Hiermee vindt de animatie gelijkelijk plaats. Verander

    // maar eens in kCAAnimationLinear en kijk naar het verschil

    pathAnimatie.calculationMode = kCAAnimationPaced

    

    // We laten de view (of liever gezegd, de layer) roteren:

    pathAnimatie.rotationMode = kCAAnimationRotateAuto

    // Tot slot animeren we de layer:

    subviewLayer.addAnimation(pathAnimatie, forKey: "movingAnimation")

  }

}

---

---

Hallo Roelf,

Bedankt voor je reactie! In mijn project werk ik nog met Objective-C, dus ik ga dit eventjes omzetten. 

Groetjes,

 

Max

---