Animate Rotation/Scale/Translate of UIImage at the same time - objective-c

I am new to objective-c and I want to add an image to the screen, tweening it like in AS3, moving it from one end to the other of the screen while rotating around its own center point.
I tried with
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
// TRANSFORM SCREENSHOT
screenShotView.transform = CGAffineTransformRotate(screenShotView.transform, -M_PI * 0.05);
screenShotView.transform = CGAffineTransformScale(screenShotView.transform, 0.6, 0.6);
screenShotView.transform = CGAffineTransformTranslate(screenShotView.transform,
self.webView.frame.origin.x,
self.webView.frame.origin.y - self.webView.frame.size.height * 0.3
);
but with this code the image rotates around the center of the TransformIdentity. So while rotating and moving the rotation gets out of controll and the image isn't exactly at the position I loved it to be.
What is the right way to rotate and translate at the same time, translating the rotation center with the image?
and at least after transformation I want to add a close button to the right upper corner of the image. for that I need the new coordinates of the corner, too.
thnx!

I now ended with the following code, but I still don't know if this is the state of the art solution.
CGAffineTransform translate = CGAffineTransformMakeTranslation(self.webView.frame.origin.x,self.webView.frame.origin.y - self.webView.frame.size.height * 0.25);
CGAffineTransform scale = CGAffineTransformMakeScale(0.6, 0.6);
CGAffineTransform transform = CGAffineTransformConcat(translate, scale);
transform = CGAffineTransformRotate(transform, degreesToRadians(-10));
[UIView beginAnimations:#"MoveAndRotateAnimation" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:2.0];
screenShotView.transform = transform;
[UIView commitAnimations];

IOS 7's preferred way to do this would be using a block object. It has several advantages compared to the 'older' way of animating. Especially that it can make use of multi-core and video co-processing. Also the 'built-in' call back part (the completion part) is very useful, as it keeps any necessary state information and links to objects as needed.
CGAffineTransform translate = CGAffineTransformMakeTranslation(self.webView.frame.origin.x,self.webView.frame.origin.y - self.webView.frame.size.height * 0.25);
CGAffineTransform scale = CGAffineTransformMakeScale(0.6, 0.6);
CGAffineTransform transform = CGAffineTransformConcat(translate, scale);
transform = CGAffineTransformRotate(transform, degreesToRadians(-10));
// animation using block code
[UIView animateWithDuration:2.0
delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
screenShotView.transform = transform;
}completion:^(BOOL finished){
// do something if needed
}];

Related

Move and resize UILabel with CGAfficeTransform

Basically I want to move a UILabel up 20px and resize it to 55% of it's original size.
=> x stays the same, y,height, width decrease.
What I came up is following :
//_line a UILabel*
CGFloat scaleFactor = 0.55f;
[UIView animateWithDuration:1.0 animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(0, -20);
transform = CGAffineTransformScale(transform, scaleFactor, scaleFactor);
_line.transform = transform;
}];
Unfortunately I don't get the expected result. It (slightly) moves up but also moves to the right.
What am I missing ?
The problem is that you're using Auto Layout. Auto Layout and view transforms are enemies of one another. You perform the transform, but then Auto Layout kicks in and changes the frame of the label essentially back to what it was.
The problem is that you're overwriting the transform. You initially set transform to the translation transformation, and then before anything has happened you reset it to the scale transformation. So all it's doing is the scale action.
Instead you need to combine the two matrices and store their combination into transform. Try this:
CGFloat scaleFactor = 0.55f;
[UIView animateWithDuration:1.0 animations:^{
CGAffineTransform translationTransform = CGAffineTransformMakeTranslation(0, -20);
CGAffineTransform scaleTransform = CGAffineTransformMakeScale(scaleFactor, scaleFactor);
CGAffineTransform totalTransform = CGAffineTransformConcat(translationTransform, scaleTransform);
_line.transform = totalTransform;
}];
This did the job fob me : a second translation
CGFloat scaleFactor = 0.55f;
CGFloat x_delta = _line.frame.size.width * (1-scaleFactor);
CGFloat y_delta = _line.frame.size.height * (1-scaleFactor);
[UIView animateWithDuration:1.0 animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(0, -20);
transform = CGAffineTransformScale(transform, scaleFactor, scaleFactor);
transform = CGAffineTransformTranslate(transform, -x_delta, -y_delta);
_line.transform = transform;
}];

