创建类似于UIAlertView演示的Pop动画

时间:2010-04-22 12:37:51

标签: iphone cocoa-touch core-animation

我想以与UIAlertView相同的方式呈现视图 - 一个流行/弹簧。不幸的是,子类化UIAlertView不是我需要呈现的视图的选项。我已经写了一些代码,但我似乎无法像我想的那样实现它。如果有任何相似之处(我在Google上找不到任何内容),我将不胜感激任何有关更大现实主义或链接的建议。谢谢。

  - (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {

        self.backgroundColor = [UIColor whiteColor];

        v = [[UIView alloc] initWithFrame:CGRectMake(140, 140, 60, 60)];
        v.backgroundColor = [UIColor blueColor];

        [self addSubview:v];
        [self animate];

    }
    return self;
}

- (void)animate {

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:0.2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(popStep1Complete)];
    v.frame = CGRectMake(90, 90, 140, 140);
    [UIView commitAnimations];
}

- (void)popStep1Complete {

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:0.15];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(popStep2Complete)];
    v.frame = CGRectMake(110, 110, 100, 100);
    [UIView commitAnimations];
}

- (void)popStep2Complete {

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:0.15];
    v.frame = CGRectMake(100, 100, 120, 120);
    [UIView commitAnimations];
}

3 个答案:

答案 0 :(得分:77)

- (void) attachPopUpAnimation
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation
        animationWithKeyPath:@"transform"];

    CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1);
    CATransform3D scale2 = CATransform3DMakeScale(1.2, 1.2, 1);
    CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1);
    CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1);

    NSArray *frameValues = [NSArray arrayWithObjects:
        [NSValue valueWithCATransform3D:scale1],
        [NSValue valueWithCATransform3D:scale2],
        [NSValue valueWithCATransform3D:scale3],
        [NSValue valueWithCATransform3D:scale4],
        nil];
    [animation setValues:frameValues];

    NSArray *frameTimes = [NSArray arrayWithObjects:
        [NSNumber numberWithFloat:0.0],
        [NSNumber numberWithFloat:0.5],
        [NSNumber numberWithFloat:0.9],
        [NSNumber numberWithFloat:1.0],
        nil];    
    [animation setKeyTimes:frameTimes];

    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.duration = .2;

    [self.layer addAnimation:animation forKey:@"popup"];
}

答案 1 :(得分:7)

指向delackner帖子的指针也是我发现的最好的初始值。我只会为那些试图真正模仿UIAlertView的人提供一些东西:

  1. 添加圆角边框,边框和半透明图层颜色
  2. 一些alpha淡入/淡出和
  3. 使用最新的iOS工具链对块进行重做更简洁
  4. 我还发现最初的1.1横向扩展他认为太大了,在大多数情况下,1.05在视觉上看起来更正确
  5. 代码:

    self.layer.cornerRadius = 10.0;
    [self.layer setMasksToBounds:YES];
    self.layer.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:0.60].CGColor;
    self.layer.borderColor = [UIColor whiteColor].CGColor;
    self.layer.borderWidth = 1.1;
    if (self.hidden == YES) { // swoop in if coming from hidden, otherwise pulse in-place
      self.transform = CGAffineTransformMakeScale(0.6, 0.6);
    }
    self.hidden = NO;
    [UIView animateWithDuration:0.2
                     animations:^{
                       self.transform = CGAffineTransformMakeScale(1.05, 1.05);
                       self.alpha = 0.8;
                     }
                     completion:^(BOOL finished){
                       [UIView animateWithDuration:1/15.0
                                        animations:^{
                                          self.transform = CGAffineTransformMakeScale(0.9, 0.9);
                                          self.alpha = 0.9;
                                        }
                                        completion:^(BOOL finished) {
                                          [UIView animateWithDuration:1/7.5
                                                           animations:^{
                                                             self.transform = CGAffineTransformIdentity;                                                             
                                                             self.alpha = 1.0;
                                                           }
                                           ];
                                        }
                        ];
                     }
     ];
    

答案 2 :(得分:5)

有一件事:如果你使用CAKeyframeAnimation而不是多个UIView排队的动画,这样的多步动画会容易得多。