Question

我有一个自定义按钮，它是我自己的UIButton子类。它看起来像一个带圆圈的箭头，从某个角度startAngle开始，在某个endAngle=startAngle+1.5*M_PI处结束。 startAngle是按钮的属性，然后在其drawRect:方法中使用。当按下此按钮时，我想让此箭头在其中心周围连续旋转2Pi。所以我认为我可以轻松使用[UIView beginAnimations: context:]，但显然它不能被使用，因为它不允许动画自定义属性。 CoreAnimation也没有套件，因为它只为CALayer属性设置动画。

那么在iOS中实现UIView子类的自定义属性动画的最简单方法是什么？或者也许我错过了一些东西，并且可以用已经提到的技术？

谢谢。

Answer 1

感谢Jenox我使用CADisplayLink更新了动画代码，这似乎是比NSTimer更正确的解决方案。所以我现在用CADisplayLink显示正确的实现。它与前一个非常接近，但更简单一点。

我们将QuartzCore框架添加到我们的项目中。然后我们将以下行放在我们类的头文件中：

CADisplayLink* timer;
Float32 animationDuration;  // Duration of one animation loop
Float32 initAngle;  // Represents the initial angle 
Float32 angle;  // Angle used for drawing
CFTimeInterval startFrame;  // Timestamp of the animation start

-(void)startAnimation;  // Method to start the animation
-(void)animate;  // Method for updating the property or stopping the animation

现在在实现文件中，我们设置动画持续时间的值和其他初始值：

initAngle=0.75*M_PI;
angle=initAngle;
animationDuration=1.5f;  // Arrow makes full 360° in 1.5 seconds
startFrame=0;  // The animation hasn't been played yet

要启动动画，我们需要创建CADisplayLink实例，该实例将调用方法animate并将其添加到我们应用程序的主RunLoop中：

-(void)startAnimation
{
   timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(animate)];
   [timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}

此计时器将在应用程序的每个runLoop中调用animate方法。

现在我们在每个循环之后实现了更新属性的方法：

-(void)animate
{
   if(startFrame==0) {
      startFrame=timer.timestamp;  // Setting timestamp of start of animation to current moment
      return;  // Exiting till the next run loop
   } 
   CFTimeInterval elapsedTime = timer.timestamp-startFrame;  // Time that has elapsed from start of animation
   Float32 timeProgress = elapsedTime/animationDuration;  // Determine the fraction of full animation which should be shown
   Float32 animProgress = timingFunction(timeProgress); // The current progress of animation
   angle=initAngle+animProgress*2.f*M_PI;  // Setting angle to new value with added rotation corresponding to current animation progress
   if (timeProgress>=1.f) 
   {  // Stopping animation
      angle=initAngle; // Setting angle to initial value to exclude rounding effects
      [timer invalidate];  // Stopping the timer
      startFrame=0;  // Resetting time of start of animation
   }
   [self setNeedsDisplay];  // Redrawing with updated angle value
}

与NSTimer的情况不同，我们现在不需要计算更新角度属性和重绘按钮的时间间隔。我们现在只需要计算从动画开始经过的时间，并将属性设置为与此进度相对应的值。

我必须承认动画比NSTimer更顺畅。默认情况下，CADisplayLink会在每个运行循环中调用animate方法。当我计算帧速率时，它是120 fps。我认为它不是很有效，所以我通过在将其添加到mainRunLoop之前更改CADisplayLink的frameInterval属性将帧速率降低到22 fps：

timer.frameInterval=3;

这意味着它将在第一次运行循环时调用animate方法，然后在接下来的3个循环中执行任何操作，并在第4次调用，依此类推。这就是为什么frameInterval只能是整数。

Answer 2

再次感谢k06a建议使用计时器。我已经研究了如何使用NSTimer，现在我想展示我的实现，因为我认为它对其他人有用。

所以在我的情况下，我有一个UIButton子类正在绘制一个弯曲的箭头，该箭头从某个角度Float32 angle;开始，这是从中开始绘制整个箭头的主要属性。这意味着只需更改角度值就会旋转整个箭头。因此，要制作此旋转的动画，我将以下行放在我的类的头文件中：

NSTimer* timer;
Float32 animationDuration;  // Duration of one animation loop
Float32 animationFrameRate;  // Frames per second
Float32 initAngle;  // Represents the initial angle 
Float32 angle;  // Angle used for drawing
UInt8 nFrames;  // Number of played frames

-(void)startAnimation;  // Method to start the animation
-(void)animate:(NSTimer*) timer;  // Method for drawing one animation step and stopping the animation

现在在实现文件中，我设置了动画的持续时间和帧速率值以及绘图的初始角度：

