automatically Move imageView on screen like L shape iOS - ios

I am trying to move image like L shape in my iOS app.
I have tried this code but it is moving image only in one line that I don't want.
- (void)startApp {
UIImageView *imageToMove =
[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"man.jpg"]];
imageToMove.frame = CGRectMake(10, 10, 100, 100);
[self.view addSubview:imageToMove];
// Move the image
[self moveImage:imageToMove
duration:1.0
curve:UIViewAnimationCurveLinear
x:70.0
y:70.0];
}
- (void)moveImage:(UIImageView *)image
duration:(NSTimeInterval)duration
curve:(int)curve
x:(CGFloat)x
y:(CGFloat)y {
// Setup the animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
[UIView setAnimationCurve:curve];
[UIView setAnimationBeginsFromCurrentState:YES];
// The transform matrix
CGAffineTransform transform = CGAffineTransformMakeTranslation(x, y);
image.transform = transform;
// Commit the changes
[UIView commitAnimations];
}

I would recommend something like this:
- (void)animateLikeL
{
[UIView animateWithDuration:1.5f
delay:0.0f
options:UIViewAnimationOptionCurveLinear
animations:^{
self.yourImage.transform = CGAffineTransformMakeTranslation(0.0f, 10.0f);
} completion:^(BOOL finished){
if(finished == NO)
{
return;
}
[UIView animateWithDuration:1.5f
delay:0.0f
options:UIViewAnimationOptionCurveLinear
animations:^{
self.yourImage.transform = CGAffineTransformMakeTranslation(10.0f, 10.0f);
} completion:^(BOOL finished){
if(finished == NO)
{
return;
}
self.yourImage.transform = CGAffineTransformIdentity;
[self animateLikeL];
}];
}];
}
Another attempt is to play arround with self.yourImage.center. Increase center.y to move the image down and then increase center.x to move it left. Hope this helps.

I did it like this: circle is a UIImage view in the interface builder size 70*70 and frame set at (10,10), then stick this code in:
- (void)viewDidAppear:(BOOL)animated {
[UIView animateWithDuration:1
delay:0
options:0
animations:^{
self.circle.frame = CGRectMake(10, 249, 70, 70);
}
completion:^(BOOL finished) {
[UIView animateWithDuration:1
delay:0
options:0
animations:^{
self.circle.frame = CGRectMake(150, 249, 70, 70);
}
completion:^(BOOL finished) {
NSLog(#"Complete");
}];
}];
}

I would just chain the animations.
[UIView animateWithDuration:duration/2 delay:0 options:curve animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(x,0);
image.transform = transform;
} completion:^(BOOL finished) {
[UIView animateWithDuration:duration/2 delay:0 options:curve animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(x,y);
image.transform = transform;
} completion:nil];
}];

This is what I have done......Thank you.
- (void)viewDidLoad
{
[super viewDidLoad];
[self startAppForFirstImg];
[self startAppForSecondImg];
}
//First Image coordinates.
- (void)startAppForFirstImg{
UIImageView *imageToMove =
[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"man.jpg"]];
imageToMove.frame = CGRectMake(180,280,100,100);
[self.view addSubview:imageToMove];
// Move the image
[self moveFirstImage:imageToMove duration:2.0
curve:UIViewAnimationCurveLinear x:0.0 y:-200.0];
}
-(void)moveFirstImage:(UIImageView *)image duration: (NSTimeInterval)duration
curve:(int)curve x:(CGFloat)x y:(CGFloat)y{
[UIView animateWithDuration:duration/2 delay:0 options:curve animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(0,y);
image.transform = transform;
}
completion:^(BOOL finished) {
[UIView animateWithDuration:duration/2 delay:0 options:curve animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(-70,-200);
image.transform = transform;
} completion:nil];
}];
}
//Second Image coordinates.
- (void)startAppForSecondImg{
UIImageView *imageToMove =
[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"man.jpg"]];
imageToMove.frame = CGRectMake(20,20,100,100);
[self.view addSubview:imageToMove];
// Move the image
[self moveSecondImage:imageToMove duration:2.0
curve:UIViewAnimationCurveLinear x:0.0 y:290.0];
}
-(void)moveSecondImage:(UIImageView *)image duration: (NSTimeInterval)duration
curve:(int)curve x:(CGFloat)x y:(CGFloat)y{
[UIView animateWithDuration:duration/2 delay:0 options:curve animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(0,y);
image.transform = transform;
}
completion:^(BOOL finished) {
[UIView animateWithDuration:duration/2 delay:0 options:curve animations:^{
CGAffineTransform transform = CGAffineTransformMakeTranslation(90,290);
image.transform = transform;
} completion:nil];
}];
}

