最全动画教程实例-实现简单的树形动画效果

Core-Animation-Demo01

Core Animation核心动画基础教程学习实例之树形动画的简单实现

demo中用到的核心动画有：

1. 弹性动画CASpringAnimation
2. 支持路径的关键帧动画CAKeyframeAnimation
3. 组合动画CAAnimationGroup

demo，支持故事版直接添加约束，主要是学习动画知识，还有其他问题，望见谅。其中重要属性设置

  self.startPoint = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
  self.nearDistance = 30;
  self.farDistance = 60;
  self.endDistance = 30;

贴上动画核心代码

if (show) {
        CASpringAnimation *springAnimation = nil;
        if (self.scale) {
            springAnimation = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
            springAnimation.damping = 5;
            springAnimation.stiffness = 100;
            springAnimation.mass = 1;
            springAnimation.duration = 0.5f;
            springAnimation.fromValue = [NSNumber numberWithFloat:0.2];
            springAnimation.toValue = [NSNumber numberWithFloat:1.0];
        }

        CAKeyframeAnimation *rotateAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
        rotateAnimation.values = @[@(M_PI), @(0.0)];
        rotateAnimation.duration = 0.5f;
        rotateAnimation.keyTimes = @[@(0.3), @(0.4)];

        CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        positionAnimation.duration = 0.5f;
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, item.startPoint.x, item.startPoint.y);
        CGPathAddLineToPoint(path, NULL, item.farPoint.x, item.farPoint.y);
        CGPathAddLineToPoint(path, NULL, item.nearPoint.x, item.nearPoint.y);
        CGPathAddLineToPoint(path, NULL, item.endPoint.x, item.endPoint.y);
        positionAnimation.path = path;
        CGPathRelease(path);


        CAAnimationGroup *animationgroup = [CAAnimationGroup animation];
        if (self.scale) {
            animationgroup.animations = @[positionAnimation, rotateAnimation,springAnimation];
        } else {
            animationgroup.animations = @[positionAnimation, rotateAnimation];
        }
        animationgroup.duration = 0.5f;
        animationgroup.fillMode = kCAFillModeForwards;
        animationgroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        [item.layer addAnimation:animationgroup forKey:@"Expand"];
        item.center = item.endPoint;
    } else {
        CASpringAnimation *springAnimation = nil;
        if (self.scale) {
            springAnimation = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
            springAnimation.damping = 5;
            springAnimation.stiffness = 100;
            springAnimation.mass = 1;
            springAnimation.duration = 0.5f;
            springAnimation.fromValue = [NSNumber numberWithFloat:1.0];
            springAnimation.toValue = [NSNumber numberWithFloat:0.7];
        }

        CAKeyframeAnimation *rotateAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
        rotateAnimation.values = @[@0, @(M_PI * 2), @(0)];
        rotateAnimation.duration = 0.5f;
        rotateAnimation.keyTimes = @[@0, @(0.4), @(0.5)];
        CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        positionAnimation.duration = 0.5f;
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, item.endPoint.x, item.endPoint.y);
        CGPathAddLineToPoint(path, NULL, item.farPoint.x, item.farPoint.y);
        CGPathAddLineToPoint(path, NULL, item.startPoint.x, item.startPoint.y);
        positionAnimation.path = path;
        CGPathRelease(path);

        CAAnimationGroup *animationgroup = [CAAnimationGroup animation];
        if (self.scale) {
            animationgroup.animations = @[positionAnimation, rotateAnimation,springAnimation];
        } else {
            animationgroup.animations = @[positionAnimation, rotateAnimation];
        }

        animationgroup.duration = 0.5f;
        animationgroup.fillMode = kCAFillModeForwards;
        animationgroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        [item.layer addAnimation:animationgroup forKey:@"Close"];
        item.center = item.startPoint;
    }

详细实现以及源码请到github站查看

简单树形动画展示