initAngle=0.75*M_PI;
angle=initAngle;
animationDuration=1.5f;  // Arrow makes full 360° in 1.5 seconds
animationFrameRate=15.f;  // Frame rate will be 15 frames per second
nFrames=0;  // The animation hasn't been played yet

要启动动画，我们需要创建NSTimer实例，该实例每1/15秒调用一次方法animate:(NSTimer*) timer：

-(void)startAnimation
{
   timer = [NSTimer scheduledTimerWithTimeInterval:1.f/animationFrameRate target:self selector:@selector(animate:) userInfo:nil repeats:YES];
}

此计时器将立即调用animate:方法，然后每1/15秒重复一次，直到手动停止。

现在我们实现了一个动画单步的方法：

-(void)animate:(NSTimer *)timer
{
   nFrames++;  // Incrementing number of played frames
   Float32 animProgress = nFrames/(animationDuration*animationFrameRate); // The current progress of animation
   angle=initAngle+animProgress*2.f*M_PI;  // Setting angle to new value with added rotation corresponding to current animation progress
   if (animProgress>=1.f) 
   {  // Stopping animation when progress is >= 1
      angle=initAngle; // Setting angle to initial value to exclude rounding effects
      [timer invalidate];  // Stopping the timer
      nFrames=0;  // Resetting counter of played frames for being able to play animation again
   }
   [self setNeedsDisplay];  // Redrawing with updated angle value
}

我要提到的第一件事是，对于我而言，由于舍入效应，比较线angle==initAngle无效。完全旋转后它们不完全相同。这就是为什么我检查它们是否足够接近然后将角度值设置为初始值以阻止多次重复动画循环后的角度值的小漂移。并且完全正确，此代码还必须管理角度转换，始终在0到2 * M_PI之间，如下所示：

angle=normalizedAngle(initAngle+animProgress*2.f*M_PI);

其中

Float32 normalizedAngle(Float32 angle)
{
   while(angle>2.f*M_PI) angle-=2.f*M_PI;
   while(angle<0.f) angle+=2.f*M_PI;
   return angle
}

另一个重要的事情是，遗憾的是，我不知道任何简单的方法将easeIn，easeOut或其他默认animationCurves应用于这种手动动画。我认为它不存在。但是，当然可以手工完成。代表该计时功能的线是

Float32 animProgress = nFrames/(animationDuration*animationFrameRate);

可以将其视为Float32 y = x;，即线性行为，恒定速度，与时间速度相同。但您可以将其修改为y = cos(x)或y = sqrt(x)或y = pow(x,3.f)，这会产生一些非线性行为。考虑到x将从0（动画开始）变为1（动画结束），你可以自己考虑。

为了更好看代码，最好做一些独立的定时功能：

Float32 animationCurve(Float32 x)
{
  return sin(x*0.5*M_PI);
}

但是现在，由于动画进度和时间之间的依赖关系不是线性的，因此使用时间作为停止动画的指示器会更安全。（你可能希望例如让你的箭头旋转1.5整圈而不是旋转回初始角度，这意味着你的animProgress将从0变为1.5而不是返回1，而timeProgress将从0变为1。）因此，为了安全起见，我们现在将时间进度和动画进度分开：

Float32 timeProgress = nFrames/(animationDuration*animationFrameRate);
Float32 animProgress = animationCurve(timeProgress);

然后检查时间进度以决定动画是否应停止：

if(timeProgress>=1.f)
{
   // Stop the animation
}

顺便说一下，如果有人知道动画的有用计时功能列表的一些来源，我将不胜感激，如果你分享它们。

内置MacOS X实用程序Grapher在可视化功能方面提供了很多帮助，因此您可以看到动画进度将取决于时间进度。

希望它有助于某人...

Answer 3

- (void)onImageAction:(id)sender
{
    UIButton *iconButton = (UIButton *)sender;
    if(isExpand)
{
    isExpand = FALSE;

    // With Concurrent Block Programming:
    [UIView animateWithDuration:0.4 animations:^{
        [iconButton setFrame:[[btnFrameList objectAtIndex:iconButton.tag] CGRectValue]];
    } completion: ^(BOOL finished) {
        [self animationDidStop:@"Expand" finished:YES context:nil];
    }];
}
else
{
    isExpand = TRUE;

    [UIView animateWithDuration:0.4 animations:^{
        [iconButton setFrame:CGRectMake(30,02, 225, 205)];
    }];

    for(UIButton *button in [viewThumb subviews])
    {
        [button setUserInteractionEnabled:FALSE];
        //[button setHidden:TRUE];
    }
    [viewThumb bringSubviewToFront:iconButton];

    [iconButton setUserInteractionEnabled:TRUE];
   // [iconButton setHidden:FALSE];
    }
}

在iOS中非常自定义UIButton动画

3 个答案: