动画实战之图标互换

一看就懂demo下载,地址:github

想做一个简单的动画,运用一下CAAnimation,思路是:开始两个图标重叠在一起,点击按钮,两个图标分别向两边倾斜,回到原点后交换前后位置

1.要交换前后位置那肯定是要涉及到z轴了,动画实现:

CABasicAnimation *z = 

[CABasicAnimation animationWithKeyPath:@"zPosition"];

z.fromValue = @(self.indicator);

z.toValue = @(-self.indicator);

z.duration = 1;

2.往两边移动,对应属性是position,动画实现:

CAKeyframeAnimation *p =

 [CAKeyframeAnimation animationWithKeyPath:@"position"];

p.values = @[[NSValue valueWithCGPoint:CGPointZero],

[NSValue valueWithCGPoint:CGPointMake(90, -20)],

[NSValue valueWithCGPoint:CGPointZero]];

p.timingFunctions = 

@[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],

[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

p.additive = YES;

p.duration = 1;

3.倾斜的话,对应transform.rotation,动画实现:

CAKeyframeAnimation *r = 

[CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

r.values = @[@0, @0.1, @0];

r.duration = 1;

r.timingFunctions = 

@[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],

[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

推荐阅读更多精彩内容