CODEWITHSUNDEEP
iphonecore-animation
kiran kumar
kiran kumar

Reputation: 1359

how to rotate CALayer at one point

how to rotate CALayer at one selected point.

Upvotes: 20

Views: 17715

Answers (3)

Valentin Shamardin
Valentin Shamardin

Reputation: 3658

enter image description here

  1. Define your sublayer that you want to rotate;
  2. Set its bounds, position in superlayer and anchorPoint. anchorPoint has relative coordinates and points to an anchorPoint. Your sublayer will rotate around this anchorPoint;
  3. Add transformation.

For example, to rotate a sublayer on its superview top center point around sublayer's bottom center, use this code:

    // 1
    let rect = CGRect(x: 0,
                      y: 0,
                      width: 20,
                      height: 20)
    let path = UIBezierPath(rect: rect)
    let sublayer = CAShapeLayer()
    sublayer.fillColor = UIColor.green.cgColor
    sublayer.path = path.cgPath
    superlayer.addSublayer(sublayer)

    // 2
    sublayer.bounds = rect
    sublayer.position = CGPoint(x: superlayer.bounds.size.width/2, y: 0)
    sublayer.anchorPoint = CGPoint(x: 0.5, y: 1)

    // 3
    let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
    rotationAnimation.toValue = 2*CGFloat.pi
    rotationAnimation.duration = 3
    rotationAnimation.fillMode = kCAFillModeForwards
    rotationAnimation.isRemovedOnCompletion = false
    sublayer.add(rotationAnimation, forKey: nil)

Upvotes: 7

Ben
Ben

Reputation: 2992

Check out the CA documentation here.

You want to set the transform to a CATransform3DRotate, for example:

CATransform3D current = myLayer.transform;
myLayer.transform = CATransform3DRotate(current, DEGREES_TO_RADIANS(20), 0, 1.0, 0);

Upvotes: 0

warrenm
warrenm

Reputation: 31792

CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DTranslate(transform, rotationPoint.x-center.x, rotationPoint.y-center.y, 0.0);
transform = CATransform3DRotate(transform, rotationAngle, 0.0, 0.0, -1.0);
transform = CATransform3DTranslate(transform, center.x-rotationPoint.x, center.y-rotationPoint.y, 0.0);

Where center is the center of your layer, rotationAngle is in radians (positive is counterclockwise), and rotationPoint is the point about which you wish to rotate. center and rotationPoint are in the coordinate space of the containing view.

Upvotes: 37

Related Questions