I have problems getting the coordinate convertion from the local view frame to the window right. I have an "Arrow" image that needs to be moved relative to a UIButton on the page when tapped and when the page loads.
The Arrow image (intense name "interfaceApertureSelectionArrow") is initialized in the "didLoadView" method
- (void)viewDidLoad
{
...
//only initial values here, the image i will be moved using the moveImageView:to: function
CGRect apertureSelectorArrowFrame = CGRectMake(300.0f, 125.0f, 30.0f, 30.0f);
[self addImageView:interfaceApertureSelectionLineArrow withFrame:apertureSelectorArrowFrame];
interfaceApertureSelectionLineArrow = [[UIImageView alloc] initWithFrame:apertureSelectorArrowFrame];
[interfaceApertureSelectionLineArrow setImage:[UIImage imageNamed:#"InterfaceSelectionLineArrow#2x"]];
interfaceApertureSelectionLineArrow.opaque = YES;
[self.view addSubview:interfaceApertureSelectionLineArrow];
...
}
For reacting on the button tap I implemented a Button Action, doing the coordinate conversion using the "convertPoint" method. In this case the conversion and arrow placement works works just right (!)
-(IBAction)setAttributeAperture:(id)sender{
UIButton *button = (UIButton *)sender;
CGPoint superPoint = [button.superview convertPoint:button.frame.origin toView:nil];
[self moveImageView:interfaceApertureSelectionLineArrow toCGPoint:CGPointMake(superPoint.x, superPoint.y)];
}
... so far so good. Now here's the problem. When I try to position the arrow next to the "darkButton" coordinates in the viewDidLoad method to show the selection not only on tapping the button but also on loading the view initially the positioning does not work! Here's what I tried.
Added to the viewDidLoad method:
...
CGPoint superPoint = [darkButton.superview convertPoint:darkButton.frame.origin toView:nil];
[self moveImageView:interfaceApertureSelectionLineArrow toCGPoint:CGPointMake(superPoint.x, superPoint.y)];
...
The move function that animates the movement of the arrow's UIImageView (in case this is relevant as well)
-(void)moveImageView:(UIImageView*)thisImageView
toCGPoint:(CGPoint)thisCGPoint{
[UIView beginAnimations:#"UIImage Move" context:NULL];
[UIView setAnimationDuration:1];
CGSize size = thisImageView.frame.size;
thisImageView.frame = CGRectMake(thisCGPoint.x, thisCGPoint.y, size.width, size.height);
[UIView commitAnimations];
}
Checking the CGPoint value before and after the conversion of the darkButton's CGPoint coordinates shows me that is does not change. How come? (as it did work in the "setAttributeAperture" button method)
Related
I am trying to animate UITabBar items by using a UIImageView and setting its frame in the same frame as my UITabBarItem's when the view first renders to the user. In a different project, it works fine on viewDidAppear, logs showing that the frame is in the same frame as the one in my original project (I have 5 items, and the 5th item is always at 333, 1). On my original project, viewDidAppear will return 0, 0 and returns 333, 1 on viewDidLayoutSubviews. I moved the code to animate on viewDidLayoutSubviews and discovered that it gets called twice, and returns 2 values, 0, 0 on the first call, and 333, 1 on the second call.
Is there a way to start the animation after viewDidLayoutSubviews is finished with the second call?
I have tried moving around the animation code in viewWillAppear, viewDidAppear, and viewDidLayoutSubviews.
viewWillAppear and viewDidAppear resulted in the converted CGPoint as the original CGPoint of the tab bar (0, 617).
viewDidLayoutSubviews resulted in the converted CGPoint as the new CGPoint of the Tab Bar (0, 687) on the first call and starts the animation, and the actual frame after the animation is finished on the second call.
The following code is what I have on my viewDidLayoutSubviews:
-(void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
if(self.fromTabBar) {
NSInteger index = 5;
UIImageView *imageView = [[self.tabBar.subviews lastObject].subviews firstObject];
[self startAnimation:imageView withTag:index];
}
}
The following code is for startAnimation:withTag: :
-(void)startAnimation:(UIImageView *)imageView withTag:(NSInteger)tag {
CGPoint point = [imageView.superview convertPoint:imageView.frame.origin toView:self.view];
UIImageView *hexagon = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"vector-profile"]];
[hexagon setFrame:CGRectMake(point.x, point.y, imageView.frame.size.width, imageView.frame.size.height)];
hexagon.alpha = 0;
[self.view addSubview:hexagon];
[UIView animateWithDuration:0.5 animations:^{
imageView.transform = CGAffineTransformMakeScale(0.45, 0.45);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 animations:^{
imageView.alpha = 0;
hexagon.alpha = 1;
} completion:nil];
}];
}
the tag parameter is no longer being used in this method.
I expect the output UIImage to be on top of where the intended UITabBarItem image is (In this case, the 5th position in a UITabBar). This has worked on a different project, but my current project seems to process the rendering differently.
so I have a very simple button that when clicked goes to fullscreen and when clicked again goes back to the same position it was initially in. For some reason it works perfectly without the animation. When I uncomment the animation part when I initially click the button it does nothing, the second time I click it slightly enlarges. The third time I click it animates slowly but back to it's smaller original size... Why is it animating the opposite way?
- (IBAction)viewImage1:(id)sender {
UIButton *btn = (UIButton*) sender;
if (btn.tag == 0)
{
CGRect r = [[UIScreen mainScreen] bounds];
/*[UIView animateWithDuration:0.5f delay:0.0f options:0 animations:^{*/
[sender setFrame: r];
/*}completion:nil];*/
btn.tag = 1;
}
else
{
btn.tag = 0;
[sender setFrame:CGRectMake(0,0,370,200)];
}
}
There are two solutions to your problem either of which will work:
Disable Autolayout. (discouraged)
You can do that in Interface Builder by opening the File Inspector
in the right pane and unchecking the respective check box.
However, if you want to use Autolayout for constraining other UI elements in your view (which is quite a good idea in most cases) this approach won't work which is why I would recommend the second solution:
Keep Autolayout enabled, create an outlet for your button in your view controller and set
self.myButton.translatesAutoresizingMaskIntoConstraints = YES;
in your view controller's viewDidLoad method.
You could also add layout constraints to your button and animate those. (This excellent Stackoverflow post explains how it's done.)
The reason for this tricky behavior is that once you enable Autolayout a view's frame is no longer relevant to the actual layout that appears on screen, only the view's layout constraints matter. Setting its translatesAutoresizingMaskIntoConstraints property to YES causes the system to automatically create layout constraints for your view that will "emulate" the frame you set, in a manner of speaking.
It is easier to do this with auto layout and constraints. Create an IBOutlet for the height constraint of your button call it something like btnHeight. Do the same for the width constraint call it something like btnWidth. Then create an IBAction like so:
- (IBAction)buttonPress:(UIButton *)sender {
UIButton *btn = (UIButton *) sender;
CGRect r = [[UIScreen mainScreen] bounds];
if (CGRectEqualToRect(btn.frame, CGRectMake(0.0, 0.0, 370, 200))) {
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
self.btnHeight.constant = r.size.height;
self.btnWidth.constant = r.size.width;
[self.view layoutIfNeeded];
} completion:^(BOOL finished){
}];
}else{
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
self.btnHeight.constant = 200.0;
self.btnWidth.constant = 370.0;
[self.view layoutIfNeeded];
} completion:^(BOOL finished){
}];
}
}
In my experience animating the frame of a UIButton does not work well, a, the only method, I'm aware of, is to use CGAffineTransformScale which will rasterize the title of the button and scale it as well.
I have a 3x3 grid of UIViews with UIGestureRecognizers added to them, arranged like so:
The way it works is that tapping on a square enlarges it 2x using CGAffineTransformScale and overlays that over the other squares. The problem is that the touch area stays the same size as the 1.0 scale for some reason.
I add the squares using
CGRect squareFrame = CGRectMake(1 + squareSpacing + ((squareDimension + squareSpacing) * i), topMargin, squareDimension, squareDimension);
SquareView *square = [[SquareView alloc] initWithFrame:squareFrame];
[square setPosition:i];
square.layer.zPosition = 0;
[self.view addSubview:square];
[squaresArray addObject:square];
The Squares have gesture recognizers added in their init:
fingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(tapped:)];
[self addGestureRecognizer:fingerTap];
The tapped function does the following:
[UIView animateWithDuration:1.0
delay:0.0
usingSpringWithDamping:0.8
initialSpringVelocity:10.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
CGAffineTransform transform = self.transform;
self.transform = CGAffineTransformScale(transform, 2.0, 2.0);
}
completion:nil];
I outlined the touch area in red. I have tried playing with the zPosition but I don't know what to do to make it work, I am stuck. I want to be able to tap the enlarged square anywhere for it to close, but I am limited to the red area.
Thanks in advance.
EDIT: Sorry that the pictures are so large. Code added.
Steven
You might trying bringing the expanded UIView to the front of your parent view so that your tap events aren't captured by any overlapped views:
[parentView bringSubviewToFront:tappedView];
I am performing a task in such a way that I took one image and twenty to thirty rectangular cell button.
For those rectangular cells I named them as 1,2,3,4,5,--------,30. I arranged the rectangular cells in an 6*7 matrix. Now if I click the rectangular cell button 29, the image has to find the shortest path in that matrix to reach that clicked button.
How do I perform this?
You have a single image that you want to animate to the location of one of 30 buttons? Further, you want it to move not in a diagonal, but first horizontally, then vertically? CodaFi's code is quite close to what I would do. I'd write an IBAction method that I would attach to all the buttons. Startig with CodaFi's code as a basis, here's the action method I'd suggest:
-(IBAction)animateImageToButton: (id) sender
{
button = (UIButton *) sender;
//First animate the image to the x position of the button
CGPoint fPoint = CGPointMake(button.center.x, image.center.y);
CGPoint sPoint = button.center;
//animate x position first.
[UIView animateWithDuration: 1.0f animations: ^
{
[image setCenter:fPoint];
}
completion ^(BOOL finished)
{
//Once that animation is complete, create
//a second animation to move to the button's y position
[UIView animateWithDuration: 1.0f animations: ^
{
[image setCenter:sPoint];
}];
}];
}
That code would move a single UIImageView, called Image, onto the button that was tapped.
I would not name the buttons but give them tags. I would use the following scheme:
button.tag = xCoordinate *100 + yCoordinate;
So, for example, for the third button from the left in the top row the tag would be 301. Retrieve the coordinates like this:
xCoordinate = button.tag / 100;
yCoordinate = button.tag % 100;
Now all you have to do is animate the image to the center of the button or some other point near there by changing the x and y coordinates of the image's frame.
I disagree with the tag approach that mundi's layed out, because the images would move in diagonal lines to reach their destination. I imagine a for-loop would be appropriate, so here's my approach:
-(void)animateOnLinesWithClickedButton:(UIButton*)button {
for (UIButton *image in self.view.subviews){
CGPoint fPoint = CGPointMake(button.center.x, image.center.y);
CGPoint sPoint = button.center;
//animate x position first.
[UIView animateWithDuration:1.0f animations:^{
[image setCenter:fPoint];
}
completion^(BOOL finished){
[UIView animateWithDuration:1.0f animations:^{
[image setCenter:sPoint];
}];
}];
}
}
This will animate your buttons one by one to the correct x, then y position. Use the delay variation of this method to create a more realistic effect.
I got this warning:
'UIView' may not respond to 'addSubview:withAnimation:'
The line of code which produce that warning is this:
[self.masterView addSubview:self.detailImage withAnimation:def];
And my relevant code is like this:
ExUIViewAnimationDefinition *def = [[ExUIViewAnimationDefinition alloc] init];
def.type = ExUIAnimationTypeTransition;
def.direction = ExUIAnimationDirectionMoveUp;
[self.masterView addSubview:self.detailImage withAnimation:def];
[def release];
I looked on the UIView documentation, i thought addSubview may be deprecated, but it still like this.
Does any one know how to solve this warning? Thanx in advance.
addSubview is a method UIView will respond to. addSubview:withAnimation: is not a method UIView will respond to.
If you want to add a subview with a fade or something like that, try this:
self.detailImage.alpha = 0.0;
[self.masterView addSubview:self.detailImage];
[UIView animateWithDuration:0.3 animations:^{
self.detailImage.alpha = 1.0;
}];
To add a subview to a parent, call the addSubview: method of the parent view. This method adds the subview to the end of the parent’s list of subviews.
To insert a subview in the middle of the parent’s list of subviews, call any of the insertSubview:... methods of the parent view. Inserting a subview in the middle of the list visually places that view behind any views that come later in the list.
[self.masterView addSubView:self.def];
[def release];
This helped me to animate subview by sliding out from down of border of parent view
-(void) addAnimatadView:(UIView *) animatedView toView:(UIView *)aView {
CGRect frame = animatedView.frame;
float origin = frame.origin.y;
frame.origin.y = aView.frame.size.height;
[animatedView setFrame:frame];
[aView addSubview:animatedView];
frame.origin.y = origin;
[UIView animateWithDuration:0.4 animations:^{[animatedView setFrame:frame];}];
}
Just change frame origins as you want to reach free sliding