Дрожащая анимация CAShapeLayer в iOS

Я пытаюсь анимировать анимацию загрузки по пути закругленного прямоугольника, используя следующий код. (Мне нужно анимировать границу квадрата как загрузчик, частичную границу.) Она не бывает гладкой, как только она достигает конца пути, она переходит к начальному штриху.

    shapeLayer = [CAShapeLayer layer];
    CGRect shapeRect = _border.bounds;//CGRectMake(0.0f, 0.0f, 200.0f, 100.0f);
    [shapeLayer setBounds:shapeRect];

    [shapeLayer setContents:_border.image];
    shapeLayer.contentsGravity = kCAGravityCenter;
    NSLog(@"center of border %@",NSStringFromCGPoint(_border.center) );

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:shapeLayer.bounds cornerRadius:BORDER_ANGLE];
    [shapeLayer setPath:path.CGPath];
    shapeLayer.position = _border.center;

    [[self.view layer] addSublayer:shapeLayer];
    [[self.view layer] insertSublayer:shapeLayer above:_border.layer];


    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
    [shapeLayer setStrokeColor:[[UIColor whiteColor] CGColor]];
    [shapeLayer setLineWidth:2.5f];


    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 0.1;

    UIImageView * image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ball"]];
    image.center = CGPointMake(187, 220.5);


    startAnim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

    startAnim.duration = SPEED;
    startAnim.delegate = self;

    startAnim.repeatCount=200;
    startAnim.removedOnCompletion = FALSE;
    startAnim.toValue = [NSNumber numberWithFloat:0.3];
    endAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    endAnim.toValue = [NSNumber numberWithFloat:0.99];
    endAnim.duration = SPEED;
    endAnim.repeatCount = 200;
    endAnim.removedOnCompletion = NO;
    endAnim.cumulative = NO;


    [shapeLayer addAnimation:startAnim forKey:nil];
    [shapeLayer addAnimation:endAnim forKey:nil];

Но приведенный выше код дрожит после достижения значения endAnim tovalue и начинается снова, это не гладко.

Пожалуйста, помогите мне узнать, какие части работают неправильно. Я видел много руководств по загрузчику, но все они были для кругового пути, а не для квадратного. [введите описание изображения здесь][1]

! [1]: https://i.stack.imgur.com/FwT01.png


person Deep    schedule 14.10.2016    source источник
comment
Никто не пробовал анимировать с помощью слоя? Я хотел избежать нескольких изображений png для анимации. Мне просто не хватает мелочи, которую мне не хватает. Пожалуйста, дайте мне знать, если кто-нибудь знает, почему это нервно. Спасибо   -  person Deep    schedule 15.10.2016
comment
Плохо, что я добавил весь свой код. Сначала я помещал обе анимации в групповую анимацию и пытался добавить групповую анимацию вместо индивидуальной, но это не сработало, поэтому я добавил обе анимации по отдельности. А так как после достижения конца анимация не происходит должным образом, то я пытался изменить значение endAnim, хотя ставить его туда очень глупо.   -  person Deep    schedule 15.10.2016
comment
Я предполагаю, что на мою анимацию влияет значение хода, но я пытался поиграть с этим, но безуспешно. Мне нужно переместить частичную границу, это очень расстраивает, что небольшая проблема удерживает ее в течение 2 дней :(. Пожалуйста, дайте мне знать, если кто-нибудь хорошо читал о значении хода, хотя я прочитал несколько, но все же предложения, помощь приветствуется .   -  person Deep    schedule 15.10.2016
comment
Я обновил свой код, и я понимаю, что прицел обновляется, как только достигает значения strokeEnd. Как это контролировать. Поскольку остальная анимация в порядке, она дрожит после достижения значения StrokeEnd базовой анимации.   -  person Deep    schedule 16.10.2016
comment
И, потратив на это свое время, я только что понял, что анимация опирается на значение, поэтому является причиной дрожания, и я просмотрел все эти потоки SO, связанные с одним и тем же вопросом, точно так же, как этот stackoverflow .com/questions/1376753/ И я пробовал все возможные решения, но все равно не повезло. Так что его расстраивает, что это одна простая анимация вращения, которая не происходит.   -  person Deep    schedule 16.10.2016
comment
И ваше заявление, конечно! Он делает именно то, что вы говорите, звуки, которые вы знаете об этом. Так что не могли бы вы помочь мне?   -  person Deep    schedule 16.10.2016
comment
отлично, это не ответ и все. Мне нужно повернуть квадрат. Что бы вы сделали, если бы вам нужно повернуть квадрат?   -  person Deep    schedule 16.10.2016
comment
Хорошо, я говорю это Jump, но как я могу этого избежать? У вас есть какое-либо решение/предложение для этого?   -  person Deep    schedule 16.10.2016
comment
Отличный ответ, вы не поняли мой вопрос, и все же вы разместили так много комментариев, а затем, наконец, проголосовали за мой вопрос. Спасибо   -  person Deep    schedule 16.10.2016


Ответы (1)


просто хочу заполнить 50% границы и постоянно вращать ее

Хорошо. Поэтому не используйте анимацию слоя формы. Нарисуйте квадрат. Теперь сделайте маску, которая представляет собой заполненный квадрат, половина которого пуста. Поместите маску на свой квадрат. Так что теперь мы видим только 50% вашего квадрата, потому что остальное замаскировано. Понятно?

Теперь поверните маску.

person matt    schedule 16.10.2016
comment
Хорошо Позвольте мне объяснить мою потребность/требование. Мне нужно показать эффект загрузки, как вы можете видеть, когда эти полукруги вращаются вокруг. Итак, здесь я просто хочу заменить круг квадратом. Но поскольку он квадратный, как вы упомянули, он имеет угол, поэтому мне нужно заполнить его, что я и сделал, используя strokeStart и strokeEnd. Все идет хорошо, но после завершения он сбрасывает все значения хода. И мне нужно разобраться в этой ситуации. Я пытался использовать анимациюDidStart и анимациюDidStop, но не повезло. Я установил значения свойств, таких как штрих fillMode, но все равно не повезло. - person Deep; 16.10.2016
comment
Я не хочу заполнять весь квадрат, просто хочу заполнить 50% границы и непрерывно вращать ее. - person Deep; 16.10.2016