使用自动反转的UIView动画

Question

我的设置有问题UIViewAnimationOptionAutoReverse.这是我的代码.

CALayer *aniLayer = act.viewToChange.layer;
[UIView animateWithDuration:2.0 delay:1.0 options:(UIViewAnimationCurveLinear | UIViewAnimationOptionAutoreverse) animations:^{
                    viewToAnimate.frame = GCRectMake(1,1,100,100);
                    [aniLayer setValue:[NSNumber numberWithFloat:degreesToRadians(34)] forKeyPath:@"transform.rotation"];
                } completion:nil ];

问题是,在动画反转后,视图会跳回到动画块中设置的帧.我希望视图成长并"取消"并停在原来的位置.

有没有编程两个连续动画的解决方案？

Answer 1

你有三个选择.

使用这些-[UIView animateWithDuration:…]方法时,您在animations块中所做的更改会立即应用于相关视图.但是,还有一个隐式CAAnimation应用于视图,从旧值到新值的动画.当a CAAnimation在视图上处于活动状态时,它会更改显示的视图,但不会更改视图的实际属性.

例如,如果您这样做:

NSLog(@"old center: %@", NSStringFromCGPoint(someView.center));
[UIView animateWithDuration:2.0 animations: ^{ someView.center = newPoint; }];
NSLog(@"new center: %@", NSStringFromCGPoint(someView.center));

你会看到'旧中心'和'新中心'是不同的; 新中心将立即反映newPoint的价值.但是,CAAnimation隐式创建的视图将导致视图仍然显示在旧中心并顺利移动到新中心.当动画结束时,它将从视图中删除,然后切换回仅查看实际模型值.

传递时UIViewAnimationOptionAutoreverse,它会影响隐式创建CAAnimation,但不会影响您对值进行的实际更改.也就是说,如果上面的示例已经UIViewAnimationOptionAutoreverse定义了,那么隐式创建的CAAnimation将从oldCenter动画到newCenter并返回.然后将移除动画,我们将切换回看到我们设置的值... 它仍处于新位置.

正如我所说,有三种方法可以解决这个问题.第一种是在动画上添加一个完成块来反转它,如下所示:

第一选择

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                 animations: ^{ someView.center = newPoint; }
                 completion: 
   ^(BOOL finished) {
       [UIView animateWithDuration:2.0
                        animations:^{ someView.center = oldCenter; }];
   }];

第二选择

第二个选项是像您一样自动反转动画,并将视图设置回完成块中的原始位置:

CGPoint oldCenter = someView.center;
[UIView animateWithDuration:2.0
                      delay:0
                    options: UIViewAnimationOptionAutoreverse
                 animations: ^{ someView.center = newPoint; }
                 completion: ^(BOOL finished) { someView.center = oldCenter; }];

但是,这可能会导致动画自动反转完成和完成块运行之间的闪烁,因此它可能不是您的最佳选择.

第三种选择

最后一个选项是直接创建一个CAAnimation.如果您实际上不想更改要更改的属性的最终值,则通常更简单.

#import <QuartzCore/QuartzCore.h>

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.autoreverses = YES;
animation.repeatCount = 1; // Play it just once, and then reverse it
animation.toValue = [NSValue valueWithCGPoint:newPoint];
[someView.layer addAnimation:animation forKey:nil];

请注意,执行CAAnimation方式永远不会更改视图的实际值; 它只是用动画掩盖实际值.该视图仍然认为它位于原始位置.(这意味着,例如,如果您的视图响应触摸事件,它仍将监视在原始位置发生的那些触摸事件.动画仅改变视图绘制的方式;没有别的.

该CAAnimation方法还要求您将其添加到视图的底层CALayer.如果这让您感到害怕,请随意使用这些-[UIView animateWithDuration:…]方法.通过使用可以获得其他功能CAAnimation,但是如果它是您不熟悉的东西,那么链接UIView动画或在完成块中重置它是完全可以接受的.实际上,这是完成块的主要目的之一.

所以,你去吧.三种不同的方法来反转动画并保持原始值.请享用!

Answer 2

这是我的解决方案.对于2x重复,动画1.5x并自己做最后0.5x部分:

[UIView animateWithDuration:.3
                      delay:.0f
                    options:(UIViewAnimationOptionRepeat|
                             UIViewAnimationOptionAutoreverse)
                 animations:^{
                     [UIView setAnimationRepeatCount:1.5f];

                     ... animate here ...

                 } completion:^(BOOL finished) {
                         [UIView animateWithDuration:.3 animations:^{

                             ... finish the animation here ....

                         }];
                 }];

没有闪烁,效果很好.