How to set UIImageView zoom animation when the photo being changed - ios

As title, I am beginner so i don't have idea to solve it.
In my code, it just have zoom animation when i turn on the emulator first time,
I want to have the zoom animation when each photo change,
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *animationImages = [NSArray arrayWithObjects:[UIImage imageNamed:#"1.jpg"],
[UIImage imageNamed:#"2.jpg"],
[UIImage imageNamed:#"3.jpg"],
[UIImage imageNamed:#"4.jpg"],nil];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10,10,300,300)];
imageView.animationImages = animationImages ;
imageView.animationRepeatCount = 0;
imageView.animationDuration= 12.0;
[imageView startAnimating];
[self.view addSubview:imageView];
imageView.frame = CGRectMake(150, 150, 20, 20);
CGPoint center = imageView.center;
[UIView animateWithDuration: 1.0f animations:^{
imageView.frame = CGRectMake(10, 10, 300, 300);
imageView.center = center;
}];
}
Thank you in advance for any assistance that can be provided here.

It's not the cleanest code to use animationImages if you want a zoom animation on each image transition. I would create my own custom UIView class to handle the transitions myself so the animations can be tightly synchronized with each transition. But, for the sake of answering your question with a quick unreliable hack, I will use a timer to run an animation at approximately the same frequency as the image transitions. Timers become less accurate over time due, so eventually the zoom effect no longer lines up with the image transitions.
#interface NameOfYourViewController ()
#property(nonatomic, strong) UIImageView* imageView;
#property(nonatomic, strong) NSTimer* imageTransitionTimer;
#property(nonatomic, assign) CGFloat imageScale;
- (void)animateImage;
#end
#implementation NameOfYourViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *animationImages = [NSArray arrayWithObjects:[UIImage imageNamed:#"1.jpg"],
[UIImage imageNamed:#"2.jpg"],
[UIImage imageNamed:#"3.jpg"],
[UIImage imageNamed:#"4.jpg"],nil];
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10,10,300,300)];
selfimageView.animationImages = animationImages ;
self.imageView.animationRepeatCount = 0;
self.imageView.animationDuration= 12.0;
[self.imageView startAnimating];
[self.view addSubview:self.imageView];
self.imageScale = 1.0f;
self.imageTransitionTimer = [NSTimer scheduledTimerWithTimeInterval:imageView.animationDuration target:self selector:#selector(animateImage) userInfo:nil repeats:YES];
[self.imageTransitionTimer fire];
}
- (void)animateImage
{
[UIView
animateWithDuration:1.0
delay:0.0
options:0
animations:^void () {
self.imageView.transform = CGAffineTransformMakeScale(
self.imageScale,
self.imageScale
);
}
completion:^void(BOOL finished) {
self.imageScale += 0.3f;
}
}];
}
#end

Related

How to move UIImageView while swiping in UIPageViewContoller

I would like to move red circle (as shown in following image) slowly (may be with animation) when user swipes the app intro (PageViewController). I also want to add some animations so I'm trying to use IFTTT/JazzHands framework. But it's difficult for me to understand currently. Is there any easy way to use animation in PageViewController? Or are there any tutorials that uses IFTTT/JazzHands framework? Could anybody help me, please?
Try this if its is ok vote for me
#interface homeViewController ()<UIScrollViewDelegate>
#property (weak, nonatomic) IBOutlet UIScrollView *scrollViewSlider;
#end
#implementation homeViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationController.navigationBarHidden=true;
[NSTimer scheduledTimerWithTimeInterval:4 target:self
selector:#selector(scrollingTimer) userInfo:nil repeats:YES];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
-(void)viewDidLayoutSubviews
{
UIImage *imageOne = [UIImage imageNamed:#"download.jpeg"];
UIImage *imageTwo = [UIImage imageNamed:#"download2.jpeg"];
UIImage *imageThree = [UIImage imageNamed:#"download3.jpeg"];
UIImage *imageFour = [UIImage imageNamed:#"download4.jpeg"];
NSArray *imageArray = [NSArray arrayWithObjects:imageOne,
imageTwo, imageThree, imageFour, nil];
for (int i = 0; i <= 3; i++) {
UIImageView *imgView = [[UIImageView alloc]init];
imgView.contentMode = UIViewContentModeScaleToFill;
imgView.alpha = 0.5f;
imgView.frame = CGRectMake(i * self.scrollViewSlider.bounds.size.width,
0, self.scrollViewSlider.bounds.size.width,
self.scrollViewSlider.bounds.size.height);
[imgView setImage:imageArray[i]];
[self.scrollViewSlider addSubview:imgView];
self.scrollViewSlider.pagingEnabled = true;
[self.scrollViewSlider setContentSize:CGSizeMake(imageArray.count *
self.scrollViewSlider.bounds.size.width,
self.scrollViewSlider.bounds.size.height-20)];
}
}
-(void) scrollingTimer
{
CGPoint frame = self.scrollViewSlider.contentOffset;
[UIView animateWithDuration:3.0f animations:^(void) {
if (frame.x != 3 * self.scrollViewSlider.frame.size.width)
[self.scrollViewSlider setContentOffset:CGPointMake(frame.x +
self.scrollViewSlider.frame.size.width, 0)];
else
[self.scrollViewSlider setContentOffset:CGPointMake(0, 0)];
}];
}
Try this code without any Third party Class
just add QuartzCore framwork from library
#import <QuartzCore/QuartzCore.h>
- (CAAnimation*)movedown;
{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #600;
animation.toValue = #50;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[subView.layer addAnimation:animation forKey:#"basic"];
subView.layer.position = CGPointMake(0,-20);
return animation;
}
pls replace your animation view in-place of subview.

UImage view animation it doesn't work on my iPhone

After build code, it doesn't have any animation on my cellphone
but the code looks good, i don't know how to figure it out ,
and my image is 829 * 445, does it cause this problem ?
Could someone help me to solve this problem i will really appreciate it, thanks
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSArray *animationImages = [NSArray arrayWithObjects:[UIImage imageNamed:#"1.jpg"],
[UIImage imageNamed:#"2.jpg"],
[UIImage imageNamed:#"3.jpg"],
[UIImage imageNamed:#"4.jpg"],nil];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,150,150)];
imageView.animationImages = animationImages ;
imageView.animationRepeatCount = 2;
imageView.animationDuration= 4.0;
[imageView startAnimating];
[NSTimer scheduledTimerWithTimeInterval:4.0 target:self
selector:#selector(animationDone:)
userInfo:nil repeats:NO];
}
-(void)animationDone:(NSTimer*)inTimer
{
[inTimer invalidate];
inTimer = nil;
NSLog(#"animationDone ");
}
#end
You don't added imageView to your ViewController view.
Try [self.view addSubview:imageView]; in -viewDidLoad
Please use animation block code instead of the older method. The animation will tell you when its done. You don't need to set a timer.
NSArray *animationImages = [NSArray arrayWithObjects:[UIImage imageNamed:#"1.jpg"],
[UIImage imageNamed:#"2.jpg"],
[UIImage imageNamed:#"3.jpg"],
[UIImage imageNamed:#"4.jpg"],nil];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,150,150)];
[UIView animateWithDuration:1.0f animations:^{
for (int loop = 0; loop < 4; loop++) {
UIImage *image = [UIImage imageNamed:[NSString stringWithFornmat:#"%d.jpg", (loop + 1)]];
[imageView setImage:image];
}
} completion:^(BOOL finished) {
NSLog(#"animationDone");
}];
It looks like you're not adding the animating UIImageView to your view hierarchy. Right before your [imageView startAnimating]; line add the below line of code:
[self.view addSubview:imageView];

Create collision between array of animation and UIImages app development

I have code for an animating bear but i need to check collision between its animation and a regular UIImageView. Any suggestions? I looked at other answers but my code isn't the same. Here's what I have so far. Or should i use SpriteKit. I'd rather not though.
- (void)viewDidLoad {
NSArray *imageNames = #[#"bear1.gif", #"bear2.gif", #"bear3.gif", #"bear4.gif",
#"bear5.gif", #"bear6.gif"];
NSMutableArray *images = [[NSMutableArray alloc] init];
for (int i = 0; i < imageNames.count; i++) {
[images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
// Normal Animation
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(768, 800, 169, 217)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 0.5;
[self.view addSubview:animationImageView];
[animationImageView startAnimating];
[UIView animateWithDuration:7 delay:1 options:UIViewAnimationOptionRepeat animations:^{
[UIView setAnimationRepeatCount:INFINITY];
animationImageView.frame = CGRectMake(-10, 800, 169, 217);
} completion:^(BOOL finished) {
animationImageView.hidden = YES;
}];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
In your animations block you can check to see when the frame of your animating view crosses or is about to cross the frame of your UIImageView. When this condition is met, you stop the animation

Animation and ScrollView

I am currently trying to build an image viewer that moves to the next photo every 30 seconds, which also allows to swipe left / right to the next/previous photo manually.
So far I have built two separate apps, one with the swiping functionality and the second with the timer. I have tried many tutorials on the web and am looking for someone to point me in the right direction.
This code switches images every thirty seconds
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
UIImageView *animatedImageView = [[UIImageView alloc]
initWithFrame:CGRectMake(0, 55, 400, 550)];
[self.view addSubview:animatedImageView];
animatedImageView.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"IMG_0052.JPG"],
[UIImage imageNamed:#"IMG_0054.JPG"],
[UIImage imageNamed:#"IMG_0081.JPG"],
nil];
animatedImageView.animationDuration = 30.0 * [animatedImageView.animationImages count];
[animatedImageView startAnimating];
[self.view addSubview: animatedImageView];
}
This second piece of code has the swiping functionality, I am looking to combine the two
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *image1 = [UIImage imageNamed:#"workExample.jpg"];
UIImage *image2 = [UIImage imageNamed:#"IMG_0054.JPG"];
UIImage *image3 = [UIImage imageNamed:#"IMG_0052.JPG"];
imageArray = [NSArray arrayWithObjects:image1, image2, image3, nil];
for (int i = 0; i < [imageArray count]; i++) {
//This is to create a imageview for every single pagecontrol
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.image = [imageArray objectAtIndex:i];
[self.scrollView addSubview:imageView];
}
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * [imageArray count], scrollView.frame.size.height);
}
I am not using a scrollview and implementing in a different way. I hope it suits your needs
In .h
#interface ViewController : UIViewController
{
NSMutableArray *imagesToAnimate;
UIImageView *animatedImageView;
}
#property (strong, nonatomic) IBOutlet UIView *imageGalleryView;
Im viewDidLoad
animatedImageView = [[UIImageView alloc] initWithFrame:self.imageGalleryView.bounds];
imagesToAnimate = [NSMutableArray arrayWithArray:[NSArray arrayWithObjects:
[UIImage imageNamed:#"IMG_0052.JPG"],
[UIImage imageNamed:#"IMG_0054.JPG"],
[UIImage imageNamed:#"IMG_0081.JPG"],
nil]];
[self.imageGalleryView addSubview:animatedImageView];
//Start a timer
[NSTimer scheduledTimerWithTimeInterval:30.0 target:self selector:#selector(changeImge) userInfo:nil repeats:YES];
animatedImageView.image = imagesToAnimate[0];
UISwipeGestureRecognizer *swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(gallerySwiped)];
swipeGesture.direction = UISwipeGestureRecognizerDirectionLeft;
[self.imageGalleryView addGestureRecognizer:swipeGesture];
//Give the gallery a border
self.imageGalleryView.layer.borderColor = [UIColor grayColor].CGColor;
self.imageGalleryView.layer.borderWidth = 2.0f;
self.imageGalleryView.layer.cornerRadius = 15.0f;
Now function to update the image as as per scheduled time
-(void)changeImge
{
int index = [imagesToAnimate indexOfObject:animatedImageView.image];
index++;
//this is for the left to right animation ;
CATransition *transition = [CATransition new];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromRight;
if (index > imagesToAnimate.count-1) {
animatedImageView.image = imagesToAnimate [0];
}else {
animatedImageView.image = imagesToAnimate[index];
}
[animatedImageView.layer addAnimation:transition forKey:#"transition"];
}
this would handle the swipe
-(void)gallerySwiped
{
[self changeImge];
}
To stop the timer store it in a global variable and call invalidate.I hope this helps.

Show partial content of image using animation

I am working with images in iOS. So when a user presses let's say a button, I want an image to appear to fill up from the bottom to the top.
In order be more precise, imagine a thermometer that is empty and when you press a button the thermometer fills up from the bottom to the top. But I want this with animation.
Do you have any idea how to implement that?
Thanks!
You can easily do it by having a second view acting as a mask over the image view with your image. Then you can apply simple scale transform and animate it revealing the image. Alternatively, you can animate the frame change. Effect will be the same. I'm attaching code for 2 ways of doind this.
Here is what I achieved in both cases:
Code I used for the case I:
#interface MyViewController ()
#property(nonatomic, strong) UIImageView *imageView;
#property(nonatomic, strong) UIView *maskView;
#end
#implementation MyViewController
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Image"]];
_imageView.center = self.view.center;
_imageView.layer.anchorPoint = CGPointMake(0.5, 0.0);
[self.view addSubview:_imageView];
_maskView = [[UIView alloc] initWithFrame:_imageView.frame];
_maskView.backgroundColor = [UIColor whiteColor];
_maskView.center = self.view.center;
_maskView.layer.anchorPoint = CGPointMake(0.5, 0.0);
[self.view addSubview:_maskView];
}
- (IBAction)buttonTapped:(id)sender
{
[UIView animateWithDuration:1.0f
animations:^
{
_maskView.transform = CGAffineTransformMakeScale(1.0, 0.0001);
}];
}
#end
Code I used for the case II:
#interface MyViewController ()
#property(nonatomic, strong) UIImageView *imageView;
#property(nonatomic, assign) CGFloat height;
#end
#implementation MyViewController
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Image"]];
_imageView.center = self.view.center;
_imageView.contentMode = UIViewContentModeBottom;
_height = CGRectGetHeight(_imageView.bounds);
CGRect frame = _imageView.frame;
frame.size.height = 0.00001;
frame.origin.y += _height;
_imageView.frame = frame;
_imageView.clipsToBounds = YES;
[self.view addSubview:_imageView];
}
- (IBAction)buttonTapped:(id)sender
{
[UIView animateWithDuration:1.0f
animations:^
{
CGRect frame = _imageView.frame;
frame.size.height = _height;
frame.origin.y -= _height;
_imageView.frame = frame;
}];
}
#end
In both cases the end effect was the same.
You can do this by changing the frame of the view within the animate block. For example, if myView was a 100x100 sized view:
myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 0, 0);
[UIView animateWithDuration:1.0f
animations:^
{
myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 100, 100);
}];
This example should enlarge a 100x100 view in the bottom left corner of the screen, making it appear to reveal itself from the bottom up.

Resources