【问题标题】:pull to refresh animation like mail in iOS6拉动刷新动画,如 iOS6 中的邮件
【发布时间】:2012-07-15 14:17:20
【问题描述】:

我是一名 iOS 开发人员,最近我在测试中安装了最新的 iOS 6。当我遇到邮件拉动刷新动画时,我决定尝试自己实现它。我尝试将 CAShapeLayer 与 UIBezierPath 一起使用来创建相同的椭圆形,可以向下拖动。为了让向下部分向下拉伸,我尝试使用添加带有两个控制点的曲线并应用 CABasicAnimation。但不幸的是,结果并不像我预期的那样。由于拉伸的线条内部有点椭圆形。我想椭圆形动画必须与其他类做一些事情。如果有人能在这里引导我提出一些想法,我将不胜感激。 非常感谢

- (UIBezierPath *)createCircleForRect:(CGRect)bRect
{
    UIBezierPath *circle = [UIBezierPath bezierPath];

    CGFloat rectWidth = bRect.size.width;
    CGFloat rectHeight = bRect.size.height;

    minSize = MIN(rectWidth, rectHeight);

    //center = CGPointMake(minSize/2.0f, minSize/2.0f);

    CGFloat radius = minSize/2.0f - 5.0f;
    startPointOffset = center.x - radius;

    if(startPointOffset == 5.0f)
        testVal = 0;
    else 
        testVal += startPointOffset;

    NSLog(@"startPointOffset =>> %f", startPointOffset);
    NSLog(@"radius =>> %f", radius);

    NSLog(@"after center =>> %f, %f", center.x, center.y);

    [circle addArcWithCenter:center radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(180) clockwise:NO];

    [circle moveToPoint:CGPointMake(startPointOffset, center.y)];

    [circle addCurveToPoint:CGPointMake(center.x + radius, center.y) controlPoint1:CGPointMake(center.x - radius, rectHeight + 10.0f) controlPoint2:CGPointMake(center.x + radius, rectHeight + 10.0f)];

    [circle closePath];
    return circle;
}

-(void)startAnimation
{   
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];

    animation.duration = 1.0;

    animation.repeatCount = HUGE_VALF;

    animation.autoreverses = YES;

    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    animation.fromValue = (id)roundBPath;

    CGRect smallerRect = self.frame;

    smallerRect.size.height += 50;
    smallerRect.size.width -= 80;


    UIBezierPath *newRound = [self createCircleForRect:smallerRect];


    animation.toValue = (id)(newRound.CGPath);


    [shapeLayer addAnimation:animation forKey:@"animatePath"];
}

【问题讨论】:

  • 你在正确的轨道上。 CAShapeLayer 和 UIBezierPath 是要走的路。请记住,如果您要为路径设置动画,它们需要相同数量的点,否则动画的外观是不确定的。只要坚持下去并进行调整,直到它看起来像你想要的那样。
  • 非常感谢 :)。我之前检查过这些来源,我对 UIGestureRecognizer 有了一些想法。唯一的问题是这个动画有点反映了液滴。是的,我有一种方法总是创建具有更长高度和曲线点的新圆,但问题是弯曲不会使拉伸路径在内部有点椭圆形。如果这可以帮助我领导,我可以发布代码。非常感谢伙计。我想实现这个并将其放在 GitHub 中。我使用 CABasicAnimation fromValue,toValue。路径的点数和我想的一样。
  • 我已经解决了这个问题,经过长时间的努力,我得到了非常好的动画。通过 UIScrollView Y 轴的变化,将其应用于 CAShapeLayer 路径绘制只是简单的平滑计算。对于那些仍然想知道的人,您绝对可以使用带有两条弧线的 CAShapeLayer,但在不移动点的情况下开始绘制。最后你会得到带有 topArc、BottomArc 的 Circle,两条线都有两个曲线点。
  • 对这个解决方案感兴趣的人,我准备把它放到github上。我创建了一个通用类,有人可以轻松地自定义一些视图参数。我会尽快放上去的。

标签: ios core-animation pull-to-refresh


【解决方案1】:

iOS 6 Mail 中的下拉刷新控件是任何应用都可以使用的标准 UIKit 控件:请参阅 UITableViewController 上的 refreshControl 属性和 UIRefreshControl 类。 (另请注意,您可以在 XCode 4.5 上的 IB 中通过为表视图控制器选择“Refreshing -> Enabled”来设置一个。)

不过,如果您要部署到 iOS 5 或更早版本,ODRefreshControl 是一个不错的选择。

【讨论】:

  • 抱歉,我在 IB(故事板)上找不到“刷新 -> 启用”选项。截图会有所帮助。
  • @EnekoAlonso 和其他人引用这个旧线程,刷新启用选项适用于 UITableviewControllers,而不仅仅是 UITableView
【解决方案2】:

【讨论】:

  • 这个。非常准确地再现了 Apple 所做的事情。唯一的区别:它没有实现 iOS 6.0 中的 setAttributedTitle: 接口,但如果你想一想,在 iOS 6.0 之前,NSAttributedString 支持会受到限制。
猜你喜欢
  • 2020-02-09
  • 2020-05-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-05
  • 1970-01-01
相关资源
最近更新 更多