Trying to zoom in / out an imageView.
i've managed that successfully so now i'm trying to place some buttons on the view and when button tapped to zoom on that area.
How can i implement that?
here is my code so far
-(void)zoomHere:(UIButton *)sender{
NSLog(#"zoom in");
//[self performSelector:#selector()
// withObject:nil
// afterDelay:1.6f];
CGAffineTransform transformer = CGAffineTransformScale(imageView.transform, 1.05, 1.05);
if (transformer.a < 5) {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.2];
imageView.transform = transformer;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
}
}
and the view did load
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *buttonView = [[UIView alloc]initWithFrame:CGRectMake(00.0, 20.0, 768, 1004.0)];
zoomHere = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[zoomHere addTarget:self
action:#selector(zoomHere:)
forControlEvents:UIControlEventTouchDown];
[zoomHere setTitle:#"ZoomIN" forState:UIControlStateNormal];
zoomHere.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[buttonView addSubview:zoomHere];
buttonView.multipleTouchEnabled = YES;
[self.view addSubview:buttonView];
}
It still zoom in but not on that area where the button sits on screen!
if you want to use scale transform, you probably should use translate transform as welllike this:
CGAffineTransform scale = CGAffineTransformMakeScale(1.05, 1.05);
CGAffineTransform translate = CGAffineTransformMakeTranslation(10, 20);
CGAffineTransform delta = CGAffineTransformConcat(scale, translate);
imageView.transform = CGAffineTransformConcat(imageView.transform, delta);
this is how you know the position of button on your image view:
[imageView convertPoint:button.center fromView:self.view]
so if you know button's coordinates and your current scale then you can calculate new translate transformBut as for me, i would rather use scroll view to zoom in and zoom out that image view. You can have nice bouncing animations and zooming animations, also you can have pan and pinch, but of cource it is up to you.
Related
After I had set an image to an UIButton called bigIcon, I put it inside animateWithDuration with the change of its frame, then I ran the code, the button size changed instantly (has no animation), but it move from origin to destination slowly (has animation), how can I solve this problem? I found out that if I did set an image to the button this problem will disappear.
here is the code:
- (void)bigImage:(MCGodCell *)godCell withImage:(UIImage *)image {
self.bigIcon = [UIButton new];
self.bigIcon.adjustsImageWhenHighlighted = NO;
[self.bigIcon setBackgroundImage:image forState:UIControlStateNormal];
CGFloat iconX = self.tableView.frame.size.width / 2.0;
CGFloat iconY = self.tableView.frame.size.height / 2.0;
self.bigIcon.frame = CGRectMake(iconX, iconY, 1, 1);
[self.tableView addSubview:self.bigIcon];
CGFloat iconW = self.tableView.frame.size.width;
CGFloat iconH = iconW;
iconY = (self.view.frame.size.height - iconH) / 2.0;
[UIView animateWithDuration:0.3 animations:^{
self.bigIcon.frame = CGRectMake(0, iconY, iconW, iconH);
}];
}
You're not seeing the frame change because you're trying to animate it immediately after adding it to the view hierarchy.
UIKit needs to add the button as a subview, and then run the animation on the next UI update pass.
Wrap your animation block inside a dispatch_async block like this:
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.3 animations:^{
self.bigIcon.frame = CGRectMake(0, iconY, iconW, iconH);
}];
});
I have created custom buttons and worked with custom UIViews in the past. However I am not sure how to go about with this.
I am trying to create something similar to the twitter heart animation.
What I am unable to get is those tiny colored circles around the heart as shown in this gif:
https://dribbble.com/shots/2416983-Twitter-Heart-Animation
Any ideas?
Also is it possible for me to simply have a gif and add the gif as a custom view in a UIButton and play the gif when button is pressed?
Here's a concept:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UIView *bubble = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 16.0, 16.0)];
bubble.layer.cornerRadius = 8.0;
bubble.center = self.view.center;
bubble.backgroundColor = [UIColor greenColor];
[self.view addSubview:bubble];
UIView *heart = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 100.0)];
heart.layer.cornerRadius = 50.0;
heart.center = self.view.center;
heart.backgroundColor = [UIColor blueColor];
[self.view addSubview:heart];
[UIView animateKeyframesWithDuration:2.0
delay:0.0
options:UIViewKeyframeAnimationOptionRepeat
animations:^{
// Heart expands
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.10 animations:^{
heart.transform = CGAffineTransformMakeScale(1.3, 1.3);
}];
// Heart contracts.
[UIView addKeyframeWithRelativeStartTime:0.15 relativeDuration:0.25 animations:^{
heart.transform = CGAffineTransformMakeScale(1.0, 1.0);
}];
// Bubble travels.
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.4 animations:^{
CGPoint destination = self.view.center;
destination.x += 100;
destination.y -= 100;
bubble.center = destination;
}];
// Bubble shrinks.
[UIView addKeyframeWithRelativeStartTime:0.6 relativeDuration:0.2 animations:^{
bubble.transform = CGAffineTransformMakeScale(0.3, 0.3);
}];
// Bubble fades.
[UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
bubble.alpha = 0.0;
}];
} completion:nil];
}
To get the full effect, you will need to add any a few more key frames so the bubble curves around before the fade. Given that you have a couple of bubbles, it might be a good idea to create a key frame generator.
Alternatively, you can use SKEmitterNode and add real particles to your button.
Late Answer but useful to other developers.
Here is the Link for exact same animation: https://github.com/xhamr/fave-button
Same Animation in Objective-C also: https://github.com/tljackyi/fave-button
I want to fix the moving custom imageview marker in the center of the google map irrespective of the location coordinates. If the user move with car on map I want it to keep showing up in the center without any flickering in marker and new location on that marker shows,If it is possible then How can I do that? Please help out. Thanks
I am using this code display on Map:
UIImageView *sampleImgView = [[UIImageView alloc]init];
sampleImgView.center = myMapView.center;
sampleImgView.backgroundColor = [UIColor clearColor];
[myMapView addSubview:sampleImgView];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.8f];
sampleImgView.transform = CGAffineTransformMakeRotation(45);
[UIView commitAnimations];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.3f];
sampleImgView.transform = CGAffineTransformMakeRotation(0);
[UIView commitAnimations];
CGPoint ImgCenter = sampleImgView.center;
CGRect frameRect = sampleImgView.frame;
frameRect.size.width = 30.0f;
frameRect.size.height = 30.0f;
sampleImgView.image = [UIImage imageNamed:#"car.png"]; // place your own vehicle image
sampleImgView.center = ImgCenter;
sampleImgView.frame = frameRect;
i am using iOS google map sdk(objective-c)
I have round button which consists of the following image
Now on rotation of device I want to rotate the button in a way that the image maintains the orientation.
How can I achieve this,
I do not want to change the frame of the button i want it to stay where it is I just want to transform the button.
If you have an IBOutlet Object.
theButton.transform = CGAffineTransformMakeRotation(M_PI / -4);
If you want to create run time button on view.
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *btn=[UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn setFrame:CGRectMake(100, 100, 200, 44)];
btn.transform=CGAffineTransformMakeRotation(M_PI / -4);
[btn setTitle:#"RakeshBhatt" forState:UIControlStateNormal];
[self.view addSubview:btn];
}
To rotate a image view try this
// Set the anchor point and center so the view swings from the upper right
imageView.layer.anchorPoint = CGPointMake(1.0, 0.0);
imageView.center = CGPointMake(CGRectGetWidth(self.view.bounds), 0.0);
// Rotate 90 degrees to hide it off screen
CGAffineTransform rotationTransform = CGAffineTransformIdentity;
rotationTransform = CGAffineTransformRotate(rotationTransform, DegreesToRadians(90));
swingView.transform = rotationTransform;
What am I trying to do:
I want to make a button that scales up or down depending on it's current state which is determined by it either being big or small.
When button is big and I press it, it becomes small. When the button is small and I press it, it becomes big.
The button must contain a image of a QR code and subsequently be scannable by a QR reader.
My problem:
Is that the image is blurry when big. This isn't the case if I put the image inside a ImageView instead of a button.
The effect is best described here:
http://imgur.com/a/h3rJg#0
The Code:
Button/Image Declaration
UIImage* image = [QREncoder encode:user];
// declare image - QREncoder can be found on github
UIImage *strechedBackground = [image stretchableImageWithLeftCapWidth:220 topCapHeight:220];
UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
CGFloat qrSize = self.view.bounds.size.width - kPadding * 2;
CGRect largeFrame = CGRectMake(kPadding, (self.view.bounds.size.height - qrSize) / 2,
qrSize, qrSize);
imageView.frame = largeFrame;
[imageView layer].magnificationFilter = kCAFilterNearest;
//[self.view addSubview:imageView];
// add qr button to the view
self.qrButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.qrButton.frame = largeFrame;
[self.qrButton setBackgroundImage:image forState:UIControlStateNormal];
[self.qrButton addTarget:self
action:#selector(aMethod)
forControlEvents:UIControlEventTouchDown];
self.qrButton.contentMode = UIViewContentModeCenter;
[self.view addSubview:self.qrButton];
Button/Image Scale Function
- (void)aMethod{
// some variables concerned with button sizes and dimensions
CGFloat qrSize = self.view.bounds.size.width - kPadding * 2;
CGRect largeFrame = CGRectMake(kPadding, (self.view.bounds.size.height - qrSize) / 2,
qrSize, qrSize);
CGFloat smallButtonWidth = 33.0;
CGFloat smallButtonHeight = 33.0;
CGFloat largeButtonWidth = 264.0;
CGFloat largeButtonHeight = 264.0;
CGRect smallFrame = CGRectMake(self.view.frame.size.width - smallButtonWidth - kPadding/2, self.view.frame.size.height - smallButtonHeight - kPadding/2, smallButtonWidth, smallButtonHeight);
// a boolean ivar indicates the size of the button
if (!self.qrButtonIsBig){
NSLog(#"Button was Big");
// animate the view...
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
//self.qrButton.transform = CGAffineTransformMakeScale(3, 3);
// resting positon after animation
self.qrButton.frame = smallFrame;
}
completion:nil];
NSLog(#"Button is now Small");
}else{
NSLog(#"Button was Small");
// animate the view...
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.qrButton.transform = CGAffineTransformIdentity;
// resting positon after animation, bottom left with 20 px margin
self.qrButton.frame = largeFrame;
}
completion:nil];
NSLog(#"Button is now Big");
}
self.qrButtonIsBig = !self.qrButtonIsBig;
}
If you need your view to be sharper when it is resized then you need your CALayer class to be a CATiledLayer. you can subclass it in order to define how you will fill your tiles.
Check this question if you want to go this road
check this question if you don't want to use CATiledLayer
Since the ImageView was sharp and ButtonImage blurry. It makes sense to scale the imageview with an invisible button on top as a practical work around rather than trying to get the image to be sharp in the button.