0

In a super view I have 12 subview, these 12 subview are arranged as a wheel like color wheel. I'd like to rotate all subview around the center of the superview, I borrow the code from other thread from this site:

// Set up path movement
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.calculationMode = kCAAnimationPaced
pathAnimation.fillMode = kCAFillModeForwards
pathAnimation.removedOnCompletion = false
pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
pathAnimation.duration = 3.0

// Create a circle path
let curvedPath = CGPathCreateMutable()
let circleContainer = CGRectMake(self.colorWheelCenter.x - self.colorWheelRadius, self.colorWheelCenter.y - self.colorWheelRadius, self.colorWheelRadius * 2, self.colorWheelRadius * 2)
CGPathAddEllipseInRect(curvedPath, nil, circleContainer)
// var rotationTransform = CGAffineTransformMakeRotation(CGFloat(2 * PI * 1 / 12))
// CGPathAddEllipseInRect(curvedPath, &rotationTransform, circleContainer)
pathAnimation.path = curvedPath

subview1.layer.addAnimation(pathAnimation, forKey:"myCircleAnimation1")
subview2.layer.addAnimation(pathAnimation, forKey:"myCircleAnimation1")
// and other subview

No problem I can rotate the subview, however all the subview start from the position 0 degree, but I want these 12 subview start from their original position and also end in their original position, how to do it? Should I set up the initial point in path? How? Or I should use a transform? Thanks.

5
  • If all you want to do is rotate, then my advice would be: don't use a keyframe animation. Just use a normal basic animation and rotate (animating a change in the transform, as you say). But if you do use a keyframe animation with a path, then yes, that path needs to start and end differently for each of the segments. Or even better if they are all to rotate together at the same time, then just rotate their common superlayer!
    – matt
    Apr 14, 2015 at 3:15
  • You are Matt :) If not to use keyframe animation, the basic animation you mentioned is to use CABasicAnimation? If so, it is about rotating the superview or the subview? I'd like to move the subview (around the centre of the wheel), but I don't know how to create the circular path in CABasicAnimation to subview. Apr 14, 2015 at 4:06
  • When you apply a rotation transform to a layer, it rotates around its anchor point. So put the anchor point at the centre of the circle. Like how I rotate the compass arrow in my book: apeth.com/iOSBook/ch17.html#_using_a_cabasicanimation
    – matt
    Apr 14, 2015 at 4:11
  • Here comes another question, the coordinate of the anchor point is normalised to a range of 0 to 1, though we can give it -2 or +3, any way to transfer the centre CGPoint to the anchor point of the subview layer? Apr 14, 2015 at 9:18
  • Not sure what you're asking. You can convert coordinate systems from one layer to another (convertPoint:fromLayer: etc.) and you can normalize by simple arithmetic.
    – matt
    Apr 14, 2015 at 14:42

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.