In my iPhone app, I have put a UIBarBUtton of type UIBarButtonSystemItemTrash in my UIToolBar. When pressed, I'd like to replicate the animation of Mail.app: the bin opens, the UIView folds and flies into it.
Is there a way to access this animation ithrough the iPhone SDK?
Presently I am using a custom made animation, but there are some limits; for example, I cannot animate the bin itself.
Do you have any suggestion? Code samples?
Cheers,
Davide
Use the suckEffect type on an animation. Also: spewEffect, genieEffect, unGenieEffect, twist, tubey, swirl, cameraIris, cameraIrisHollowClose, cameraIrisHollowOpen, rippleEffect, charminUltra, zoomyIn, and zoomyOut. Doesn't work in the simulator.
CATransition *animation = [CATransition animation];
animation.type = #"suckEffect";
animation.duration = 2.0f;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
view.opacity = 1.0f;
[view.layer addAnimation:animation forKey:#"transitionViewAnimation"];
Note: Code snippet was pulled from a larger codebase. I hope it works :)
Just to add some info:
You can use "suckEffect" with the standard +[UIView setAnimationTransition:forView:cache:]. Just pass the number 103 to the animationTransition variable. This won't avoid your app being rejected by Apple though :p
"spewEffect", "genieEffect", "unGenieEffect", etc. no longer exist on iPhoneOS 3.x. The only undocumented transition left are "cube" (--), "rippleEffect" (110), the three "cameraIris" effects (105,106,107) and "suckEffect" (103).
See http://www.iphonedevwiki.net/index.php?title=UIViewAnimationState for detail.
Also, to animate the bin (with private API): http://www.iphonedevwiki.net/index.php?title=UIToolbar#Animating_the_trash_can_icon.
Unfortunately, I think this is going to need to be an entirely custom animation. The UIView folding can be approximated using Core Animation, perhaps by adding perspective to the CATransform3D of the UIView's underlying layer to distort the UIView into a trapezoid which gets sucked into the trash can.
As far as the trash can, you can create a UIBarButtonItem using initWithCustomView:, which might let you insert a custom UIView that has an animatable trashcan. It looks like the trash can has two elements, the can base and the lid, which are rotated independently to open and close the can. Draw PNGs for both, make UIImageViews for them, and make them subviews of the UIBarButtonItem custom view. For opening and closing, apply rotational transforms to them to animate the subviews.
I'm not sure if this is an answer but here is lib that do "genie effect" so it's quite similar to what you want achieve.
CGRect endRect = CGRectMake(30, 40, 50, 60);
[view genieInTransitionWithDuration:0.7
destinationRect:endRect
destinationEdge:BCRectEdgeTop
completion:^{
NSLog(#"I'm done!");
}];
Related
Writing up an code for creating table view in such a manner when user scroll table view it behaves like cube. Please find below youtube link for the vision what I am asking for:
http://www.youtube.com/watch?v=hrBxHq83yKQ
Meanwhile, I tried with CATransform3D transform = CATransform3DMakeRotation(angle, 1, 0, 0); and it working for adding up an row at the top but not for scrolling.
Further, due to lack of knowledge of OpenGLES I can not go with it for rotating the cubes with touch gesture. Please suggest for the same as per your feasibility.
Look forward to hear from you.
check it out.. hope it helps you..
Link 1: https://www.cocoacontrols.com/controls/abcustomuinavigationcontroller
Link 2: https://github.com/augustjoki/CubeTabBarController
you can achieve this effects with Layer transform and a scrollview. To build a cube take a look at this post. You might add some overlays to your cube-sides to simulate lightning and you are done.
I got an answer for cubical scrolling. Earlier I was using below source code link:
GestureBasedTableViewDemo
Meanwhile, above tableview demo was using gesture and allow me to only add first row in tableview cell while scrolling down but my requirement was to have cubical scrolling up or down both.
Further, I tried with vertical iCarousel cylindrical and I achieved the vertical cubical scrolling. Thanks
You might also want to check our implementation of a gesture based 3D-cube over at Chubamobile:
http://www.chupamobile.com/products/details/2106/Cube+Selector/
It's fully featured, ready to use out of the box - and pretty much exactly what you want
Maybe it helps.
CATransition *animation = [CATransition animation];
animation.duration = 1;
animation.type = #"cube";
animation.subtype = #"fromRight";
[self.contentView.layer addAnimation:animation forKey:#"animation"];
[self.contentView bringSubviewToFront:view];
or that link http://www.albertopasca.it/whiletrue/objectivec-3d-view-rotation/
Don't dislike - there are few information about it.
I have a CALayer and as sublayer to this CALayer i have added an imageLayer which contains an image of resolution 276x183.
I added a UIPanGestureRecognizer to the main view and calculation the coordinates of the CALayer as follows:
- (void)panned:(UIPanGestureRecognizer *)sender{
subLayer.frame=CGRectMake([sender locationInView:self.view].x-138, [sender locationInView:self.view].y-92, 276, 183);
}
in viedDidLoad i have:
subLayer.backgroundColor=[UIColor whiteColor].CGColor;
subLayer.frame=CGRectMake(22, 33, 276, 183);
imageLayer.contents=(id)[UIImage imageNamed:#"A.jpg"].CGImage;
imageLayer.frame=subLayer.bounds;
imageLayer.masksToBounds=YES;
imageLayer.cornerRadius=15.0;
subLayer.shadowColor=[UIColor blackColor].CGColor;
subLayer.cornerRadius=15.0;
subLayer.shadowOpacity=0.8;
subLayer.shadowOffset=CGSizeMake(0, 3);
[subLayer addSublayer:imageLayer];
[self.view.layer addSublayer:subLayer];
It is giving desired output but a bit slow in the simulator. I have not yet tested it in Device. so my question is - Is it OK to move a CALayer containing an image??
Yes, it is OK to move a CALayer containing an image.
If all you want to do with the panning gesture is move the image, then instead of updating the whole frame, you should just update the layer's position property. Like thus:
- (void)panned:(UIPanGestureRecognizer *)sender {
subLayer.position=CGPointMake([sender locationInView:self.view].x, [sender locationInView:self.view].y);
}
Two things:
First, you can't draw ANY conclusions based on the performance of the simulator. Some things on the simulator are an order of magnitude faster than on a device, and other things are significantly slower. Animation is especially a mixed bag.
If you're doing performance-critical work, test it on the device, early and often.
Second, you can certainly animate a layer using a gesture recognizer, but that is an awfully round-about way to do it. Gesture recognizers are designed to work on views, and it's much easier and cleaner to tie the recognizer to a subview rather than a sub layer.
One of the big problems you will have with using a layer is hit-testing. If you let go of your image, then try to drag it some more, you'll have to have the gesture on the containing view, take the gesture coordinates and do hit testing on the layer. Ugh.
Take a look at the gesture based version of the touches sample app from Apple. It shows you how to cleanly move UIView objects around the screen using gestures.
Note that you can create a view that has custom layer content, and drag that around.
I am trying to develop a simple CATransition that shows an UIView appearing from the left.
Here it is the code:
CATransition *transDerecha=[CATransition animation];
[transDerecha setDuration:1];
[transDerecha setStartProgress:0];
[transDerecha setType:kCATransitionMoveIn];
[transDerecha setSubtype:kCATransitionFromLeft];
[transDerecha setDelegate:self];
Ok, but to get the aspect that i am looking for, i have created a UIView (blue one on the video).
I think that in the following video, you can see better what i am trying to say.
http://screencast.com/t/JMQmxe7CGy
The problem comes when i try to make the same thing on the left. If i create another UIView to cover the left UIView, it will cover also the right cover.
So, is there any other CATransition type to make that? Or any solution?
ThankS!!!
I dont think you need to dive down to CA to do this kind of thing. It can be done using UIView animations. Here http://www.raywenderlich.com/2454/how-to-use-uiview-animation-tutorial is a good tutorial on UIView animations.
What is the best or recommended technique for animating PNG Sequences.
Heres what I've learned:
Do it Manually
Using MutableArrays containing Strings, you can animate a UIImageView with a timer which increments an index number
UIImage - animation methods
This works, the only problem is to find if an image has completed its animation, you have to check the isAnimating BOOL, and to do that you need a timer.
What is the best and recommended?
Looking to do Oldschool game sprite animations,
ie:
Idle Animation
Attack Animation
Walk Animation
ect...
Let me know if any one has something.
#lessfame
Example to animate arrows
UIImage* img1 = [UIImage imageNamed:#"fleche1.png"];
UIImage* img2 = [UIImage imageNamed:#"fleche2.png"];
NSArray *images = [NSArray arrayWithObjects:img1,img2, nil];
UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 160.0, 160.0)];
[imageView setAnimationImages:images];
[imageView setAnimationRepeatCount:100];
[imageView setAnimationDuration:3.0];
imageView.center = myView.center;
[imageView startAnimating];
[myView addSubview:imageView];
[imageView release];
Easiest way is to use Core Animation layers to do sprite animation:
Make a 'multi-cell' image strip (could be PNG or JPG) of all the various moves for the sprite. Make each 'cell' be a fixed height or width.
Put the image in a UIImageView.
Take the CALayer of the view, and adjust the contentsRect property of the layer. This acts as a clipping rectangle for the sprite. To animate sprite all you have to do is move the contentsRect over to the next cell position in the image strip.
Something like this will do it (assuming you've already calculated the newSpritePosition.
[CATransaction begin];
[CATransaction setDisableActions:YES];
spriteLayer.contentsRect = newSpritePosition;
[CATransaction commit];
(If you don't do the second line, then you'll get a default slide animation instead of a 'jump' to the next state.)
With this technique you can rotate through all the frames of the sprite -- much like a flipbook. CALAyer transactions are optimized so you should get pretty fast frame rates. You can set an animationDidStop completion handler to move to the next state of the sprite or loop back to the beginning frame.
It depends on how you are going to use the sprites. If you just need a simple looping sprite then the UIImage method is great. If you want more granular control then you will be happier loading the images into an array and cycling them using a NSTimer to handle the timing. Personally I use the array method most often because it leaves me more options in the future (like detecting when animations have completed). One more suggestion would be to check out the cocos2d project. Its sprite is alot more powerful than either of these suggestions.
As I said in another answer, I found this to be a good way: PNG Animation method by Moses DeJong
From his words:
This example implements an animation oriented view controller that simply waits to read the PNG image data for a frame until it is needed. Instead of alllocating many megabytes, this class run in about a half a meg of memory with about a 5-10% CPU utilization on a 2nd gen iPhone.
I'm still unsure exactly how it's done. I believe it basically uses UIImageView to cache up AVAudioPlayer.
I recently posted my problem but neither did I get an answer here or elsewhere, nor can I find my post again...
Anyway, I want to try to state my point clearer, hoping you can help me this time maybe.
The part of code, this is about, looks like this:
CABasicAnimation *animation = nil;
CATransform3D transform;
animation = [CABasicAnimation animationWithKeyPath:#"transform"];
transform = CATransform3DMakeRotation(1.57f, 0.0f, 1.0f, 0.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setToValue:value];
[animation setAutoreverses:YES];
[animation setDuration:0.5f];
[[shieldView layer] addAnimation:animation forKey:#"180"];
What happens, is that I have a UIImageView with an image in it. I take this View and rotate it around the z-Axis for half a turn (1.57 measured in arc).
Now there is another View overlapping with the one being transformed in 3d. This leads to my problem: As soon as the transformation is executed, the transformed layer is sort of clipped against the overlapping view, but wrong, so that u see a 'flickering' effect to both Views.
Now I don't know, why this happens. I would expect the view to be animated appropriately, without this 'bug', and the Views to be just displayed correctly.... since I do not do anything special.
I have tried to overlay 2D transformations, using the 'beginAnimations' and 'commitAnimations' context, which works fine. This means, the problem is sort of hidden in the 3D rotation of my View.
You guys have any clues on this? I hope I explained that well enough.
If these are two sibling views (subviews of the same superview), their layers can overlap, potentially creating the visual artifacts you see. You should be able to either reposition the views relative to one another in the view hierarchy (make one view a level above or below the other) or directly set the Z position of the view's layer. If you do something like
shieldView.layer.zPosition = 1.0f;
your shieldView's layer should be slightly above the other view's layer (unless I'm remembering the coordinate space wrong and it needs to be -1.0f) and you should be able to avoid the clipping you see now.