This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use CGAffineTransformMakeRotation?
I have an imageview that acts like a button, I am looking for a way to show the user that he clicked on it, I came up with this code that will rotate it a bit :
float angle = 60.0;
[UIView animateWithDuration:0.5f animations:^{
customimageView.transform = CGAffineTransformMakeRotation(angle);
}];
but its not doing the behavior I am looking fpr.
Anyone know how can I make the imagekinda zoom in ( or enlarge/ blowup ) to maybe 1.5 its size on its click? what kind of animation is relevant here?
feel free to share behaviors you guys thought was cool in this situation.
Thanks.
As a side note, how can I make it just rotate full circle? I tried passing in 360 but its not doing it??
You can always CGAffineTransformConcat your rotation with a scaling transformation, made with CGAffineTransformMakeScale.
If you're interested in another button pressed effect, I needed something cool, too, and settled on a "throb" animation as follows:
BOOL keepThrobbing = NO;
-(void)buttonThrob:(CGFloat)inset {
UIViewAnimationOptions opts = UIViewAnimationOptionBeginFromCurrentState|UIViewAnimationOptionAllowUserInteraction;
[UIView animateWithDuration:0.2 delay:0.0 options:opts animations:^{
self.button.frame = CGRectInset(self.button.frame, inset, inset);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.2 delay:0.0 options:opts animations:^{
self.button.frame = CGRectInset(self.button.frame, -inset, -inset);
} completion:^(BOOL finished) {
if (finished && keepThrobbing) {
[self buttonThrob:inset];
}
}];
}];
}
Call it like this:
keepThrobbing = YES;
[self buttonThrob:10.0]; // expand/shrink by 10px in x and y
Use CGAffineTransformMakeScale to change the scale.
CustomimageView.transform = CGAffineTransformMakeScale(1.5,1.5);
You can combine two affine transforms with CGAffineTransformConcat:
[customimageView setTransform:CGAffineTransformConcat(CGAffineTransformMakeScale(1.5, 1.5), CGAffineTransformMakeRotation(angle))];
Related
Whilst playing around with UIView animation, I came across a situation where I think some refactoring is needed:
The following views whose opacity are initially set to 0.0f.
Ex:
[UIView animateWithDuration:1.0f
animations:^
{
firstView.layer.opacity = 1.0f;
}
completion:^(BOOL finished)
{
[UIView animateWithDuration:1.0f
animations:^
{
secondView.layer.opacity = 1.0f;
firstView.layer.opacity = 0.0f;
}
completion:^(BOOL finished)
{
[UIView animateWithDuration:1.0f
animations:^
{
thirdView.layer.opacity = 1.0f;
secondView.layer.opacity = 0.0f;
}
completion:^(BOOL finished)
{
thirdView.layer.opacity = 0.0f;
}];
}];
}];
All 3 views are just subclass of UIView's, which are added as subviews of the main view.
This simply animates the opacity of the first view to 1.0f and then that of the second view, and then that of the third view.
Simple. Nothing special here.
My Question is:
What if I had more views, let say 100, that I wanted to perform the same action (same sequence of animation), this block of code would expand and expand.
So for the sake of refactoring and being adhered to good practice of writing code, I thought may be this could be done with less code via the use of a method and perhaps a loop.
Could you enlighten me on this in regards to refactoring; in addition, would dispatch_apply be useful here along with the refactoring process if a loop is needed?
If you wanted to animate 100 images, you would probably want to use 2 views and load alternating images into each one. I recently created a sample app on github that does exactly that:
Animating UIImages with cross-fade opacity changing
I've been reading about UIView animateWithDuration which I'm trying to use so when a button is pressed a graphic appears then slowly fades out (i.e. alpha is set to 0).
I'm using the code below in my viewdidload just for test purposes however its not working:
[UIView animateWithDuration:10 animations:^{
self.completeImage.alpha = 1.0;
self.completeImage.alpha = 0.5;
self.completeImage.alpha = 0.0;
}];
Any ideas?
Thanks.
That is not working because automatically it sets the alpha to 0.0;
The 3 lines of code are executed at the same time (one after the other).
The proper way to use the UView animation block it is like this:
self.completeImage.alpha = 0.0;
[UIView animateWithDuration:2.0
animations:^{
// do first animation
self.completeImage.alpha = 1.0;
}
completion:^(BOOL finished){
[UIView animateWithDuration:2.0
animations:^{
// do second animation
self.completeImage.alpha = 0.0;
}
completion:^(BOOL finished){
;
}];
}];
Hope this achieve what you are looking for.
In addition:
" I'm trying to use so when a button is pressed a graphic appears
then slowly fades out (i.e. alpha is set to 0)."
As per your above information in the question, addition of the code in viewDidLoad will not prove fruitful. You need to add this code in the action target method of your button in order to play the animation on click of a button. Generally if you're using the nib, then the action method will be like below:
-(IBAction)on_pressing_my_button:(id)sender
{
///your animation code goes here..
}
I created some animations in my project. Basically, I use UIView animate and CGAffineTransform, but a very strange thing happened and I have no idea. Hope someone can help me solve this problem. Thanks in advance.
This is the strange thing:
After the user clicks on a button, the button slides off screen and another two buttons slide on the screen (I just changed the center point of these buttons to achieve this animation). And, some time later, a view on the screen start shaking (I use CGAffineTransform to achieve this).
At this moment, the strange thing happens - the button that previous slid off screen show up at its original position again and the other two buttons disappear (No animation, just shows up and disappear).
The following is the related code,
1) Button slide off and slide in animation related code
- (IBAction)start:(id)sender
{
// 1. Slide in cancel and pause button
[UIView animateWithDuration:0.5f animations:^{
[startButton setCenter:CGPointMake(startButton.center.x + 300.0f, startButton.center.y)];
[cancelButton setCenter:CGPointMake(cancelButton.center.x + 300.0f, cancelButton.center.y)];
[pauseButton setCenter:CGPointMake(pauseButton.center.x + 300.0f, pauseButton.center.y)];
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"Move finished");
}
}];
}
2) The view shaking animation related code
- (void)shakeView:(UIView *)viewToShake
{
CGFloat t = 2.0;
CGAffineTransform translateRight = CGAffineTransformTranslate(CGAffineTransformIdentity, t, 0.0);
CGAffineTransform translateLeft = CGAffineTransformTranslate(CGAffineTransformIdentity, -t, 0.0);
viewToShake.transform = translateLeft;
[UIView animateWithDuration:0.07 delay:0.0 options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat animations:^{
[UIView setAnimationRepeatCount:2.0];
viewToShake.transform = translateRight;
} completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
viewToShake.transform = CGAffineTransformIdentity;
} completion:nil];
}
}];
}
This isn't weird, it's a common problem with
auto layout. If you move UI elements by changing frames, then as soon as something else takes place that requires laying out views, the moved views will revert to the position defined by their constraints. To fix it, you either need to turn off auto layout, or do your animations by changing constraints not frames.
I have tried your code in my test project. The problem is probably because you are using Autolayout in your xib.
Please checking your xib file and uncheck the Autolayout property.
I want to make the UIButton image transform from its current size to twice its size and then back to its original size similar to the facebook "like" animation.
I'm using this code but for some reason it is doing the reverse action; i.e. first shrinks and only then getting large again.
What am I doing wrong? It works perfectly on a uiimageView but not on a uibutton
[self.likeButton setClipsToBounds:NO];
CGAffineTransform firstTransform = self.likeButton.imageView.transform;
[UIView animateWithDuration:.15f animations:^{
self.likeButton.imageView.transform = CGAffineTransformScale(firstTransform, 2, 2);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.15f animations:^{
self.likeButton.imageView.transform = firstTransform;
}];
}];
Layers have a property masksToBounds and UIView has clipsToBounds. Most likely the button has these set to YES on the primary view or subviews. Its possible you can discover which ones have these set to YES, and set them temporarily to NO.
If anyone is interested I solved it by adding a uiimageview above the button and animate it instead of the button image.
its a hack but its working.
//set button.masktobound=NO
[UIView animateWithDuration:.15f animations:^{
self.likeButton.imageView.transform = CGAffineTransformMakeScale(2.0,2.0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.15f animations:^{
self.likeButton.imageView.transform = CGAffineTransformMakeScale(1.0,1.0);
}];
}];
//Try this
I have a view which I would like to transform in two ways. First I'd like to move it on its y-axis. Then, I'd like to zoom in on it.
However, when I use the following code, the object is first moved and then moved back to its original position while being zoomed.
Is there a way to apply the two transformation at once without cancelling the first?
Sorry if this is basic, but any help would be very much appreciated!
[UIView animateWithDuration:animationDuration
delay:0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
currentCover.transform = CGAffineTransformMakeTranslation(0, 0-keyboardTop+35);
}
completion:^(BOOL finished) {
[UIView animateWithDuration:animationDuration
delay:0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
[currentCover setTransform:CGAffineTransformMakeScale (1.3, 1.3)];
}
completion:^(BOOL finished) { }
];
}
];
You should multiply one transform by the other. Each transform (scale and translate) are transform matrices. To combine them, simply multiple one by the other before using it. The order of the multiplication determines the order that the tranforms are applied
I'd similar issue where my view moves back to original position.
Documentation of CGAffineTransformMakeTranslation reads "it constructs a new translation matrix from x and y values that specify how much to move the origin." I don't think it applies actual transformation.
I think you'd rather apply translation by calling CGAffineTransformTranslate(). At least it works for me!!
Here we are creating the two changes (CGAffineTransform's) you want to do together, and apply the transformation to the view.
CGAffineTransform translate = CGAffineTransformMakeTranslation(0, 0-keyboardTop+35);
CGAffineTransform scale = CGAffineTransformMakeScale(1.3, 1.3);
CGAffineTransform transform = CGAffineTransformConcat(translate, scale);
[UIView animateWithDuration: animationDuration
delay:0.0
options:UIViewAnimationOptionCurveEaseIn
animations:^{
currentCover.transform = transform;
}completion:^(BOOL finished){
}];