# iOS 根据动画原型数据实现一个菜单动画

### 一、动画原型数据

``````Utils.interval 2,->
Line1.animate
y: -5, rotation: -12
options:
time: .3
delay: .1
Line2.animate
y: 4, rotation: -6
options:
time: .3

Utils.delay .5,->
Line1.animate
y: 0, rotation: 0
options:
curve: "spring(120,10,0)" // 这三个值对应着：力度 stiffness 、摩擦系数 damping、速率 initialVelocity
time: .3
delay: .1
Line2.animate
y: 7, rotation: 0
options:
curve: "spring(120,10,0)"
time: .3
``````

#### 补充描述

2 秒一个周期，最顶上的线旋转角度和位移大于第二根线，但延迟100ms，以造成掀起感

### 三、动画实现

• 设置线的锚点和位置
1. 线的起始位置：起始 y 坐标位置
1. 线的起始角度：起始的旋转角度
1. 线的结束位置：结束 y 坐标位置，设置弹簧动画的参数(stiffness、damping 等)
1. 线的结束角度：结束的旋转角度，设置弹簧动画的参数(stiffness、damping 等)
• 把4个动画步骤加入动画组：CAAnimationGroup，设置为无限循环动画

``````- (void)addAnimations {
if (@available(iOS 9.0, *)) {
// 第一条线
// 设置锚点
CGPoint firstAnchor = self.firstLine.layer.anchorPoint;
self.firstLine.layer.anchorPoint = CGPointMake(0, 1);
self.firstLine.layer.position = CGPointMake(self.firstLine.layer.position.x + self.firstLine.layer.bounds.size.width * (self.firstLine.layer.anchorPoint.x - firstAnchor.x), self.firstLine.layer.position.y + self.firstLine.layer.bounds.size.height * (self.firstLine.layer.anchorPoint.y - firstAnchor.y));

CASpringAnimation *firstBeginPosition = [CASpringAnimation animationWithKeyPath:@"position.y"];
firstBeginPosition.toValue = @(self.firstLine.layer.position.y - 5);
firstBeginPosition.beginTime = 0.1;
firstBeginPosition.removedOnCompletion = NO;
firstBeginPosition.fillMode = kCAFillModeForwards;

CASpringAnimation *firstBeginRotation = [CASpringAnimation animationWithKeyPath:@"transform.rotation"];
firstBeginRotation.toValue = @(-12 / 180.0 * M_PI);
firstBeginRotation.beginTime = 0.1;
firstBeginRotation.removedOnCompletion = NO;
firstBeginRotation.fillMode = kCAFillModeForwards;

CASpringAnimation *firstEndPosition = [CASpringAnimation animationWithKeyPath:@"position.y"];
firstEndPosition.toValue = @(self.firstLine.layer.position.y);
firstEndPosition.beginTime = 0.7;
firstEndPosition.stiffness = 120;
firstEndPosition.damping = 10;

CASpringAnimation *firstEndRotation = [CASpringAnimation animationWithKeyPath:@"transform.rotation"];
firstEndRotation.toValue = @(0 / 180.0 * M_PI);
firstEndRotation.beginTime = 0.7;
firstEndRotation.stiffness = 120;
firstEndRotation.damping = 10;

CAAnimationGroup *firstLineGroup = [CAAnimationGroup animation];
firstLineGroup.animations = @[firstBeginPosition, firstBeginRotation, firstEndPosition, firstEndRotation];
firstLineGroup.duration = 1.8;
firstLineGroup.repeatCount = INFINITY;

// 第二条线
// 设置锚点
CGPoint secondAnchor = self.secondLine.layer.anchorPoint;
self.secondLine.layer.anchorPoint = CGPointMake(0, 1);
self.secondLine.layer.position = CGPointMake(self.secondLine.layer.position.x + self.secondLine.layer.bounds.size.width * (self.secondLine.layer.anchorPoint.x - secondAnchor.x), self.secondLine.layer.position.y + self.secondLine.layer.bounds.size.height * (self.secondLine.layer.anchorPoint.y - secondAnchor.y));

CASpringAnimation *secondBeginPosition = [CASpringAnimation animationWithKeyPath:@"position.y"];
secondBeginPosition.toValue = @(self.secondLine.layer.position.y - 2);
secondBeginPosition.beginTime = 0.0;
secondBeginPosition.removedOnCompletion = NO;
secondBeginPosition.fillMode = kCAFillModeForwards;

CASpringAnimation *secondBeginRotation = [CASpringAnimation animationWithKeyPath:@"transform.rotation"];
secondBeginRotation.toValue = @(-6 / 180.0 * M_PI);
secondBeginRotation.beginTime = 0.0;
secondBeginRotation.removedOnCompletion = NO;
secondBeginRotation.fillMode = kCAFillModeForwards;

CASpringAnimation *secondEndPosition = [CASpringAnimation animationWithKeyPath:@"position.y"];
secondEndPosition.toValue = @(self.secondLine.layer.position.y);
secondEndPosition.beginTime = 0.6;
secondEndPosition.stiffness = 120;
secondEndPosition.damping = 10;

CASpringAnimation *secondEndRotation = [CASpringAnimation animationWithKeyPath:@"transform.rotation"];
secondEndRotation.toValue = @(0 / 180.0 * M_PI);
secondEndRotation.beginTime = 0.6;
secondEndRotation.stiffness = 120;
secondEndRotation.damping = 10;

CAAnimationGroup *secondLineGroup = [CAAnimationGroup animation];
secondLineGroup.animations = @[secondBeginPosition, secondBeginRotation, secondEndPosition, secondEndRotation];
secondLineGroup.duration = 1.8;
secondLineGroup.repeatCount = INFINITY;
self.isAnimating = YES;
}
}
``````

• 代码实现的动画总时长缩短 0.2 秒（从 2 秒变 1.8 秒）
• 每条线的动画开始时间 beginTime 提前 0.3 秒
• stiffness、damping 没有改变

### 四、动画优化

``````self.firstLine.layer.allowsEdgeAntialiasing = YES;
self.secondLine.layer.allowsEdgeAntialiasing = YES;
self.thirdLine.layer.allowsEdgeAntialiasing = YES;
``````

### 五、动画停止

``````- (void)stopAnimating {
[self.firstLine.layer removeAllAnimations];
[self.secondLine.layer removeAllAnimations];
}
``````