美文网首页
动画实战之图标互换

动画实战之图标互换

作者: saintPN | 来源:发表于2016-03-19 17:48 被阅读0次

    一看就懂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]];

    相关文章

      网友评论

          本文标题:动画实战之图标互换

          本文链接:https://www.haomeiwen.com/subject/eimhlttx.html