绘制CAShapeLayer和UIBeizerPath时的异步动画

问题描述

我试图绘制一条在屏幕上水平滚动的线，并绘制一个圆心，该圆心是滚动线与静态垂直线的交点。动画运行时，圆圈滞后于我打算绘制的位置。我通过绘制一条水平线与垂直线在圆的预期中心点处相交来测试数值-此测试会产生稳定的动画（线条），这对我来说意味着我输入了正确的中心点对于圆，与绘制方式有关的原因是延迟/滞后/偏移。请帮助我了解对齐这些动画所需的内容。

我提供了动画运行的屏幕截图，以及我认为与画线/圆有关的代码。

数字：

Figure 1-动画处于活动状态，圆圈在应有的位置后面

Figure 2-动画处于活动状态，圆圈在应有的位置后面

Figure 3-动画处于活动状态，圆圈处于正确的位置（因为位置值恒定不变，足以使动画稳定）

Figure 4-动画已暂停，圆圈捕捉到正确位置

功能

：

CoolPathAtInterval-确定新的线点，找到圆的中心点

HandledisplayLink-提供时间指标，驱动动画

drawRect-绘制线条

注意：_circleLayer是CAShapeLayer。 _graphMarker，_graphBase，_graphCrossX和路径都是UIBeizerPaths

- (UIBezierPath *)CoolPathAtInterval:(NSTimeInterval) interval
{
    UIBezierPath *path = [UIBezierPath bezierPath];
        //move point
    tempP.x = tempP.x - (interval * _screenPerSecond);
    [path movetoPoint:tempP];
    //update array
    [_pointsArray replaceObjectAtIndex:0 withObject:[NSValue valueWithCGPoint:tempP]];
    
    NSUInteger pointCount = _pointsArray.count;
    
    for(NSUInteger i = 0; i < pointCount; i++)
    {
        tempPval = [_pointsArray objectAtIndex:i];
        tempP = tempPval.CGPointValue;
         
    //Excluded code that moves,adds,removes points of path
    //Excluded code that determines center point for drawing circle (because the value was validated by the horizontal line)

        //move point
        tempP.x = tempP.x - (interval * _screenPerSecond);
        [path addLinetoPoint:tempP];
        //update array
        [_pointsArray replaceObjectAtIndex:i withObject:[NSValue valueWithCGPoint:tempP]];
        
    }
    
    //center of ball (moo vals were for attempting to draw circle in drawrect function)
    frameY = graphBall_y-_graphMinY-graphBallRatio/2;  //graph ball ratio is diameter of circle
    frameX = _graphMarkerX;
    //_moo_frame_X = frameX;
    //_moo_frame_Y = frameY;
    _circleLayer.frame = CGRectMake(frameX,frameY,graphBallRatio,graphBallRatio);
    
    //lines that cross at centerpoint of circle
    CGPoint CrossX1 = CGPointMake(self.graphMinX,(graphBall_y));
    CGPoint CrossX2 = CGPointMake(self.graphMaxX,(graphBall_y));

    [_graphCrossX removeAllPoints];
    [_graphCrossX movetoPoint:CrossX1];
    [_graphCrossX addLinetoPoint:CrossX2];
    
    
    return path;
}



- (void)HandledisplayLink:(CAdisplayLink *)displayLink
{
    NSLog(@"handling display link");
    if (self.graphInitialized == FALSE)
    {
        //excluded code that initializes graph

                NSLog(@"Breathing Graph Initialized");
        
    }
    
    NSLog(@"Breathing Graph Handled yo");
    self.prevTimeStamp = self.displayLinkTimeStamp;
    self.displayLinkTimeStamp = displayLink.timestamp;
    self.loopcount++;
    [self setNeedsdisplayInRect:self.bounds];
    
    //break condition
    NSTimeInterval elapsed = (displayLink.timestamp - self.firstTimeStamp);
    if(elapsed >= self.sessionDuration)
    {
        [self StopdisplayLink];
        self.displayLinkTimeStamp = self.firstTimeStamp + self.sessionDuration;
        [self setNeedsdisplayInRect:self.bounds];
    }
}


- (void)drawRect:(CGRect)rect
{
    
    UIBezierPath *path = nil;
   
    if (_active == TRUE)
    {
        NSTimeInterval sinceDraw = (self.displayLinkTimeStamp - self.prevTimeStamp);
        path = [self CoolPathAtInterval:sinceDraw];
        
    //The line commented-out below was a test at drawing the circle in this function (same result of animation lag occurred)
        //_circleLayer.frame = CGRectMake(_moo_frame_X,_moo_frame_Y,_moo_ball_ratio,_moo_ball_ratio);
        
        [[UIColor blackColor] setstroke];
        [_graphMarker stroke];
        [_graphBase stroke];
        _graphCrossX.linewidth = .25;
        [_graphCrossX stroke];
        
        
        [[UIColor redColor] setstroke];
        path.linewidth = 0.25;
        [path stroke];
    }
    
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）