how to increase and decrease the image alpha value with animation in ios sdk?

Question

In this code i am using animation.But at a time i need to change the image alpha value also.

-(void)animation
{
    CGPoint point = CGPointMake(imgView.frame.origin.x, imgView.frame.origin.y);
    imgView.layer.position = point;
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position.x"];
    anim.fromValue  = [NSValue valueWithCGPoint:point];
    anim.toValue    = [NSValue valueWithCGPoint:CGPointMake(point.x + 50, point.y)];
    anim.duration   = 10.0f;
    anim.repeatCount =1;
    anim.removedOnCompletion = YES;

    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    [imgView.layer addAnimation:anim forKey:@"position.x"];
    imgView.layer.position = point;
}

Midhun MP · Accepted Answer · 2013-09-06T13:48:54.383

6

You can use the opacity key of CABasicAnimation for doing this:

CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0];
alphaAnimation.toValue = [NSNumber numberWithFloat:0.0];
[imgView.layer addAnimation:alphaAnimation forKey:@"opacity"];

Edit:

For animating through specified values you can use CAKeyframeAnimation:

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    animation.duration = 10.0f;
    animation.repeatCount = 1;
    animation.values  =  [NSArray arrayWithObjects:
                          [NSNumber numberWithFloat:1.0,
                          [NSNumber numberWithFloat:0.5],
                          [NSNumber numberWithFloat:1.0],nil];
    animation.keyTimes = [NSArray arrayWithObjects:
                          [NSNumber numberWithFloat:0.0],
                          [NSNumber numberWithFloat:5.0],
                          [NSNumber numberWithFloat:10.0], nil];
    [imgView.layer addAnimation:animation forKey:@"opacity"];

edited Sep 06 '13 at 13:48

answered Sep 06 '13 at 12:38

Midhun MP

103,496
31
153
200

@user2545298: With pleasure :) – Midhun MP Sep 06 '13 at 12:45
hi..Also another requirement is when image is changing it's x position alpha value should be decrease that means image will be seen lighter.After that it came to next position image should be brighter. Thank's in advance if u have any solution share to me. – raja Sep 06 '13 at 12:50
@user2545298: I modified my answer, please check – Midhun MP Sep 06 '13 at 13:49
1

I don't know if this has been changed since this answer is posted. But keyTimes is a relative normalized value array. Each value in the array is a floating point number in the range [0,1]. So the three keyTimes above should be [0, .5, 1]. – Ge Liu Jun 26 '15 at 03:42
As a side note, I had animation.isAdditive = YES, and then opacity will just cummulate and be max. So, set it to isAdditive = NO to act correctly. – Guntis Treulands Jul 31 '19 at 15:42

score 1 · Answer 2 · answered Sep 06 '13 at 13:04

In order to decrease the alpha as the same time/rate the x position of your view is moving, just put the position setting code together with the alpha setting code in the same block of animation, like below:

CGPoint finalPoint = CGPointMake(500, imgView.center.y); //change for any final point you want
CGFloat finalAlpha = 0.0; //change the final alpha as you want
UIView animateWithDuration:1.0 animations:^{ //change the duration as you want
   imgView.alpha = finalAlpha; 
   imgView.center = finalPoint;
}];

NiravPatel · Answer 3 · 2013-09-06T12:51:08.837

0

//your code of changing x position will be here

now implement my code which is written below.

 UIView animateWithDuration:1.0 animations:^{
imgView.alpha = 0.5;//must be in between 0 to 1
 }];

now when your imageview move to next position as you are saying, write below code

//your code for imageview for next position.. now implement below code...

 UIView animateWithDuration:0.5 animations:^{
imgView.alpha = 1.0;//must be in between 0 to 1
 }];

let me know it is working or not!!!! Hope it helps...

Happy Coding!!!

edited Sep 06 '13 at 12:51

answered Sep 06 '13 at 12:37

NiravPatel

3,260
2
21
31

hi..my requirement is when image is changing it's x position alpha value should be decrease that means image will be seen lighter.After that it came to next position image should be brighter. Thank's in advance if u have any solution share to me. – raja Sep 06 '13 at 12:45

score 0 · Answer 4 · answered Sep 06 '13 at 12:38

This "fades to invisible" self.view in 500ms.

Anything you do prior to invoking it will be set "immediately", everything you set within the `animation' block (like setting new frame coordinates) will be interpolated over the specified duration.

        [UIView animateWithDuration:0.50
                              delay:0.0
                            options:(   UIViewAnimationOptionAllowUserInteraction
                                     |  UIViewAnimationOptionBeginFromCurrentState
                                     |  UIViewAnimationOptionCurveEaseInOut)

                         animations:^ {
                             self.view.alpha = 0.0f ;
                         }

                         completion: ^(BOOL){
                             [self.view removeFromSuperview] ;
                             self.view = nil ;
                         }
         ] ;

score 0 · Answer 5 · answered Sep 06 '13 at 12:39

You may use a CABasicAnimation object (a different one because you will animate a different KeyPath, namely alpha, for this) and use NSNumbers for fromValue and toValue.

Another (and easiest) way is to use the UIView helper methods dedicated to animation ( animateWithDuration:… and all), especially if you have to animate multiple properties at the same time (you may animate both the frame and the alpha with the same animation block if it fits your needs and simplify your code).

You can also mix CABasicAnimation for the frame and [UIView animateWithDuration:…] for the alpha, whatever combination you need depending on if your animations are complex and need to be customized (custom timing function, non-linear animation, …) or not.

how to increase and decrease the image alpha value with animation in ios sdk?

5 Answers5

Linked