How do i shrink an image horizontally using CGAffineTransform?

I've been using CABasicAnimation to move around images. Now I need to take a view and shrink it horizontally. On the web I see some people using CGAffineTransform to shrink/grow images proportionally. I need the view to shrink horizontally ONLY. See image below:
Any help with this would be greatly appreciated!
CGAffineTransformMakeScale(sx,sy) will do the work.
CGAffineTransform a = CGAffineTransformMakeScale(0.4, 1.0);
editingView.transform = a;
You can use [UIView animateWithDuration:animations:completion:]; if you want it to be animated.
CGAffineTransform a = CGAffineTransformMakeScale(0.4, 1.0);
[UIView animateWithDuration:0.5
animations:^{
editingView.transform = a;
}
completion:^(BOOL finished) {
/* do something after the animation */
}];

Obj-C: It changes center before rotating

It's my code:
[UIView animateWithDuration:0.4f
delay:0.1f
options:UIViewAnimationOptionCurveEaseOut
animations:^{
CGAffineTransform rotate = CGAffineTransformMakeRotation( 30.0 / 180.0 * 3.14 );
[needleBig setTransform:rotate];
}
completion:^(BOOL finished){
}];
And it's the pictures before and after rotating:
It seems it changes center before rotating, but I don't want it.
A rotation created with CGAffineTransformMakeRotation(angle) makes a rotation of the coordinate system around its origin. The docs say "angle = The angle, in radians, by which this matrix rotates the coordinate system axes."
From your pictures it looks as if the origin of your coordinate system is somewhere at the top left corner of the square enclosing your clock.
You can rotate about any other point if you set the view's layer's anchorPoint property accordingly.
This worked:
needleBig.layer.anchorPoint=CGPointMake(0.5f, 0.5f);
[UIView animateWithDuration:0.4f
delay:0.01f
options:UIViewAnimationOptionCurveEaseOut
animations:^{
CGAffineTransform rotate = CGAffineTransformMakeRotation(180.0f * (M_PI / 180.0f));
[needleBig setTransform:rotate];
}
completion:^(BOOL finished){
}];

iOS view transform animation