Related

iOS transform and frame animation

I want to change view frame to full screen bounds and transform to landscape.
I used UIView animation change frame and view's transform.
- (void)enterFullScreen {
CGRect frame = CGRectMake(0, 0, CGRectGetHeight(UIScreen.mainScreen.bounds), CGRectGetWidth(UIScreen.mainScreen.bounds));
self.originFrame = self.presentView.frame;
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformMakeRotation(M_PI_2);
self.presentView.frame = frame;
} completion:^(BOOL finished) {
}];
}
- (void)exitFullScreen {
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformIdentity;
self.presentView.frame = self.originFrame;
} completion:^(BOOL finished) {
}];
}
I expect the view rotate to landscape and full screen, but seems rotate error.
Finally, I tried it out, the answer is, do not exchange width and heigh, just like below:
- (void)enterFullScreen {
CGRect frame = CGRectMake(0, 0, CGRectGetWidth(UIScreen.mainScreen.bounds), CGRectGetHeight(UIScreen.mainScreen.bounds));
self.originFrame = self.presentView.frame;
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformMakeRotation(M_PI_2);
self.presentView.frame = frame;
} completion:^(BOOL finished) {
}];
}
- (void)exitFullScreen {
[UIView animateWithDuration:ZXYAnimationDuration animations:^{
self.presentView.transform = CGAffineTransformIdentity;
self.presentView.frame = self.originFrame;
} completion:^(BOOL finished) {
}];
}

How to implement nice animation for rectangle UIButton to circle shape in iOS?

