I've added some UIImageViews with png images to my view, using interface builder. Initially they are added off-screen.
Later, I animate them onto the screen with CoreAnimation, like so:
[UIView beginAnimations:#"slide" context:nil];
[UIView setAnimationDuration:0.1f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDelegate:self];
image.frame = CGRectMake(81+1, 390, 150, 80);
[UIView commitAnimations];
Once they appear onscreen, they look really blurred or fuzzy.
I've heard of this happening before. Does anyone have any idea how to fix it?
Usually this means that you are positioning the views at fractional pixel values (e.g. 100.5). Make sure you round the coordinates of the position.
Quick fix: Re-order the object in the Objects pane on the left, i.e. send backward, then send forward again. Not sure why this happens, but it fixes it for me.
UIImageViews and other views can appear blurry in Interface Builder (and in your iPhone app) if the images are, as camdez suggests, not at rounded pixel locations. Fixing this can be tricky because Interface Builder will only display the numbers in the inspector as integers. However, let's say you have configured the "Origin" widget in the "View" inspector to allow you to specify the X and Y of the center of the view, rather than the top left. If your blurry view is centered at 100,100 and is 35 pixels high, Interface Builder will internally compute the top left corner of the view as (100-35/2) = 82.5 and write it to your XIB file as a decimal.
The quick fix:
Change the "Origin" widget back to the "Top Left" setting. Move the view within the canvas so that the pixel values are changed, and then type the correct values back in. Problem solved!
Related
I have a UILabel I want to animate growing and shrinking. While the size changes I need the bottom left corner to remain static so that it always appears directly above a bottom toolbar. I am using the following code to make the label grow:
[UIView animateWithDuration:kAnimationDuration delay:0.0 options:UIViewAnimationCurveEaseInOut
animations:^{
CGFloat lblHeight = 42.0f;
[label setFrame:CGRectMake(0.0,
CGRectGetMaxY(self.view.bounds) - kBottomBarHeight - lblHeight,
CGRectGetMaxX(self.view.bounds),
lblHeight)];
} completion:^(BOOL finished) { }];
and to make it shrink I use the same logic except that lblHeight is set to 17.0f
The view correctly grows but when I try to shrink it the frame change animation is not animated. It blips into the new size and then animates into the new origin/location. I need the frame change to be animated. Can anyone see what I'm doing wrong?
After some tinkering I've managed to get the desired behavior by doing the following.
In the expand method, I use the UIView animation to alter the frame.
In the shrink method, I use the UIView animation to alter the bounds and center.
I'm a little baffled as to why this works but trying to shrink with the frame does not. If anyone can share some insight into this that would be great.
You should not really use frames to animate, rather you should use the transform property of your label.
However, since you want one corner to remain static, I think its best you use Core Animation. CALayer has a property called anchorPoint that determines which point a layer will rotate with respect to, and I'm pretty sure it is also valid for grow/shrink effects.
How to implement flip transition effect for UIView as like in "flipboard" application. here i already have sample which will make flip from left to right or right to left. But here i want to implement fold flip from bottom to top or top to bottom.
you can use the below line of codes for this kind of animations
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:5];
[UIView transitionFromView:view2 toView:view1 duration:3 options:UIViewAnimationOptionTransitionFlipFromBottom completion:NULL];
[UIView commitAnimations];
u can set the duration and animation transition as per the requirement.. was working only in ios5..
check this tutorial: http://www.gethugames.in/blog/2012/02/extended-epgltransitionview.html
and this project: https://github.com/saiy2k/EPGLTransitionView
PS: Its my own blog and link to my fork of EPGLTransitionView
Here's a concept of how I would try to approach the problem. Maybe I'll try to implement it in free time to have a sample handy.
The moment you start the animation, make a snapshot of current UIView by reading its graphics context into a bitmap
Create three (yeah, three -- bear with me_) UIViews with sizes so that they make up for two halves of the view to be flipped, with two views for area of the right half
Draw half of the bitmap on the left view (first one), right half on the right view (second one), in their respective drawRect: implementations
Hide the original view
Create the next view we want to transition to
get its contents into a bitmap as well
hide the next view
make the third temporary UIView to draw the right half of the image (third one)
position the third one under the second one
Animate half of the flip of the second one along its left edge
make the second one display left half of the next view
Make the rest of the flip animation
After having done the transition, show the next view, hide all temporary views
Et voilla! At least I hope.
I think that instead of those three UIViews you could use one UIView with three CALayers instead.
And there's an issue of doing the transition interactively, with the user sliding his finger over the pages.
I also I think there's an issue of the flipping view to have a two-sided layer. Haven't had the opportunity to play with those properties and what they can help to achieve.
Another solution would be to create a texture from UIView's contents and put up an OpenGL surface over it (alpha-transparent CAEAGLLayer-based one of course). Then what you'll do with the triangles that are textured with that image is only limited by your imagination. I guess that would also allow to create a Genie-like move-to-trash animation that Mail iOS app uses.
Edit: Oh, sorry, I was thinking of a right-to-left flipboard-style flip, not top-to-bottom, but overall idea is the same of course.
I am creating a view and having it move on to the screen from left to right. I had a hard time getting it to work the way I wanted but when I did I was baffled at the way it worked.
I thought I would have to create the view off screen to the left then use CGAffineTransformTranslate to move it onto the screen. But instead I am creating it on the screen, but it still works great. I am a bit confused.
Here I am creating the view...
profileViewControllerForIPad = [[ProfileViewController alloc] initWithFrame:CGRectMake(0, 0, 512, 446)];
As you can see the origin is 0,0. So on screen, right?
Here is the thransform...
[UIView animateWithDuration:0.5
animations:^{
self.view.transform = CGAffineTransformTranslate(CGAffineTransformIdentity,self.view.frame.size.width, 0.0);
}
];
As you can see I am setting the tx value to the width of the CGAffineTransformTranslate which I thought was the value for the number of pixels you wanted it to move from it's current position, origin.x of 0, which I expected would move it to the middle of the screen somewhere. Instead, it slides right in with it's new origin.x right at 0 where I want it.
BTW CGAffineTransformIdentity works great sliding the view right back off the screen.
Can someone explain this to me. The docs seem to say something different.
Thanks,
John
I think I understand it now. I think it depends on when you execute CGAffineTransformTranslate.
If you are creating the object and call CGAffineTransformTranslate before you add it to it's superview, when you add it to it's superview it will display at a position that will allow it to move to it's defined position the amount and direction defined in the CGAffineTransformTranslate call.
If on the other hand the object you want to move is already being displayed, the object will be moved from it's current position to the new position.
In my case where I was creating a new UIView and wanted it to slide in from the left side of the screen, if I called CGAffineTransformTranslate at the same time that I created and added the view, I would have to define the view's frame at it's final on screen location.
Alternatively one could call CGAffineTransformTranslate in a timer method. In this case you would define the view's frame off screen, add it to the display and create the timer. The timer method would then move it on screen with CGAffineTransformTranslate.
I think you can animate the frame property (- animateWithDuration:animations:) of your viewControllers -view instead of using a transform, which is much easier to use and understand.
As a small project to get myself used to some more iPhone elements I've decided to create a sample in call screen, modeling it on the native iPhone call screen (IOS 4)
However I'm struggling to make out what elements the native in call screen uses to make up the view that is displayed.
I was wondering if someone with more experience on iPhone could help me out by explaining what the various elements are?
Is the bottom part a UIActionSheet that is slightly transparent and with a UIBUtton placed over it? Or is it a slightly transparent imageview with the button over-layed?
Similarly at the top, it looks like its an imageiew with the name or number of the callee/caller and the call duration underneath, would I be correct in thinking that?
The part I'm really interested in is the bit where the icons are held in some sort of dialog in the centre of the screen that is animated to swing around to a keypad when it is selected, is this some sort of iPhone control that I can use or customise?
EDIT:
I've tried two things to try to achieve this so far:
1) I've created a view within a view and I am trying to flip this however I can only seem to get the main view to flip properly and not the view inside it which is the one I want and it doesn't seem to be a good approach.
2) I've tried to look at using the Utility application approach to it but again this seems to be for flipping the full screen and not just a section within a screen (view)
Has anybody got any pointers on what to try next? Or if one of the above methods is the ideal way to do it and should be investigated further?
At a basic level, I would say that the panel of 6 buttons is simply a view with 6 buttons laid out in it as subviews.
The rounded corners and border stroke can be achieved by accessing the view's layer property and the layer's properties for cornerRadius, borderWidth, and borderColor, e.g.
view.layer.cornerRadius = 10;
view.layer.borderWidth = 2;
view.layer.borderColor = [UIColor whiteColor].CGColor;
This requires including the CoreGraphics Framework, and the appropriate header files in your code.
I notice there's a gradient (or it appears to be a gradient) in the border stroke. I am not sure how to achieve that without doing something more involved and clever (such as a containing view that is just slightly larger veritically and horizontally than the view containing the buttons and is filled with a gradient color. The result would be a gradient border, but this doesn't seem like the best way to do that...
The flip is actually pretty easy. You can create a UIView animation with something like this:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
forView:view cache:NO]
[UIView commitAnimations];
Does this help, or at least get you started?
I am rotating a UIImageView in place periodically. My view is very basic, a view inside of a UITabBar view set. If I happen to rotate my iPad while my rotation is animating then my image becomes skewed. I have checked everything I can think of in my xib file for my image, the autoresizing is turned completely off and I am not auto-resizing subviews on the parent view.
Here is my animation code:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationDelay:0.0];
transform = CGAffineTransformMakeRotation(convertToRadian(myDegrees));
myImage.transform = transform;
[UIView commitAnimations];
If I take my animation out then everything works as I would expect. This rotation code appears to work fine if I do not rotate my device.
What can I do to keep the built-in rotation animation from altering my animation and skewing my images?
After many different attempts, what I ended up doing here is adding a clear view with my rotating images inside of it and setting the "auto-resize sub views" to off in interface builder. You can also do this in code as needed. I had to add the UIView placeholder because the super view containing my rotating images needed to auto-resize other view objects on rotation, but this fixed the funky skewing of my images due to animation of orientation change at the same time as animating a manual rotation in place.
Hope this helps someone.
The coordinate system gets changed. I've figured this much out too... thought I had a bug. If you save the CG ... GState, then you can revert back to the coordinate system initially used. This is in Deitel and Deitel's book. I just found it. Wanted to post it for anyone also looking.
You got a clever trick though! I might use it if this won't work.