Comment créer un effet CAAnimation comme la lune tourne autour de la terre et tourne par elle-même en même time dans IOS?

Je sais qu'il est simple de créer l'effet faisant circuler la lune autour de la Terre dans IOS. Supposons que la lune soit un object CALayer, il suffit de changer le point d'ancrage de cet object à la terre puis il va animer autour de la terre. Mais comment créer la lune qui tourne par elle-même en même time? Puisque la lune ne peut avoir qu'un seul anchorPoint, il semble que je ne puisse plus faire tourner cet object CALayer par lui-même. Qu'en pensez-vous? Merci.

Utilisez deux couches.

  • L'un est un "arm" invisible qui s'étend de la terre à la lune. Il effectue une rotation autour de son point d'ancrage, qui est le centre de la terre. Cela fait tourner la lune, à la fin du «arm», autour de la terre.

  • L'autre est la lune. C'est une sous-couche du "arm", assise au bout du arm. Si vous voulez qu'il tourne indépendamment, tournez-le autour de son point d'ancrage, qui est son propre centre.

(Sachez, cependant, que la vraie lune ne fait pas cela.Pour la vraie lune, le "arm" est suffisant, car la vraie lune tourne en synchronisation avec sa propre révolution autour de la terre – de sorte que nous voyons toujours le même visage de la lune.)

Vous pouvez faire tourner la "lune" autour d'un point en l'animant le long d'un path Bézier, et en même time animer une transformation de rotation. Voici un exemple simple,

@interface ViewController () @property (strong,nonatomic) UIButton *moon; @property (strong,nonatomic) UIBezierPath *circlePath; @end @implementation ViewController -(void)viewDidLoad { self.moon = [UIButton buttonWithType:UIButtonTypeInfoDark]; [self.moon addTarget:self action:@selector(clickedCircleButton:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:self.moon]; } - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; CGRect circleRect = CGRectMake(60,100,200,200); self.circlePath = [UIBezierPath bezierPathWithOvalInRect:circleRect]; self.moon.center = CGPointMake(circleRect.origin.x + circleRect.size.width, circleRect.origin.y + circleRect.size.height/2.0); } - (void)clickedCircleButton:(UIButton *)sender { CAKeyframeAnimation *orbit = [CAKeyframeAnimation animationWithKeyPath:@"position"]; orbit.path = self.circlePath.CGPath; orbit.calculationMode = kCAAnimationPaced; orbit.duration = 4.0; orbit.repeatCount = CGFLOAT_MAX; [self.moon.layer addAnimation:orbit forKey:@"circleAnimation"]; CABasicAnimation *fullRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; fullRotation.fromValue = 0; fullRotation.byValue = @(2.0*M_PI); fullRotation.duration = 4.0; fullRotation.repeatCount = CGFLOAT_MAX; [self.moon.layer addAnimation:fullRotation forKey:@"Rotate"]; } 

Ces valeurs particulières feront que la «lune» gardera le même visage vers le centre que la lune de la Terre.