I am creating a rotating knob button in iOS. The graphics designer gave me png layers so I am using an image context to allow blending of the layers.
On rotations, only some of the layers get rotated. My goal is to animate these rotations.
Currently, I am using
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
- (BOOL)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
in these methods I compute the required rotation of the image and draw it.
This works fine. The hurdle I have is that in
- (BOOL)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
I want to do a “snap to” animation. How can I do this?
I am not sure how I can use an affine transformation in this case due to the blending. The following method is how I build the image:
- (UIImage *)knobImageWithRadians:(float)radians
{
UIImage *i05 = [UIImage imageNamed:@"05 - Metal Over Empty Space - ROTATE ME.png"];
UIImage *i04 = [UIImage imageNamed:@"04 - Inner Knob.png"];
UIImage *i03 = [UIImage imageNamed:@"03 - Over Knob Metal - (OVERLAY BLEND) - ROTATE ME.png"];
UIImage *i02 = [UIImage imageNamed:@"02 - Numbers and Dashes - ROTATE ME.png"];
UIImage *i01 = [UIImage imageNamed:@"01 - Reflective Overlay - (COLOR DODGE BLEND).png"];
CGSize size = i11.size;
UIGraphicsBeginImageContext(size);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(bitmap, size.width/2, size.height/2);
[i04 drawInRect:CGRectMake(-i04.size.width/2, -i04.size.height/2, i04.size.width, i04.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
CGContextRotateCTM(bitmap, radians);
[i03 drawInRect:CGRectMake(-i03.size.width/2, -i03.size.height/2, i03.size.width, i03.size.height) blendMode:kCGBlendModeOverlay alpha:1.0];
[i02 drawInRect:CGRectMake(-i02.size.width/2, -i02.size.height/2, i02.size.width, i02.size.height) blendMode:kCGBlendModeNormal alpha:1.0];
CGContextRotateCTM(bitmap, -radians);
[i01 drawInRect:CGRectMake(-i01.size.width/2, -i01.size.height/2, i01.size.width, i01.size.height) blendMode:kCGBlendModeColorDodge alpha:1.0];
UIImage* blendedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return blendedImage;
}
UPDATE:
right now, I am simply letting it snap directly without any animation.
You’ll have to animate this yourself by periodically redrawing the image at the new angle. OR come up with visuals that only use source over compositing so you can have each image in a separate layer.