如何按順序執行兩個動畫


問題:

假如:需要按順序執行兩個動畫A、B,B動畫需要在A動畫執行完畢后再執行。兩個動畫的執行不能有時間間隔,即A動畫執行完畢立即執行B動畫。

實現方案:

事先已經導入了Facebook的pop框架,並#import <POP.h>

1.設置A動畫的動畫時間,執行A動畫

2.創建NSTimer定時器timer,設置時間間隔為A動畫的動畫時間。並把timer添加到主運行循環。

3.把B動畫添加到timer調用的的selector方法中。

 

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    // 執行第一個動畫 POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha]; anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; anim.fromValue = @(1.0); anim.toValue = @(0.2); anim.duration = 1.0; [self.redView pop_addAnimation:anim forKey:@"fade"]; // 定時器(設置定時器的時間間隔和第一個動畫的動畫時間相等) NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(backAnim) userInfo:nil repeats:NO]; [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes]; } // 調用方法執行第二個動畫 - (void)backAnim { POPBasicAnimation *anim2 = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha]; anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; anim2.fromValue = @(0.2); anim2.toValue = @(1.0); anim2.duration = 1.0; [self.redView pop_addAnimation:anim2 forKey:@"fade2"]; }

以上代碼實現了A動畫執行完畢立即執行B動畫。

如果需要重復執行A、B動畫。即A->B->A->B->A->B....還需要再添加一個定時器

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
   // timer1的時間間隔為第一個動畫和第二個動畫的動畫時間之和
    NSTimer *timer1 = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(repeat) userInfo:nil repeats:YES];
    // 把定時器timer1加入到主運行循環
    [[NSRunLoop mainRunLoop] addTimer:timer1 forMode:NSRunLoopCommonModes];
}

- (void)repeat
{
    // 第一個動畫
    POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.fromValue = @(1.0);
    anim.toValue = @(0.2);
    anim.duration = 1.0;
    
    [self.redView pop_addAnimation:anim forKey:@"fade"];
    // timer2的時間間隔為第一個動畫的動畫時間
    NSTimer *timer2 = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(backAnim) userInfo:nil repeats:NO];
   // 把定時器timer2加入到主運行循環 [[NSRunLoop mainRunLoop] addTimer:timer2 forMode:NSRunLoopCommonModes]; } // 第二個動畫
- (void)backAnim { POPBasicAnimation *anim2 = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha]; anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; anim2.fromValue = @(0.2); anim2.toValue = @(1.0); anim2.duration = 1.0; [self.redView pop_addAnimation:anim2 forKey:@"fade2"]; }

 這個效果是通過修改控件的透明度來模仿了呼吸燈的效果。

額外補充:呼吸燈效果

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 // 注意:只有可動畫屬性(animatable)才可以這么做
        [UIView animateWithDuration:1.0 animations:^{
       // 改變透明度 self.redView.alpha
= 0.2; } completion:^(BOOL finished) { [UIView animateWithDuration:1.0 animations:^{
          // 改變透明度 self.redView.alpha
= 1.0; }]; }]; }

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com