iOS 使用 CGAffineTransform Make Translation 从一个 View 的中心到另一个 View 的中心绘制虚线动画第二个 View

Question

我正在尝试构建一个具有挑战性的东西。

基本上，我在这里得到了这个场景:

由于这个 Stackoverflow 答案，我能够画出虚线:

Draw dotted (not dashed!) line, with IBDesignable in 2017

虚线画在里面完成:

-(void)drawRect:(CGRect)rect
{
    [self drawDottedLineFromStartingPoint:self.mainPhoto.center ToEndPoint:self.photo1.center];

    [self drawDottedLineFromStartingPoint:self.mainPhoto.center ToEndPoint:self.photo2.center];

    [self drawDottedLineFromStartingPoint:self.mainPhoto.center ToEndPoint:self.photo3.center];

    [self drawDottedLineFromStartingPoint:self.mainPhoto.center ToEndPoint:self.photo4.center];

    [self drawDottedLineFromStartingPoint:self.mainPhoto.center ToEndPoint:self.photo5.center];
}

-(void)drawDottedLineFromStartingPoint:(CGPoint)startPoint ToEndPoint:(CGPoint)endPoint
{
    UIBezierPath *path = [[UIBezierPath alloc] init];

    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];
    path.lineWidth = 4;

    CGFloat dashes[] = {path.lineWidth * 0, path.lineWidth * 2};

    [path setLineDash:dashes count:2 phase:0];
    path.lineCapStyle = kCGLineCapRound;

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(ctx, [ThemeManager mediumTextColor].CGColor);

    [path stroke];
}

我面临的问题是，每个较小的圆圈都通过落入到位而动画化。

我为小圆圈制作动画的方式是使用类似的东西:

CGAffineTransformMakeTranslation(0, 50);

当我这样做时，虚线从大圆圈绘制到小圆圈的最终静止位置，虚线不会“跟随”小圆圈，因为它正在动画和下降。

所以你看到的是这样的:

对于我想要实现的目标，有什么简单的解决方案吗？我试过考虑使用 NSTimer 并计算斜边长度，除以持续时间，但我没有走得太远 :D

Answer 1

我不久前制作了一个应用程序，它执行的操作与您想要的类似，所以我修改了它以执行您想要执行的操作。我有一个名为 NodeView 的类，它只是一个 UIView 子类，具有一个名为 line 的属性，它是一个 UIBezierPath(您可以子类化 UIImageView 来做同样的事情)。我使用计时器移动节点，并观察节点的中心属性，这样我就可以调用 drawRect 来描边节点的线。这个版本一个一个地移动节点。我将 Controller 的 View 设置为 UIView 的子类，这是该子类中的代码，

#import "RDView.h"
#import "NodeView.h"

@interface RDView ()
@property (weak, nonatomic) IBOutlet UIView *bigView; // this is equivalent to your large image view from which the other image views drop
@property (strong,nonatomic) NSMutableArray *paths;
@end

@implementation RDView


-(void)didMoveToWindow {
    self.bigView.layer.cornerRadius = self.bigView.frame.size.width/2.0;
    self.paths = [NSMutableArray new];
    self.nodes = [NSMutableArray new];
    for (int i = 0; i<5; i++) {
        NodeView *aNode = [NodeView new];
        CGFloat hue = arc4random_uniform(1000)/1000.0;
        aNode.backgroundColor = [UIColor colorWithHue:hue saturation:1 brightness:1 alpha:1.0];
        aNode.frame = CGRectMake(0, 0, 40, 40);
        [self.bigView layoutIfNeeded];
        aNode.center = self.bigView.center;
        [self addSubview:aNode];
        [self.nodes addObject:aNode];

        aNode.line = [UIBezierPath bezierPath];
        CGFloat dashes[] = {0, aNode.line.lineWidth * 4};
        [aNode.line setLineDash:dashes count:2 phase:0];
        aNode.line.lineCapStyle = kCGLineCapRound;
        [aNode.line moveToPoint:[self.bigView center]];
    }
    [self bringSubviewToFront:self.bigView];
    for (NodeView *aNode in self.nodes) {
        [aNode addObserver:self forKeyPath:@"center" options:NSKeyValueObservingOptionNew context:nil];
    }

    [self performSelector:@selector(dropNodes) withObject:nil afterDelay:1];
}

-(void)dropNodes {
    static int i = 0;
    [NSTimer scheduledTimerWithTimeInterval:.005 target:self selector:@selector(dropNode:) userInfo:@{@"nodeIndex":@(i)} repeats:YES];
    i++;
}

-(void)dropNode:(NSTimer *) timer {
    NSInteger i = [timer.userInfo[@"nodeIndex"] integerValue];
    NodeView *node = self.nodes[i];
    [node setCenter: CGPointMake(node.center.x + (i-2)*.25, node.center.y + 1)]; // spread the nodes out horizontally and move down
    [node.line addLineToPoint:node.center];
    if (node.center.y > 400) {
        [timer invalidate];
        if (i < self.nodes.count-1) {
            [self dropNodes];
        }
    }
}


-(void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if ([keyPath isEqualToString:@"center"] ) {
        [self setNeedsDisplay];
    }
}


- (void)drawRect:(CGRect)rect {
    for (NodeView *aNode in self.nodes) {
        [aNode.line stroke];
    }
}

你可以在这里找到我的项目的链接，http://jmp.sh/lIl5MXp