When i clicked on "Login" button i need to make my rectangle login button
Login Screenshot
to animate and change it shape to circle like below link
Login Button after i click
I have seen this code in stackoverflow but its not working the way i want
CGFloat width = self.login.frame.size.width;
CABasicAnimation *morph = [CABasicAnimation animationWithKeyPath:#"cornerRadius"];
morph.fromValue = #0;
morph.toValue = #(width/2);
morph.duration = 0.5;
[self.login.layer addAnimation:morph forKey:#"morph"];
self.login.layer.cornerRadius = width/2;
Please help
Thanks for answering this.
This is the final code
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationCurveLinear
animations:^{
self.layoutWidth.constant = 70;
[self.view layoutIfNeeded];
self.btnLogin.clipsToBounds = YES;
self.btnLogin.layer.cornerRadius =self.btnLogin.bounds.size.height/2.0f;
}
completion:^(BOOL finished){
}];
Try this,
Demo Animation
Code:
- (IBAction)clicklogin:(id)sender {
[UIView animateWithDuration:0.1
delay:1.0
options:UIViewAnimationCurveLinear
animations:^{
self.layoutWidth.constant = 70;
[self.view layoutIfNeeded];
}
completion:^(BOOL finished){
NSLog(#"Done!");
[UIView animateWithDuration:0.1
delay:0.0
options:UIViewAnimationCurveLinear
animations:^{
self.btnLogin.clipsToBounds = YES;
self.btnLogin.layer.cornerRadius =self.btnLogin.bounds.size.height/2.0f; //or use ( self.login.bounds.size.height/2);
self.btnLogin.layer.borderColor=[UIColor redColor].CGColor;
self.btnLogin.layer.borderWidth=2.0f;
[self.view layoutIfNeeded];
}
completion:^(BOOL finished){
NSLog(#"Done!");
}];
}];
}
Output :
How about this?
[UIView animateWithDuration:1.0 animations:^{
CGRect frame = btn.frame;
CGPoint center = btn.center;
frame.size.width = btn.frame.size.height;
frame.size.height = btn.frame.size.height;
btn.frame = frame;
btn.center = center;
btn.layer.cornerRadius = frame.size.width/2;
btn.clipsToBounds = YES;
}];
This is what i get
And after a 1 sec animation i get this
If you want to get circle,just follow simple way
-(IBAction)actionClick:(id)sender
{
[UIView animateWithDuration:0.7f
animations:^
{
[sender setAlpha:0.5f];
}
completion:^(BOOL finished)
{
[sender setAlpha:1.0f];
button.layer.cornerRadius = button.frame.size.width / 2;
button.layer.borderColor=[UIColor redColor].CGColor;
button.layer.borderWidth=2.0f;
];
}
}

Animating annotationViews (loop animation), didSelectAnnotationView doesn't work

So I am trying to animate my annotationViews using the following code :
- (void)mapView:(MKMapView *)mapView
didAddAnnotationViews:(NSArray *)annotationViews
{
LLAnnotationView *aV;
for (aV in annotationViews) {
// Don't pin drop if annotation is user location
if ([aV.annotation isKindOfClass:[MKUserLocation class]]) {
continue;
}
aV.transform = CGAffineTransformMakeScale(0, 0);
aV.alpha = 0.1;
dispatch_async(dispatch_get_main_queue(), ^(void){
[self animateAnnotationView:aV withAnnotationViews:annotationViews];
});
}
}
-(void)animateAnnotationView:(LLAnnotationView*)aV withAnnotationViews:(NSArray*)annotationViews{
#define kDurationBetweenShowUpAnimations 0.4
#define kLoopAnimationDuration 1
#define kAnimationDuration 0.4
// Initial animation
[UIView animateWithDuration:kAnimationDuration delay:kDurationBetweenShowUpAnimations*[annotationViews indexOfObject:aV]options:UIViewAnimationOptionCurveLinear animations:^(void){
aV.transform = CGAffineTransformMakeScale(1.1, 1.1);
aV.alpha = 1.0;
}completion:^(BOOL finished){
[UIView animateWithDuration:kAnimationDuration/2 animations:^(void){
aV.transform = CGAffineTransformMakeScale(1.0, 1.0);
aV.alpha = 0.9;
}completion:^(BOOL finished){
[UIView animateWithDuration:kAnimationDuration animations:^(void){
aV.transform = CGAffineTransformMakeScale(1.1, 1.1);
aV.alpha = 1.0;
}completion:^(BOOL finished){
// **LOOP animation**
[UIView animateWithDuration:kLoopAnimationDuration delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^(void){
aV.transform = CGAffineTransformMakeScale(1.0, 1.0);
aV.alpha = 0.9;
}completion:^(BOOL finished){
}];
}];
}];
}];
}
Everything works as it should concerning the animation.
But when I try to select an annotation View, didSelectAnnotationView is rarely called.
I suspect that this should be thread related.
Does anyone have a clue what's going on??
Thank you.
Just found the solution. Add UIViewAnimationOptionAllowUserInteraction to the options of animateWithDuration :
[UIView animateWithDuration:kLoopAnimationDuration delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationOptionAllowUserInteraction ...
!!

how to rotate an image in different direction using single button?

I've a problem while im adding the code of case switch or if else with a single button so that it could rotate an image when i single press it and than when i again tap it, it should rotate in some other direction.
try this,
here yourImage is the image view which is to be rotated
- (IBAction)rotateImage:(UIButton *)sender // your button action method
{
if (!sender.selected)
{
[sender setSelected:YES];
[UIView animateKeyframesWithDuration:2.0
delay:0.0
options:UIViewKeyframeAnimationOptionCalculationModeLinear
animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:1/3.0
animations:^{
yourImage.transform = CGAffineTransformMakeRotation(2.0 * M_PI / 3.0);
}];
[UIView addKeyframeWithRelativeStartTime:1/3.0
relativeDuration:1/3.0
animations:^{
yourImage.transform = CGAffineTransformMakeRotation(4.0 * M_PI / 3.0);
}];
[UIView addKeyframeWithRelativeStartTime:2/3.0
relativeDuration:1/3.0
animations:^{
yourImage.transform = CGAffineTransformMakeRotation(0);
}];
}
completion:^(BOOL finished) {
}];
}
else
{
[sender setSelected:NO];
[UIView animateKeyframesWithDuration:2.0
delay:0.0
options:UIViewKeyframeAnimationOptionCalculationModeLinear
animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:1/3.0
animations:^{
yourImage.transform = CGAffineTransformMakeRotation(4.0 * M_PI / 3.0);
}];
[UIView addKeyframeWithRelativeStartTime:1/3.0
relativeDuration:1/3.0
animations:^{
yourImage.transform = CGAffineTransformMakeRotation(2.0 * M_PI / 3.0);
}];
[UIView addKeyframeWithRelativeStartTime:2/3.0
relativeDuration:1/3.0
animations:^{
yourImage.transform = CGAffineTransformMakeRotation(0);
}];
}
completion:^(BOOL finished) {
}];
}
}

