Rotating an arrow towards a fixed point (clock like animation)

Question

I want to rotate this arrow across a fixed point in clock. The code below doesn't do what i intend to do, it rotates the whole arrow towards a center of a circle. I also tried to animate it across a circular path but it didn't give me the effect i want ... i want this arrow to rotate around a circle while the arrow head is pointed towards the center of this circle

-(void) addArrow2:(CGSize)size{
    _Arrow2 = [SKSpriteNode spriteNodeWithImageNamed:@"arrow2"];
    _Arrow2.position = CGPointMake(self.frame.size.width/2 , self.frame.size.height/2 +30);
    SKAction *rotate = [SKAction rotateByAngle:M_2_PI duration:1];
    SKAction *forever = [SKAction repeatActionForever:rotate];

    _Arrow2.yScale = 0.45;
    _Arrow2.xScale = 0.45;

    [self addChild:_Arrow2];

    [_Arrow2 runAction:forever];
}

i want the code you did to make the arrow animate exactly like the gif but it doesn't i copied and pasted your code but it gave me a different effect — Mohamed AbouGhazala, Sep 12 '15 at 12:56
i solved it adding an imaginary radius and used the normal skaction rotate method , thanks — Mohamed AbouGhazala, Sep 12 '15 at 13:01

WangYudong · Accepted Answer · 2015-09-11T17:32:01.063

2

I suppose your got this kind of arrow →. Change the anchorPoint as (1.0, 0.5) and make the arrow follow a circle path. Make some change to fit your need.

- (void)addArrow2
{
    _Arrow2 = [SKSpriteNode spriteNodeWithImageNamed:@"arrow2"];
    _Arrow2.position = CGPointMake(self.frame.size.width/2, self.frame.size.height/2+30);
    _Arrow2.anchorPoint = CGPointMake(1.0, 0.5);
    _Arrow2.yScale = 0.45;
    _Arrow2.xScale = 0.45;

    // Make a circle path
    CGMutablePathRef circle = CGPathCreateMutable();
    CGFloat centerX = self.frame.size.width/2;
    CGFloat centerY = self.frame.size.height/2;
    CGFloat radius = 25.0;
    CGFloat startAngle = 0.0;
    CGFloat endAngle = 2*M_PI;
    CGPathAddArc(circle, NULL, centerX, centerY, radius, startAngle, endAngle, true);
    CGPathCloseSubpath(circle);
    SKAction *followPath = [SKAction followPath:circle asOffset:NO orientToPath:YES duration:2.0];

    // Infinite rotation
    SKAction *forever = [SKAction repeatActionForever:followPath];
    [_Arrow2 runAction:forever];

    [self addChild:_Arrow2];
}

Animation preview:

edited Sep 11 '15 at 17:32

answered Sep 11 '15 at 16:59

WangYudong

4,335
4
32
54

@MohamedAbouGhazala Which circle do you mean? – WangYudong Sep 11 '15 at 17:04
i want this arrow to rotate around a circle while the arrow head is pointed towards the center of this circle – Mohamed AbouGhazala Sep 11 '15 at 17:06
i made a better sketch for it sorry – Mohamed AbouGhazala Sep 11 '15 at 17:09
One easy way to make the increase the radius of the inner circle (without changing the code you have) is to add some empty space to the "arrow2" image file. – Shinigami Sep 11 '15 at 17:13
shinigami i tried this but it is not that accurate though – Mohamed AbouGhazala Sep 11 '15 at 17:14

Rotating an arrow towards a fixed point (clock like animation)

1 Answers1