Good day! I have a question,I have this code for a Single Page application
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint endPosition = [touch locationInView:self.view];
if (self.imageStatus>0)
{
if (self.startPosition.x < endPosition.x)
{
// Right swipe
CATransition *transition = [CATransition animation];
transition.duration = 0.75;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transition.type = kCATransitionPush;
transition.subtype =kCATransitionFromLeft;
transition.delegate = self;
[self.view.layer addAnimation:transition forKey:nil];
[self.view addSubview:myViewController.view];
self.imageStatus --;
if (self.imageStatus == 0)
{
self.myImage.image = [UIImage imageNamed:#"blue_back.png"];
}
else
{
self.myImage.image = [UIImage imageNamed:#"black_back.png"];
}
}
}
if (self.imageStatus<2)
{
if (self.startPosition.x > endPosition.x)
{
// Left swipe
CATransition *transition = [CATransition animation];
transition.duration = 0.75;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transition.type = kCATransitionPush;
transition.subtype =kCATransitionFromRight;
transition.delegate = self;
[self.view.layer addAnimation:transition forKey:nil];
[self.view addSubview:myViewController.view];
self.imageStatus ++;
if (self.imageStatus == 2)
{
self.myImage.image = [UIImage imageNamed:#"red_back.png"];
}
else
{
self.myImage.image = [UIImage imageNamed:#"black_back.png"];
}
}
}
when i open the app the default background is black, when i swipe at right it shows the blue_back.png or the blue background, when i swipe back it shows the default background which is black, and when its on black again and i will swipe it left it shows the red_back.png or the red background and vise versa. now what i want is, i will add another page with yellow background next to red, so when im in the default black page, when i swipe to left two times it shows the yellow. and also the swiping function, when i swipe it it takes maybe a second to switch a page, how can i implement the "Realtime Swiping" like in the table view, but horizontal, so it changes page fast. thanks!
Updated answer:
What you want is a paging scrollview. The trick is to add the views are the correct positions in the scrollView and set the scrollviews contentSize correctly. Example with two views:
- (void)viewDidLoad
{
[super viewDidLoad];
self.edgesForExtendedLayout = UIRectEdgeBottom;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
scrollView.pagingEnabled = YES;
scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 2, self.view.bounds.size.height);
[self.view addSubview:scrollView];
UIView *redView = [[UIView alloc] init];
redView.frame = self.view.bounds;
redView.backgroundColor = [UIColor redColor];
[scrollView addSubview:redView];
UIView *blueView = [[UIView alloc] init];
CGRect frame = self.view.bounds;
frame.origin.x = 320;
blueView.frame = frame;
blueView.backgroundColor = [UIColor blueColor];
[scrollView addSubview:blueView];
}
Old answer:
I would be easier to make use of the build in gesture recognizers. Specifically UIPanGestureRecognizer.
Example:
In viewDidLoad:
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(myAction:)];
[self.view addGestureRecognizer:pan];
And the action:
- (void) myAction:(UIPanGestureRecognizer*)gestureRec
{
if (gestureRec.state == UIGestureRecognizerStateEnded) {
NSLog(#"ended");
NSLog(#"%#", NSStringFromCGPoint([gestureRec velocityInView:self.view]));
}
}
The state determines when its ended as you want. And you can use the velocityInView to determine right/left and up/down movement
Related
I'm trying to do an effect to open and close a view(menu) the view has origin x = 55.
the open effect works properly good, but the close effect has an problem:
the effect begins at x = 0 and my view is at x = 55...then the effect appears strange....
There's my code:
-(IBAction)menuClick:(id)sender {
if(!self.viewMais) {
CGRect screen = [[UIScreen mainScreen]bounds];
self.viewMais = [[UIView alloc]initWithFrame:CGRectMake(55, 0, screen.size.width-55, screen.size.height)];
[self.viewMais setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:self.viewMais];
[self open];
}
else {
[self close];
}
}
-(void)open {
CATransition *transition = [CATransition animation];
transition.duration = 0.3;
transition.timingFunction =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromRight;
UIView *containerView = self.viewMais;
[containerView.layer addAnimation:transition forKey:nil];
}
-(void)close {
CATransition *transition = [CATransition animation];
transition.duration = 0.3;
transition.timingFunction =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromLeft;
UIView *containerView = self.viewMais;
[containerView.layer addAnimation:transition forKey:nil];
[self performSelector:#selector(removerViewMais) withObject:nil afterDelay:0.3];
}
-(void) removerViewMais {
[self.viewMais removeFromSuperview];
self.viewMais = nil;
}
-(IBAction)showPicker{
if (!isPickerShow) {
[self.view endEditing:YES];
[UIView animateWithDuration:0.3 animations:^{
viewWithPicker.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height-viewWithPicker.frame.size.height, 320, 555);
isPickerShow=YES;
}];
}
}
-(IBAction)hidePicker{
if (isPickerShow) {
[UIView animateWithDuration:0.3 animations:^{
viewWithPicker.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height , 320, 255);
isPickerShow=NO;
}];
}
}
I solved my problem with the following code in close menu
-(void)close {
CGRect destination = self.view.frame;
[UIView animateWithDuration:0.25 animations:^{
self.viewMais.frame = CGRectMake(destination.size.width, self.viewMais.frame.origin.y, self.viewMais.frame.size.width, self.viewMais.frame.size.height);
} completion:^(BOOL finished) {
[self.viewMais setHidden:YES];
[self.viewMais removeFromSuperview];
self.viewMais = nil;
}];
}
UICollectionView cell flip animation on didSelect method should flip with Detailed information on the of the clicked index cell and if user want to go original view should be able to see on cell.
I am using
UICollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath];
[UIView animateWithDuration:1.0
delay:0
options:(UIViewAnimationOptionAllowUserInteraction)
animations:^
{
[UIView transitionFromView:cell.contentView
toView:cell.contentView
duration:.5
options:UIViewAnimationOptionTransitionFlipFromRight
completion:nil];
}
completion:^(BOOL finished)
{
}
];
In your code the animation removes your from view and show the to view.So, in the collection if the content view is removed then how it come back.
So, don't remove the view, just hide it.
Please use the below code
CVCell* cell1 = (CVCell *)[collectionView cellForItemAtIndexPath:indexPath];
[UIView transitionWithView:cell1.contentView
duration:5
options:UIViewAnimationOptionTransitionFlipFromLeft
animations:^{
if (cell1.isred) {
cell1.isred = NO;
cell1.greenview.hidden = NO;
cell1.redView.hidden=YES;
} else {
cell1.isred = YES;
cell1.greenview.hidden = YES;
cell1.redView.hidden=NO;
}
} completion:nil];
greenview is first view and redview is second which are added on the cell.
Now when fliped first greenview is shown and redview is hidden and next time viceversa
You can try other animation
CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 2.6f;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.fillMode = kCAFillModeForwards;
animation.startProgress = 0.1;
animation.endProgress = 1.0;
animation.removedOnCompletion = YES;
animation.type = #"cube";//---
animation.subtype = (cell1.isred)?kCATransitionFromLeft:kCATransitionFromRight;
[CATransaction setCompletionBlock:^{
if (cell1.isred) {
cell1.isred = NO;
cell1.greenview.hidden = NO;
cell1.redView.hidden=YES;
} else {
cell1.isred = YES;
cell1.greenview.hidden = YES;
cell1.redView.hidden=NO;
}
}];
[cell1.contentView.layer addAnimation:animation forKey:#"Cameraanimation"];
May be this types of issue occurred with many developer, I also tried to find on Google but there is no luck to solve my problem.
In my app rootViewController set on window dynamically, I mean user can change root view at run time application. So first I am removing current rootViewController from UIWindow and then I set new rootViewController on UIWindow with specific animation.
This animation done by CATransition with transition.type = kCATransitionPush;.
My app working very well except animation of new rootViewController. As above I said that I used kCATransitionPush with CATransition
EDITED:
Below is my code:
-(void) changeRootViewController
{
for(UIView *subViews in self.window.rootViewController.view.subviews)
[subViews removeFromSuperview];
[self.window.rootViewController.view removeFromSuperview];
self.window.rootViewController.view = nil;
[self.window.rootViewController removeFromParentViewController];
MainRootViewController *mainRootVC = [[MainRootViewController alloc] init];
CATransition *animation = [CATransition animation];
[animation setDuration:0.4];
[animation setType:kCATransitionPush];
[animation setSubtype:kCATransitionFromRight];
animation.fillMode = kCAFillModeForwards;
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];
self.window.rootViewController = mainRootVC;
[[self.window layer] addAnimation:animation forKey:nil];
}
I also tried to set clearColor and whiteColor of background of UIWindow. But not working.
My Problem is : While animation is process (right to left) I am getting black shadow. So anybody can help me to hide this black shadow? Please give you golden suggestion.
Thanks.
Add in the delegate (didFinishLaunchingWithOptions method) these two lines :
self.window.backgroundColor = [UIColor whiteColor];
self.window.tintColor = [UIColor whiteColor];
I was having same requirement, I have 3 images of full screen size at splash screen which should slide from right to left. But used of CATransition doesn't solve the issue. So I have used scrollview with paging. Added 3 images in scrollview and then start animation.
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
size = [UIScreen mainScreen].bounds.size;
imageArray = [[NSMutableArray alloc] init];
[imageArray addObject:[UIImage imageNamed:#"splashScreen1.png"]];
[imageArray addObject:[UIImage imageNamed:#"splashScreen2.png"]];
[imageArray addObject:[UIImage imageNamed:#"splashScreen3.png"]];
self.splashScrollView.frame = CGRectMake(0,0,size.width,size.height);
self.splashScrollView.contentSize = CGSizeMake(size.width * imageArray.count, size.height);
self.splashScrollView.pagingEnabled = YES;
CGFloat xPos = 0.0;
for (UIImage *image in imageArray) {
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(xPos, 0.0, size.width, size.height);
[self.splashScrollView addSubview:imageView];
xPos += size.width;
}
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:#selector(startAnimation) userInfo:nil repeats:NO];
}
This(startAnimation) method scrolled scrollView upto the width of image, on completion of first image animation, I have started second image animation which scrolled to the edge of scrollview width.
-(void) startAnimation{
[UIView animateWithDuration:2.0
animations:^{
self.splashScrollView.contentOffset = CGPointMake(size.width, 0.0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:2.0
animations:^{
self.splashScrollView.contentOffset = CGPointMake((self.splashScrollView.contentSize.width - CGRectGetWidth(self.splashScrollView.frame)), 0.0);
} completion:^(BOOL finished) {
//At animation end go to login
}];
}];
}
I have one image. I want to spin it like a coin spin on surface. I tried rotation transform but it does not spin like that. How to achieve such an animation?
code:
- (void)viewDidLoad {
[super viewDidLoad];
[self.view setUserInteractionEnabled:YES];
lbl_facebook.font=[UIFont fontWithName:GZFont size:12.0f];
txtPassword.font=[UIFont fontWithName:GZFont size:15.0f];
txtUsername.font=[UIFont fontWithName:GZFont size:15.0f];
CATransition* transition = [CATransition animation];
transition.startProgress = 0;
transition.endProgress = 1.0;
transition.type = #"flip";
transition.subtype = #"fromRight";
transition.duration = 0.3;
transition.repeatCount = 2;
[_Image.layer addAnimation:transition forKey:#"transition"];
}
nd:
#import "LoginViewController.h"
#import "RegistrationViewController.h"
#import "ForgetPasswordViewController.h"
#import "ForgetPasswordController.h"
#import "SearchServiceProviderViewController.h"
#import <QuartzCore/QuartzCore.h>
This will make a nice, coin-like flip:
CATransition* transition = [CATransition animation];
transition.startProgress = 0;
transition.endProgress = 1.0;
transition.type = #"flip";
transition.subtype = #"fromRight";
transition.duration = 0.3;
transition.repeatCount = 2;
And add the transition animation to the layer of your view:
[_yourView.layer addAnimation:transition forKey:#"transition"];
See it in action:
One good trick to spin like this is that take different images of coin with different angle like spinning image. And then add all those images to array and start animation of images with that array..it will give you much better effect...Simple process like video framing.
Like:
NSArray *animationArray = [NSArray arrayWithObjects:
[UIImage imageNamed:#"images.jpg"],
[UIImage imageNamed:#"images1.jpg"],
[UIImage imageNamed:#"images5.jpg"],
[UIImage imageNamed:#"index3.jpg"],
nil];
UIImageView *animationView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,320, 460)];
animationView.backgroundColor = [UIColor purpleColor];
animationView.animationImages = animationArray;
animationView.animationDuration = 1.5;
animationView.animationRepeatCount = 0;
[animationView startAnimating];
I've got a uitableviewcell subclass with an imageView property. Im fetching the image from the web and when i get it, i'd like to crossfade it into the image view.
I've got this CAAnimation code that i was originally using within the view controller to apply this effect. my code looked like this:
CATransition *transition = [CATransition animation];
transition.duration = 0.3f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[self.photoView.layer addAnimation:transition forKey:someKey];
Now, i'd like to move that code into my UITableViewCell. I've tried applying that animation in various locations but it doesn't seem to be having an affect. I put it in awakeFromNib (the cell is from a nib file) as well as willMoveToSuperview. Any thoughts?
David is right, you're not actually changing the contents of the imageView in your code.
I just made this subclass of an UITableViewCell and added it to a basic iOS Single View application:
#import "AnimatedCell.h"
#implementation AnimatedCell {
BOOL imageWasGrabbed;
}
- (id)initWithStyle:(UITableViewCellStyle)style
reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.frame = CGRectMake(0,0,320,44);
self.imageView.image = [UIImage imageNamed:#"localImage"];
self.textLabel.text = #"Locally loaded image";
self.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.backgroundColor = [UIColor groupTableViewBackgroundColor];
}
return self;
}
-(void)grabImage {
NSString *path = #"http://www.c4ios.com/images/temp/webImage#2x.png";
NSURL *webImageUrl = [NSURL URLWithString:path];
NSData *webImageData = [NSData dataWithContentsOfURL:webImageUrl];
UIImage *image = [UIImage imageWithData:webImageData];
CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.delegate = self;
NSString *n = kCAMediaTimingFunctionEaseInEaseOut;
transition.timingFunction = [CAMediaTimingFunction functionWithName:n];
transition.type = kCATransitionFade;
[self.imageView.layer addAnimation:transition forKey:#"animateContents"];
self.imageView.image = image;
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if(!imageWasGrabbed) {
[self grabImage];
}
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
self.textLabel.text = #"Web loaded image";
imageWasGrabbed = YES;
}
#end
After you add the transition to your cell's imageView layer, you need to call the following:
self.imageView.image = image;
For reference, the View Controller for my project looks like this:
#import "ViewController.h"
#import "AnimatedCell.h"
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
AnimatedCell *cell = [[AnimatedCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:#"AnimatedCell"];
cell.center = self.view.center;
[self.view addSubview:cell];
}
#end