CAShapeLayer jittery animation in iOS

Question

I am trying to animate loading animation along the path of rounded rect,using following code. (I need to animate border of square as loader ,partial border.) It does not happen to be smooth ,as soon as it reaches the end of path it jumps to the starting start stroke.

    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];

But above code jitters after reaching at endAnim's tovalue and starts again,its not smooth.

Please help me know which parts going wrong. I saw many tutorials for loader but all those were for circular path not square. [enter image description here][1]

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

Nobody has tried to animate using layer? I wanted to avoid multiple png images for animation. Its just missing small thing I am missing.Please let me know if anybody has idea why its jittery. Thanks — Deep, Oct 15 '16 at 14:49
My bad I added my whole code ,First i was putting both the animation in group animation and was trying to add group animation instead of individual animation but it did not work so I added both animation separately. And as after reaching the end of animation does not happen properly so I was trying to change value of endAnim,though its very stupid to put it there. — Deep, Oct 15 '16 at 15:12
I guess my animation is getting affected because of stroke value but I tried playing with that but no luck. I have to move partial border around,its quite frustrating that small issue is keeping it stuck for 2 days :( . Please let me know if any one has good read about stroke value ,although I have read few but still suggestions ,helps are welcom. — Deep, Oct 15 '16 at 15:21
I have updated my code , and my understanding is that aimation gets refreshed as soon as it reaches strokeEnd value. How to control that. As rest of the animation is fine ony it jitters after reaching StrokeEnd value of basic animation. — Deep, Oct 16 '16 at 06:55
And after wasting my time on it , I have just realized that animation rests the value so is the reason for jitter and I went throught all those SO threads related to same question just like this http://stackoverflow.com/questions/1376753/after-rotating-a-calayer-using-cabasicanimation-the-layer-jumps-back-to-its-unr And I tried all possible soltion but still no luck. So its getting frustrated that its one simple rotation animation which is not happening. — Deep, Oct 16 '16 at 13:05
And your statement "of course! It does exactly what you are saying" sounds you know about it, So can you please guide me ? — Deep, Oct 16 '16 at 13:18
great thats not the answr et all. I need to rotate square. What would you do if you require to rotate square? — Deep, Oct 16 '16 at 13:20
Ok I am telling it to Jump but how can i avoid it? Do you have any solution/suggestion for that? — Deep, Oct 16 '16 at 13:22
Great reply ,you did not understand my question and still you posted so many comments and then finally down voted my question. Thanks — Deep, Oct 16 '16 at 13:27

matt · Answer 1 · 2016-10-16T13:50:41.593

0

just want to fill 50% of border and rotate it continuously

Okay. So do not use animation of a shape layer. Draw the square. Now make a mask that is a filled square with half of it empty. Place the mask on your square. So now we see only 50% of your square because the rest is masked out. Got it?

Now rotate the mask.

edited Oct 16 '16 at 13:50

answered Oct 16 '16 at 13:27

matt

515,959
87
875
1,141

Ok Let me explain my need/requirement. I need to show loading effect as you might see with those semi circle rotating around. So here I just want to replace circle with square. But being square ,as you mentioned it has corner so I have to fill it which I did using strokeStart and strokeEnd. Everythings going good but after completion it resets all stroke values. And I need to get hold of that situation. I tried using animationDidStart and animationDidStop but no luck. I did set values of properties like stroke fillMode but still no luck. – Deep Oct 16 '16 at 13:40
I don't want to fill whole square ,just want to fill 50% of border and rotate it continuously. – Deep Oct 16 '16 at 13:42

CAShapeLayer jittery animation in iOS

1 Answers1