ios - 多个 UIView 的动画与 UIBezierPath

Question

我有以下屏幕:

当我点击获取更多按钮时，它会添加新的圆形按钮。我在 UIView 上添加了 Pan Gesture，其中添加了所有圆形按钮，然后仅从圆形按钮绘制 UIBezierPath。到目前为止，一切正常。

现在，我想要以下内容:

1. 我有一个名为 playGroundView 的父级 UIView，它包含所有圆形按钮。这将为所有这些按钮绘制一条贝塞尔曲线路径。
2. 为所有按钮绘制贝塞尔曲线路径后，我单击“移动按钮”以立即为所有圆形按钮设置动画。
3. 一次，所有按钮都移动到贝塞尔路径的终点，然后我可以再次为同一按钮绘制更多贝塞尔路径(为圆形按钮添加更多步骤)连接到同一路径。
4. 在此之后，Final Move 按钮将立即为同一个 Button 设置整体动画。

PlayGround UIView 子类引用以下代码:

@interface PlayGroundView : UIView
@property (nonatomic, weak) PlayGroundViewController *playViewController;
@end

#import "PlayGroundView.h"
#import "RoundedButton.h"
#import "PlayGroundViewController.h"

@interface PlayGroundView () {
    UIBezierPath *path;
    BOOL isDrawPointInside;
}

@end

@implementation PlayGroundView

#pragma mark - View Methods -
- (id)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder])
        [self commonInit];
    return self;
}

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame])
        [self commonInit];
    return self;
}

- (void)drawRect:(CGRect)rect {
    [[UIColor redColor] setStroke];
    [path stroke];
}

#pragma mark - Action Methods -
- (void)pan:(UIPanGestureRecognizer *)pan {
    CGPoint currentPoint = [pan locationInView:self];
    //    NSLog(@"currentPoint: %@", NSStringFromCGPoint(currentPoint));
    if (pan.state == UIGestureRecognizerStateBegan) {
        NSMutableArray *buttonAry = [NSMutableArray array];
        buttonAry = self.playViewController.rBtnOpponentPlayerList;
        [buttonAry addObjectsFromArray:self.playViewController.rBtnPlayerList];
        for (int i=0; i<buttonAry.count; i++) {
            UIButton *btn = [buttonAry objectAtIndex:i];
            CGRect nearByRect = CGRectMake(btn.frame.origin.x - 20, btn.frame.origin.y - 20, btn.frame.size.width + 40, btn.frame.size.height + 40);
            if (CGRectContainsPoint(nearByRect, currentPoint)) {
                isDrawPointInside = YES;
                [path moveToPoint:btn.center];
                //                NSLog(@"point is inside....");
            }
        }
    }
    if (pan.state == UIGestureRecognizerStateChanged) {
        if (isDrawPointInside) {
            [path addLineToPoint:currentPoint];
            [self setNeedsDisplay];
        }
    }
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        isDrawPointInside = NO;
        //        NSLog(@"pan ended");
    }
}

#pragma mark - Helper Methods -
- (void)commonInit {
    path = [UIBezierPath bezierPath];
    path.lineWidth = 3.0;
    
    // Capture touches
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    pan.maximumNumberOfTouches = pan.minimumNumberOfTouches = 1;
    [self addGestureRecognizer:pan];
    
    // Erase with long press
    [self addGestureRecognizer:[[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(erase)]];
}

- (void)erase {
    path = [UIBezierPath bezierPath];
    path.lineWidth = 3.0;

    [self setNeedsDisplay];
}

@end

我仍然无法管理所有圆形按钮状态。让我知道在移动时管理圆形按钮所有步骤的最佳方法。

我已经提到:http://nachbaur.com/blog/core-animation-part-4

我的完整演示代码位于:https://www.dropbox.com/s/f0ri0bff8ioxtpz/FreeHandDrawingDemo%202.zip?dl=0

Answer 1

我假设，当你说“管理所有圆角按钮状态”时，你的意思是你想知道 View 已经开始动画，类似于 viewHasMovedABitAutomatically 回调:)如果是这样的话，据我所知，在 CA 框架中没有实现的方法来这样做。但是，看看这个问题:Core animation progress callback这是一种看起来很不错的解决方法，也许您可​​以从这里开始做一些事情。

哦，还有一件事。我看到您正在使用 Pan 手势识别器。我刚刚浏览了您的代码和 tarmes(另一个线程中的人 ;))，但我认为他正在使用 drawInContext 来检查正在绘制的图层。如果您的 View 是可拖动的，这也可能会触发，因此，如果是这种情况，请考虑在平移方法上使用一些 viewIsBeingDragged 标志，并在回调中检查它。

编辑:抱歉，这似乎与您的实际问题无关。我明白你的意思是控制动画速度所以他们都相应地移动。让我们详细说明一下。

据我所知，没有动画“步骤”这样的东西。动画图像将其向左移动 20 像素并不一定意味着图像将被重绘 20 次。图像将根据需要多次渲染，因此我们不能依赖渲染方法来计算它。据我所知，控制动画速度的唯一方法是通过 animateWithDuration: 的 duration 参数。你不知道持续时间，你想让速度恒定，所以持续时间是任何时间。

基础物理:持续时间等于距离除以速度，因此如果我们有需要覆盖的距离，我们可以轻松计算出动画持续时间。起初我以为 UIBezierPath 可能有一个方法或一个属性来计算总长度，但我错了。但是，在这个线程中 Get CGPath total length有一个代码是通过数值积分来计算它的，你应该测试它看看它是否有效。一旦你有了它，你就可以做这样的事情(我没有测试它，我只是输入伪代码)

#define SPEED_CALIBRATION 30.0 // or whatever

-(void)animateView:(UIView*)view withBezierPath:(UIBezierPath*)path {
    CGFloat distance = [self getBezierPathDistance:path];
    CGFloat duration = distance / SPEED_CALIBRATION;
    [self animateView:view withDuration:duration andBezierPath:path];
}

是这样的。 getBezierPathDistance 是上述线程中的方法，假设它有效，animateView:withDuration:andBezierPath: 是您使用 CA 文档执行非线性动画的方法(我不太记得所有的细节，但我记得那是一段很长的代码 ;))。

很抱歉，如果答案有点含糊，希望对您有所帮助!