Animation of UIButton decreases its size

Here is a small clip of a view being animated by me:
Animation flash
I am having problems when animation from ? to S and vice versa. I am setting the appropriate frames to go off screen, and then back on from the other size. Why does the size of the black button decrease with every move around it?
-(void)moveToRight
{
//just made this method up, but my actual code
//special case
if (currentDay == 7) {
//move off the screen to the right
CGRect offScreenRightFrame = CGRectMake(self.circle.frame.origin.x + 60, self.circle.frame.origin.y, self.circle.frame.size.width, self.circle.frame.size.height);
//move to the left of the screen so we can animate it in
CGRect offScreenLeftFrame = CGRectMake(-40, self.circle.frame.origin.y, self.circle.frame.size.width, self.circle.frame.size.height);
if (self.delegate) {
if ([self.delegate respondsToSelector:#selector(dayChangedTo:)]) [self.delegate dayChangedTo:[self getCurrentDay]];
}
[self pulseCircle];
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.frame = offScreenRightFrame;
}completion:^(BOOL finished) {
if (finished) {
self.circle.alpha = 0.0f;
self.circle.frame = offScreenLeftFrame;
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.center = self.labelSun.center;
self.circle.alpha = 1.0f;
}completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.25f animations:^{
[self changeColors];
[self pulseCircle];
}];
}
}];
}
}];
}
-(void)moveLeft
{
if (currentDay == 8) {
CGRect circleFrame = self.circle.frame;
CGRect offScreenLeft = CGRectOffset(circleFrame, -20, 0);
CGRect offScreenRightFrame = CGRectMake(self.labelQuestion.frame.origin.x + 30, self.labelQuestion.frame.origin.y, circleFrame.size.width, circleFrame.size.height);
[self pulseCircle];
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.frame = frame;
}completion:^(BOOL finished) {
if (finished) {
self.circle.alpha = 0.0f;
self.circle.frame = frameFinal;
[UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveLinear animations:^{
self.circle.center = self.labelQuestion.center;
self.circle.alpha = 1.0f;
}completion:^(BOOL finished) {
if (finished) {
[UIView animateWithDuration:0.25f animations:^{
[self changeColors];
[self pulseCircle];
}];
}
}];
}
}];
}
- (void)pulseCircle
{
__block UILabel *day = [self getLabelOfDay];
[UIView animateWithDuration:TRANLATE_DURATION/2 delay:0.0f options:UIViewAnimationOptionBeginFromCurrentState animations:^{
self.circle.layer.transform = CATransform3DMakeScale(1.35f, 1.35f, 1);
day.transform = CGAffineTransformMakeScale(1.35f, 1.35f);
}completion:^(BOOL finished) {
[UIView animateWithDuration:TRANLATE_DURATION/2 animations:^{
self.circle.layer.transform = CATransform3DIdentity;
day.transform = CGAffineTransformIdentity;
}];
}];
}
I just put my logic.. honestly i don't read/see your code/logic but may be my idea work for you ;)
So, I think.. you should add size of circle in public variable as default size. And set this size whenever you rich at.
if (currentDay == 0 || currentDay == 8)
{
// Here you need to set your default size.
}
May be my logic work for you, Because 1 to 7 day its work fine but issue created at when currentDay rich at 0 or 8 day.
Thanks :)

Resources