如何在IOS中制作月亮绕地球自转同时自转的CAAnimation效果?
Posted
技术标签:
【中文标题】如何在IOS中制作月亮绕地球自转同时自转的CAAnimation效果?【英文标题】:How to create a CAAnimation effect like moon rotates around the earth and rotates by itself at the same time in IOS? 【发布时间】:2015-02-08 22:03:48 【问题描述】:我知道在ios中制作月亮绕地球转的效果很简单。假设月球是一个 CALayer 对象,只需将该对象的 anchorPoint 更改为地球,它就会动画围绕地球旋转。但是如何创造同时自转的月亮呢?由于月亮只能有一个锚点,看来我不能再让这个CALayer对象自己旋转了。你们有什么感想?谢谢。
【问题讨论】:
【参考方案1】:使用两层。
一个是从地球到月球的无形“手臂”。它围绕其锚点(地球中心)进行旋转变换。这会导致位于“手臂”末端的月球围绕地球旋转。
另一个是月亮。它是“手臂”的一个子层,位于手臂末端。如果您希望它独立旋转,请将其围绕其锚点旋转,该锚点是它自己的中心。
(但是请注意,真正的月亮不会这样做。对于真正的月亮,“手臂”就足够了,因为真正的月亮与它自己围绕地球的公转同步旋转 - 所以我们总是看到月亮的同一张脸。)
【讨论】:
【参考方案2】:您可以通过沿贝塞尔路径为“月亮”设置动画,同时为旋转变换设置动画,使“月亮”围绕一个点旋转。这是一个简单的例子,
@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"];
这些特定值将导致“月亮”像地球的月亮一样保持朝向中心的同一面。
【讨论】:
智能解决方案。谢谢! 没有CABasicAnimation
可以做到吗?以上是关于如何在IOS中制作月亮绕地球自转同时自转的CAAnimation效果?的主要内容,如果未能解决你的问题,请参考以下文章
九大行星绕日运行的周期? 九大行星绕日运行的周期,公转自转各是多久?