提问



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


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


谢谢。

最佳参考


感谢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只能是整数。

其它参考1


再次感谢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在可视化功能方面提供了很多帮助,因此您可以看到动画进度将取决于时间进度。


希望它有助于某人......

其它参考2


- (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];
    }
}