How to apply animation during switching images - ios

I have an imageView in top of my screen, and what i want is - to switch images with specific time interval, and to make it with animation (I'm not specify what really animation should be, that could be fade for example). I have suggested to add that code snippet:
// load all the frames of our animation
self.imageSlideshow.animationImages = [NSArray arrayWithObjects:
self.firstImageIps, self.secondImageIps, self.thirdImageIps, self.fourthImageIps, self.fifthImageIps, nil];
// all frames will execute in 1.75 seconds
self.imageSlideshow.animationDuration = 1.75;
// repeat the animation forever
self.imageSlideshow.animationRepeatCount = 0;
// start animating
NSLog(#"that one called?");
[self.imageSlideshow startAnimating];
But images here only switching, without any animation.
And here is more serious issues - if i set duration to more, then 3 seconds, it start act weird (not of all images show, first image show more often then second and third. It look like it can't achieve a full cycle and move to first image after some short time again and again).
How to achieve switching images with animation, with timer interval, for example 5-7 seconds?
Any advice would be appreciated, thanks!

Try this one:
- (void)viewDidLoad {
[super viewDidLoad];
self.imgArr = [[NSArray alloc] initWithObjects:#"DSC06715.JPG",#"Snapshot_20121113_18.JPG",#"IMAG1689.jpg",#"IMAG1720.jpg",#"IMAG1396.jpg", nil];
[NSTimer scheduledTimerWithTimeInterval:2.5 target:self selector:#selector(performTransition) userInfo:nil repeats:YES];
}
-(void)performTransition
{
int randImg = arc4random()%self.imgArr.count;
[self.imageView1 setImage:[UIImage imageNamed:[self.imgArr objectAtIndex:randImg]]];
CATransition *transition = [CATransition animation];
transition.duration = 1;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
NSString *types[4] = {kCATransitionFade};
transition.type = types[1];
transition.delegate = self;
[self.imageView1.layer addAnimation:transition forKey:nil];
}

-(void)animateImages
{
count++;
[UIView transitionWithView:imageSlideshow
duration:2.0f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
imageSlideshow.image = [imagesArray objectAtIndex: count % [imagesArray count]];
} completion:^(BOOL finished) {
[self animateImages];
}];
}
This code snippet will help you to add any type of animation.

One of the simplest ways to do animation.
Code example :
[UIView animateWithDuration:0.3 animations:^{
//change alpha with animation.
self.friendsTableView.alpha = 1.f;
} completion:^(BOOL finished) {
}];
This animation could be set with delay and optionsas well. As far as i know it is the simplest way to set proper animation with less afford.

To make animation between 2 view you may use spacial UIView method:
- (void)makeCrossDissolveAnimation {
NSArray *images = self.imageSlideshow.animationImages;
static int counter = 0;
UIImageView *startView = [[UIImageView alloc] initWithImage:images[counter]];
counter = (counter+1) % [images count];
UIImageView *endView = [[UIImageView alloc] initWithImage:images[counter]];
[UIView transitionFromView:startView toView:endView duration:ELAnimationDuration
options:UIViewAnimationOptionTransitionCrossDissolve
completion:^(BOOL finished) {
// Your completion block
}];
}

Related

Fade in and fade out animation is too slow

I made an animation, fade in and fade out on a cell. When I press the cell(a button on the entire cell) the action is delegate via a protocol on a collectionView and pops to another controller (detailController).
The cell
- (IBAction)cellButtonPressed:(id)sender {
[self fadeIn];
}
-(void)fadeIn {
[UIView animateWithDuration:0.5
delay:0.0
options:0.0
animations:^{
self.coverAlbumPhoto.alpha = 0.0f;
self.shadowView.alpha = 0.0f;
self.mountainBorderImageView.alpha = 0.0f;
} completion:^(BOOL finished) {
[self fadeOut];
}];
}
-(void)fadeOut {
[UIView animateWithDuration:0.5
delay:0.0
options:0.0
animations:^{
self.coverAlbumPhoto.alpha = 1.0f;
self.shadowView.alpha = 1.0f;
self.mountainBorderImageView.alpha = 1.0f;
} completion:^(BOOL finished) {
if ([self.delegate respondsToSelector:#selector(tapCellButtonAtIndexPath:)]) {
[self.delegate tapCellButtonAtIndexPath:self.indexPath];
}
}];
}
Collection View
(void)tapCellButtonAtIndexPath:(NSIndexPath *)indexPath {
ArtworkModel *artworkModel = (ArtworkModel *)[listOfArtworks objectAtIndex:indexPath.row];
FBWorkDetailsViewController *dvc = [[FBWorkDetailsViewController alloc] initWithArtwork:artworkModel];
FBLeftMenuViewController *left = [[FBLeftMenuViewController alloc] init];
MFSideMenuContainerViewController *container = [MFSideMenuContainerViewController
containerWithCenterViewController: dvc
leftMenuViewController: left
rightMenuViewController:nil
withHeader: YES];
[container.titleLabel setText:#"WORK DETAILS"];
[self.navigationController pushViewController: container animated: YES];
}
The problem is that the animation is TOO SLOW. Can anybody explain me why? Thanks.
You have 2 animations, each with a duration of .5 seconds. That gives a total duration of 1 second. If you want it to be faster, use shorter durations. A total animation time of .2 to .3 seconds is probably a good place to start, so try backing down the duration of each step to 0.15 seconds (0.3 seconds total).

Switching images using NSTimer

I have couple of images i want to switch. There is a simple function i made for do this:
-(void)imageSlide{
if (!isMoved){
CGRect frame = self.imageSlideshow.frame;
frame.origin.x = self.imageSlideshow.frame.origin.x - 320;
self.imageSlideshow.frame = frame;
NSLog(#"1 caze work");
isMoved = YES;
}
if (isMoved){
CGRect frame = self.imageSlideshow.frame;
frame.origin.x = self.imageSlideshow.frame.origin.x + 320;
self.imageSlideshow.frame = frame;
NSLog(#"2 caze work");
isMoved = NO;
}
}
There is NSTimer which call that function:
[NSTimer scheduledTimerWithTimeInterval:2.0
target:self
selector:#selector(imageSlide)
userInfo:nil
repeats:YES];
BOOL isMoved; placed in implementation of class.
What i want is, to remove an image and then, shown again (and repeat it every 2 seconds). It would be nice to have smooth animation as well.
That code:
for (int i=0; i<99; i++){
self.imageSlideshow.image = [UIImage imageNamed:(i % 2) ? #"ipd1.jpg" : #"ipd2.jpg"];
CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[self.imageSlideshow.layer addAnimation:transition forKey:nil];
}
Also not working, no idea why. Image stand still. I did import quartz library and include headers.
you can acheive this by using this code :-
#import <QuartzCore/QuartzCore.h>
...
imageView.image = [UIImage imageNamed:(i % 2) ? #"3.jpg" : #"4.jpg"];
CATransition *transition = [CATransition animation];
transition.duration = 2.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[imageView.layer addAnimation:transition forKey:nil];
and NSTimer Job should be done here by transition.duration. So, no need of NSTimer anymore here.
Courtesy :- https://stackoverflow.com/a/2834693/1865424
This piece of code works too :-
// create the view that will execute our animation
UIImageView* imageSlideshow = [[UIImageView alloc] initWithFrame:self.view.frame];
// load all the frames of our animation
imageSlideshow.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#“ipd1.jpg"],
[UIImage imageNamed:#“ipd2.jpg"], nil];
// all frames will execute in 1.75 seconds
imageSlideshow.animationDuration = 1.75;
// repeat the animation forever
imageSlideshow.animationRepeatCount = 0;
// start animating
[imageSlideshow startAnimating];
// add the animation view to the main window
[self.view addSubview:imageSlideshow];
I think you need:
[UIView animateWithDuration:1 options:UIViewAnimationOptionCurveEaseIn
animations:^{
//Change frame here.
} completion:^ (BOOL completed) {}
];
Try this code. It is worked for me.
#pragma mark -
#pragma mark viewDidAppear
-(void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
updateBCK = [NSTimer scheduledTimerWithTimeInterval:(4.0) target:self selector:#selector(changeImage) userInfo:nil repeats:YES];
[updateBCK fire];
}
#pragma mark -
#pragma mark viewDidDisAppear
-(void)viewDidDisappear:(BOOL)animated
{
[super viewDidDisappear:animated];
if ([updateBCK isValid]){
[updateBCK invalidate];
updateBCK = nil;
}
}
-(void)changeImage{
static int i=0;
if (i == [myImages count]){
i=0;
}
[UIImageView beginAnimations:nil context:NULL];
[UIImageView setAnimationDuration:0.6];
backgroundImageView.alpha=1;
backgroundImageView.image =[myImages objectAtIndex:i];
[UIImageView commitAnimations];
i++;
}
It is bug in your code. After setting isMoved = YES, you can't check if isMoved == YES.
I don't know if that is what you mean, but try this code:
-(void)imageSlide{
[UIView animateWithDuration:1 animations:^{
if (!isMoved){
CGRect frame = self.imageSlideshow.frame;
frame.origin.x = self.imageSlideshow.frame.origin.x - 320;
self.imageSlideshow.frame = frame;
NSLog(#"1 caze work");
isMoved = YES;
}
else
{
CGRect frame = self.imageSlideshow.frame;
frame.origin.x = self.imageSlideshow.frame.origin.x + 320;
self.imageSlideshow.frame = frame;
NSLog(#"2 caze work");
isMoved = NO;
}
} completion:^(BOOL finished) {
}];
}
EDIT
Maybe this code will help you:
-(void)slideshow
{
static int i = 0;
UIImage * img = [UIImage imageNamed:(i % 2) ? #"ipd1.jpg" : #"ipd2.jpg"];
[UIView transitionWithView:self.imageSlideshow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.imageSlideshow.image = img;
} completion:^(BOOL finished) {
i++;
[self performSelector:#selector(slideshow) withObject:nil afterDelay:2.0];
}];
}

CATransition black color issue when push right to left

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
}];
}];
}

iOS: why object turns to the start position after animation comletion

)) I'm trying to animate UIButton (two parallel animations: changing of images and moving) as follows, after animation button should be moved, but after completing animation button turns to the start position. Please help to fix it! Thanks in advance!
- (IBAction)bugOneTapped:(id)sender
{
[UIView animateWithDuration:1.0
animations:^{
self.bugOneButton.imageView.animationImages =
[NSArray arrayWithObjects:[UIImage imageNamed:#"bugOne3"],[UIImage imageNamed:#"bugOne2"],[UIImage imageNamed:#"bugOne1"],[UIImage imageNamed:#"bugOne2"],[UIImage imageNamed:#"bugOne3"],[UIImage imageNamed:#"bugOne4"],[UIImage imageNamed:#"bugOne5"],[UIImage imageNamed:#"bugOne4"],nil];
self.bugOneButton.imageView.animationDuration = 0.3;
[self.bugOneButton.imageView startAnimating];
self.bugOneButton.center = CGPointMake(self.bugOnePositionX, self.bugOneButton.center.y - 50);
self.bugOnePositionY = self.bugOnePositionY - 50;
}completion:^(BOOL finished) {
[self.bugOneButton.imageView stopAnimating];
}];
self.bugOneButton.center = CGPointMake(self.bugOnePositionX, self.bugOnePositionY);
}
Remove below line in your code
self.bugOneButton.center = CGPointMake(self.bugOnePositionX, self.bugOnePositionY);
It will fix..
#Genie Wanted said is right,remove code
self.bugOneButton.center = CGPointMake(self.bugOnePositionX, self.bugOnePositionY)
this will reset the button position!
remove this two line
- (IBAction)bugOneTapped:(id)sender
{
[UIView animateWithDuration:1.0
animations:^{
self.bugOneButton.imageView.animationImages =
[NSArray arrayWithObjects:[UIImage imageNamed:#"bugOne3"],[UIImage imageNamed:#"bugOne2"],[UIImage imageNamed:#"bugOne1"],[UIImage imageNamed:#"bugOne2"],[UIImage imageNamed:#"bugOne3"],[UIImage imageNamed:#"bugOne4"],[UIImage imageNamed:#"bugOne5"],[UIImage imageNamed:#"bugOne4"],nil];
self.bugOneButton.imageView.animationDuration = 0.3;
[self.bugOneButton.imageView startAnimating];
self.bugOneButton.center = CGPointMake(self.bugOnePositionX, self.bugOneButton.center.y - 50);
}completion:^(BOOL finished) {
[self.bugOneButton.imageView stopAnimating];
}];
}

Fade in and Fade Out multiple Images automatically

I am hew here and need help.
I work with storyboard and want make a automatically fade in fade out photo show.
The problem is that i have 10 images and don't now how to make this Programmatically.
I hope somebody can help me.
mainImageView = [[UIImageView alloc]init];
NSArray *animationArray = [NSArray arrayWithObjects:[UIImage imageNamed:#"first.png"],[UIImage imageNamed:#"second.png"],[UIImage imageNamed:#"third.png"],[UIImage imageNamed:#"fourth.png"],[UIImage imageNamed:#"fifth.png"],[UIImage imageNamed:#"sixth.png"],[UIImage imageNamed:#"seventh.png"],[UIImage imageNamed:#"eight.png"],[UIImage imageNamed:#"nine.png"],[UIImage imageNamed:#"ten.png"], nil]; //add your images here
[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:#selector(crossfade) userInfo:nil repeats:YES];
[mainImageView setFrame:CGRectMake(50,50,100,100)];
mainImageView.animationImages = animationArray; //mainImageView is imageview
mainImageView.animationDuration = 10;
mainImageView.animationRepeatCount = 0;
[mainImageView startAnimating];
[self.view addSubview:mainImageView];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)crossfade {
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
mainImageView.alpha = !mainImageView.alpha;
}completion:^(BOOL done){
//
}];
}

Resources