App maken: ook jij kunt het leren!

 

de iOS Academie Forums

Forums - iOS Academie - Algemeen: Bewegen van een UIImageView langs een pad

Max Kievits  Op de eerste vier stappen van zijn/haar studiekaart scoort Max 70%. Klokje22 okt 2015, 22:02
Avatar
Avatar
Berichten:26
Fans:3


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

Reageer


Admin Roelf  Klokje23 okt 2015, 09:41
Avatar


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")

}

}


Reageer

Leuk! 2 personen vinden vinden dit leuk.

Max Kievits  Op de eerste vier stappen van zijn/haar studiekaart scoort Max 70%. Klokje28 okt 2015, 15:50
Avatar
Avatar
Berichten:26
Fans:3


Hallo Roelf,

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

Groetjes,

 

Max

Reageer