链UIView动画与时间间隔 [英] Chain UIView animations with time intervals

问题描述

我需要动画3个UIViews（淡入/淡出）。
1动画持续时间为0.6秒（淡入/淡出周期为0.6 + 0.6s）。但我需要在0.2秒内启动动画。

I need to animate 3 UIViews (fade in/out). 1 animation duration is 0.6s (fade in/out cycle is 0.6+0.6s). But I need to launch animations in 0.2 seconds.

• 第一个动画应该在0.0秒内启动。


• 第二个动画应该在0.2秒内启动。


• 第3个动画应该在0.4秒内启动。

所有这些都应该是循环无限期（直到某些触发）。

And all of them should be looped "indefinitely" (until some trigger).

目前我所拥有的：

- (void)playAnimation {
    isAnimated = YES;
    [self animateView:firstView afterDelay:0.0];
    [self animateView:secondView afterDelay:0.2];
    [self animateView:thirdView afterDelay:0.4];
}

- (void)stopAnimation {
    isAnimated = NO;
}

- (void)animateView:(UIView *)animatedView afterDelay:(float)delay {
    if(isAnimated) {
        [UIView animateWithDuration:0.6 delay:delay options:UIViewAnimationOptionTransitionNone
                     animations:^ {
            animatedView.alpha = 1.0;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.6 animations:^ {
                animatedView.alpha = 0.0;
            } completion:^(BOOL finished) {
                [self animateView:animatedView afterDelay:0.0];
            }];
        }];
    }
}

此代码无法预测。有时视图动画的工作方式与我想要的一样（相位为0.2秒），有时它会在同一时间开始...
这样做的正确方法是什么？我还尝试从方法签名中删除 afterDelay：部分，并启动类似的效果：a / b>

This code works unpredictable. Sometimes view animation works like I want (with phase 0.2 seconds), some times it starts in the same time... What will be the proper way to do that? I've also tried to remove afterDelay: part from method signature and launch animateView method like that with exactly same effect:

[self performSelector:@selector(animateView:) withObject:thirdView afterDelay:0.6];

UPDATE

我注意到了动画当重型网络资源在后台执行时（使用AFNetworking加载大图像），休息。
我不介意动画会冻结一点（虽然我更喜欢没有延迟）但我真的想保持所有动画的相位相关（相同的相位差）。

UPDATE
I've noticed that animation "breaks" when heavy networking stuff is performing in background (loading big images using AFNetworking). I don't mind if animation will "freeze" a bit (though I prefer to not have delays at all) but I really want to keep phases of all animations linked (with same phase difference).

为了让问题更容易理解，我添加了图表。 Y是alpha，X是时间。前3个图 - 我想要的。最底层的 - 我现在拥有的。突出显示的区域是问题的来源。您可以看到第二个视图的动画冻结0.2秒并与第三个同步。所以他们开始在同一阶段眨眼。这只是一个例子。有时他们可以动画好，有时所有3个视图在几轮动画中同步并在同一阶段闪烁...

To make problem easier to understand I've added graphs. Y is alpha, X is time. Top 3 graphs - what I want to have. Bottom ones - what I currently have. Highlighted area is where problem comes. You can see that second view's animation freeze for 0.2 seconds and synchronise with 3rd one. So they start blinking in the same phase. This is just one example. Some times they can animate ok, sometimes all 3 views "syncronize" in few rounds of animation and blink in same phase...

推荐答案

看起来你想要同样的动画，应用于所有3个视图，偏移t = 0.2。您可以使用Core Animation以非常轻松的方式完成您想要的任务。

Looks like you want the same animation, applied to all 3 views, offset by t=0.2. You can use Core Animation to do exactly what you want with very little effort.

这样做，他们将始终正确计时。

Doing it this way they will always be timed correctly.

我建议：

-(void)playAnimation
{
    CABasicAnimation * anim = [ CABasicAnimation animationWithKeyPath:@"opacity" ] ;
    anim.autoreverses = YES ;
    anim.repeatCount = CGFLOAT_MAX ;
    anim.removedOnCompletion = NO ;
    anim.duration = 0.6 ;
    anim.fromValue = @0.0 ;
    anim.toValue = @1.0;

    // finish configuring your animation here (timing function, speed, duration, fill mode, etc) ...

    CFTimeInterval t = CACurrentMediaTime() ;

    anim.beginTime = t ;
    [ self.firstView.layer addAnimation:anim forKey:@"opacity-anim" ] ; // name is so you can remove this anim later

    anim.beginTime += 0.2 ;
    [ self.secondView.layer addAnimation:anim forKey:@"opacity-anim" ] ;

    anim.beginTime += 0.2 ;
    [ self.thirdView.layer addAnimation:anim forKey:@"opacity-anim" ] ; // name is so you can remove this anim later
}

-(void)stopAnimation
{
    [ self.firstView.layer removeAnimationForKey:@"opacity-anim" ] ;
    [ self.secondView.layer removeAnimationForKey:@"opacity-anim" ] ;
    [ self.thirdView.layer removeAnimationForKey:@"opacity-anim" ] ;
}

编辑：oops！忘了开始，结束价值！

edit: oops! forgot the start, end values!

这篇关于链UIView动画与时间间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！