如何使UIView动画序列重复和自动反转 [英] How to make UIView animation sequence repeat and autoreverse

问题描述

如何使这个复杂的动画重复和自动反转？
有没有办法添加选项UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat到这个动画序列？

  [UIView animateWithDuration：1.0f动画：^ {
 
 someView。 frame = someFrame1; 
 
}完成：^（BOOL完成）{
 
 [UIView animateWithDuration：0.5f动画：^ {
 
 someView.frame = someFrame2; 
 
}完成时间：无; 
 
}]; 
  

解决方案

动画从第1点到第2点到第3点到第2点为1并重复，您可以在iOS 7及更高版本中使用 animateKeyframesWithDuration ：

  someView.frame = frame1; 
 [UIView animateKeyframesWithDuration：2.0延迟：0.0选项：UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat动画：^ {
 [UIView addKeyframeWithRelativeStartTime：0.0 relativeDuration：0.5动画：^ {
 someView.frame = frame2; 
}]; 
 [UIView addKeyframeWithRelativeStartTime：0.5 relativeDuration：0.5动画：^ {
 someView.frame = frame3; 
}]; 
}完成：nil]; 
  

如果使用自动布局，您可以设置约束常量的更改动画：

  [UIView animateKeyframesWithDuration：2.0 delay：0.0 options：UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat动画：^ {
 [UIView addKeyframeWithRelativeStartTime：0.0 relativeDuration：0.5动画：^ {
 topConstraint.constant = 200; 
 leftConstraint.constant = 200; 
 [self.view layoutIfNeeded]; 
}]; 
 [UIView addKeyframeWithRelativeStartTime：0.5 relativeDuration：0.5动画：^ {
 topConstraint.constant = 100; 
 leftConstraint.constant = 300; 
 [self.view layoutIfNeeded]; 
}]; 
}完成：nil]; 
  

或者，自动布局的方法是停用约束，然后你可以使用<$进行动画处理c $ c> frame 值或你有什么。

---

在早期版本的iOS中，您可以使用 CAKeyframeAnimation ，例如沿路径设置动画：

  UIBezierPath * path = [UIBezierPath bezierPath]; 
 [path moveToPoint：CGPointMake（100.0,100.0）]; 
 [path addLineToPoint：CGPointMake（200.0,200.0）]; 
 [路径addLineToPoint：CGPointMake（100.0,300.0）]; 
 
 CAKeyframeAnimation * animatePosition = [CAKeyframeAnimation animationWithKeyPath：@position]; 
 animatePosition.path = [path CGPath]; 
 animatePosition.duration = 1.0; 
 animatePosition.autoreverses = YES; 
 animatePosition.repeatCount = HUGE_VALF; 
 [self.someView.layer addAnimation：animatePosition forKey：@position]; 
  

你可以用你想要的多少点来做到这一点。如果你想沿着弯曲的路径（例如圆形或贝塞尔曲线）进行动画制作，这也是一种有用的技术。

---

To just在两点之间设置动画，你可以使用 animateWithDuration：delay：options：animations：completion：，例如：

  [UIView animateWithDuration：0.5 
延迟：0.0 
期权：UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut 
动画：^ {
 //做你想要的任何动画，例如
 
 someView.frame = someFrame1; 
} 
完成：NULL]; 
  

这可以激活 someView 的移动开始帧到 someFrame1 然后回来。

顺便说一句，使用 UIViewAnimationOptionCurveEaseInOut 与结合使用UIViewAnimationOptionAutoreverse 和 UIViewAnimationOptionRepeat 将在动画反转和重复时为您提供更平滑的效果。 / p>

How to make this complex animation repeat and autoreverse? Is there any way to add options UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat to this animation sequence?

   [UIView animateWithDuration:1.0f animations:^{

        someView.frame = someFrame1;

    } completion:^(BOOL finished) {

        [UIView animateWithDuration:0.5f animations:^{

            someView.frame = someFrame2;

        } completion:nil];

    }];

解决方案

To animation from point 1 to 2 to 3 to 2 to 1 and repeat, you can do use animateKeyframesWithDuration in iOS 7 and later:

someView.frame = frame1;
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        someView.frame = frame2;
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        someView.frame = frame3;
    }];
} completion:nil];

If using auto-layout, you can animate the changing of the constraint constants:

[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        topConstraint.constant = 200;
        leftConstraint.constant = 200;
        [self.view layoutIfNeeded];
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        topConstraint.constant = 100;
        leftConstraint.constant = 300;
        [self.view layoutIfNeeded];
    }];
} completion:nil];

Or, the approach with auto layout is to deactivate the constraints, and then you can animate using frame values or what have you.

---

In earlier versions of iOS, you can use CAKeyframeAnimation, for example to animate along a path:

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100.0, 100.0)];
[path addLineToPoint:CGPointMake(200.0, 200.0)];
[path addLineToPoint:CGPointMake(100.0, 300.0)];

CAKeyframeAnimation *animatePosition = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animatePosition.path = [path CGPath];
animatePosition.duration = 1.0;
animatePosition.autoreverses = YES;
animatePosition.repeatCount = HUGE_VALF;
[self.someView.layer addAnimation:animatePosition forKey:@"position"];

You can do this with however many points you want. This also useful technique if you want to animate along a curved path (e.g. a circle or bezier curve).

---

To just animate between two points, you can use animateWithDuration:delay:options:animations:completion:, such as:

[UIView animateWithDuration:0.5
                      delay:0.0
                    options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat | UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     // do whatever animation you want, e.g.,

                     someView.frame = someFrame1;
                 }
                 completion:NULL];

This animates the movement of someView from the starting frame to someFrame1 and back.

By the way, using UIViewAnimationOptionCurveEaseInOut in conjunction with UIViewAnimationOptionAutoreverse and UIViewAnimationOptionRepeat will give you a smoother effect as the animation reverses and repeats.

这篇关于如何使UIView动画序列重复和自动反转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！