I'm probably missing something simple, but trying to do a simple "Ken Burns Effect" with an image view.
First the code:
[UIView animateWithDuration:20
delay:2
options:UIViewAnimationCurveLinear
animations:^{
CGAffineTransform move = CGAffineTransformMakeTranslation(40, 40);
CGAffineTransform zoom = CGAffineTransformMakeScale(1.2, 1.2);
CGAffineTransform transform = CGAffineTransformConcat(zoom, move);
self.imageView.transform = transform;
}
completion:^(BOOL finished){
NSLog(#"Done");
}];
I expected this to start with the image view at normal scale and expand it to 120% of the size over 20 seconds. What actually happens is that it starts out immediately smaller than normal size, then expands to normal size.
If I use the reciprocal of the scale value, it starts out zoomed in and then zooms out to normal scale which is the opposite of the effect I want.
Any ideas?
Ok, this actually worked and does what I want.
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:#"transform"];
transformAnimation.duration = 20.0;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transformAnimation.removedOnCompletion = NO;
transformAnimation.fillMode = kCAFillModeForwards;
CATransform3D xform = CATransform3DIdentity;
xform = CATransform3DScale(xform, 1.2, 1.2, 1.0);
xform = CATransform3DTranslate(xform, 60, -60, 0);
transformAnimation.toValue = [NSValue valueWithCATransform3D:xform];
[self.imageView.layer addAnimation:transformAnimation forKey:#"transformAnimation"];
It sounds like the view is being re-laid out by its parent view in response to the change in transform, casing it to be scaled down to the end result of the transform as soon as the transform is set in the animation block. The key is that your first attempt makes changes directly to the view, while the second approach works with the layer.
Have you try starting form the current transform of your imageView ?
[UIView animateWithDuration:20
delay:2
options:UIViewAnimationCurveLinear
animations:^{
CGAffineTransform trans = self.imageView.transform;
CGAffineTransformTranslate(trans, 40, 40);
CGAffineTransformScale(trans, 1.2, 1.2);
self.imageView.transform = trans;
}
completion:^(BOOL finished){
NSLog(#"Done");
}];

List examples of how to "briefly draw attention" to an object on screen in iOS?

In iOS, how can one briefly draw attention to an object on screen? Suppose, create a brief glow or cause a shadow to appear and then disappear?
For the purposes of this question, let's define "object on screen" as an instance of UIImageView.
Also, if possible provide an example of how to draw attention to a button.
Most people list code, but I'm sticking to describing some examples;
I've seen objects briefly grow and shrink back to their normal size to draw attention
Bejeweled (a Popcap game) lets diamonds briefly 'shine' (as if sunlight passed over it) to give you a subtle hint
I've seen certain applications use a hand or a fictive character point to a certain object briefly
And of course, you could always introduce a talking paperclip to tell you what's what.
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.1f];
yourView.transform = CGAffineTransformMakeScale(1.1, 1.1);
[UIView commitAnimations];
Or, of course the same thing with a block animations. And after the attention got away from your view you can use :
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.1f];
yourView.transform = CGAffineTransformIdentity;
[UIView commitAnimations];
Here is a simple hop animation...
- (void)drawAttn
{
float jumpHeight = 20.0;
CGPoint originalPoint = objectForAttn.center;
CGPoint jumpPoint = CGPointMake(objectForAttn.center.x, objectForAttn.center.y - jumpHeight);
[UIView animateWithDuration:0.20 delay:0.0 options:UIViewAnimationOptionAutoreverse animations:^{
[objectForAttn setCenter:jumpPoint];
} completion:^(BOOL finished) {
/* do other stuff after hop */
}];
}
My app QCount (free in the store, tap a "wrong" number 3 times) uses a fade animation as follows:
(note I wrote this when I was REALLY new to iOS, so there is probably a more compact way to write it)
aLabel = // a UILabel I get from somewhere
aColor = aLabel.backgroundColor;
[UIView animateWithDuration:0.2
delay: 0.0
options: UIViewAnimationOptionCurveEaseOut
animations:^{
aLabel.alpha = 0.0;
}
completion:^(BOOL finished){
// Wait .2 seconds and then fade in the view
[UIView animateWithDuration:.2
delay: 0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
aLabel.alpha = 1.0;
}
completion:nil];
}];
There are lots of options: hopping, underlining, vibrating, blinking, rotating, scaling, endarkening around, and their combinations.
But IMO, shine effect on "slide to unlock" text is excellent.
You can check it out here:
iPhone "slide to unlock" animation
I wanted to draw attention to a label whose value had changed. This simple animation produces a nice 'I've changed' animation...
//copy the label
UILabel *newPageLabel = [[UILabel alloc] initWithFrame:_countLabel.frame];
[newPageLabel setFrame:CGRectOffset(newPageLabel.frame, 0, 0)];
newPageLabel.text = _countLabel.text;
newPageLabel.textAlignment = _countLabel.textAlignment;
newPageLabel.backgroundColor = _countLabel.backgroundColor;
newPageLabel.textColor = _countLabel.textColor;
newPageLabel.font = _countLabel.font;
//scale and fade out the copied label
[self.navigationController.toolbar addSubview:newPageLabel];
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionLayoutSubviews
animations:^{
newPageLabel.transform = CGAffineTransformMakeScale(2,2);
newPageLabel.alpha = 0;
}
completion:^(BOOL finished){
[newPageLabel removeFromSuperview];
}
];