零、动画效果
效果：待补充，建议跑一下 Demo ~
Demo：AnimationMenuButton
一、动画原型数据
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，以造成掀起感
说明
实现一个动画，设计师一般会先设计出一个动画原型，动画原型工具可以导出动画的关键数据：位移、动画总时长、重复次数、延迟、开始时间、旋转角度等等。向设计师拿到这些数据，才能准确的编码实现。
除了参数数据之外，还要让设计师描述一下这个动画总体感觉，通常他们会说明这个动画在设计上要给人一个什么样直观感觉，这样在还原动画的时候，不至于偏移的太离谱。
最后，实现的动画要让设计师亲自检验一下，设计师会很容易的察觉出细微的不同，这时候进行参数微调达到效果即可。也可以多找几个人对比一下原型动画和实现的动画，每个人对动画细节的敏感程度不一样，但是通常都会发现一些问题。如果没有这一步，你的动画效果可能自我感觉十分还原，但是在另一些人看起来会怪怪的。
另外，最后一步微调的时候，根据实际感觉微调即可，没有必要一定要遵循原型数据。
二、动画参数解释
stiffness
刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快
damping
阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快
initialVelocity
初始速率，动画视图的初始速度大小
settlingDuration
结算时间，返回弹簧动画到停止时的估算时间，根据当前的动画参数估算，通常弹簧动画的时间使用结算时间比较准确
三、动画实现
动画有弹簧（spring）效果，这里用 iOS 9.0 开始提供的 CASpringAnimation 来实现。
这个动画一共有三条线，但是只有两条需要做动画。所以这两条线分别按照时间点进行动画拆解实现，形成几个小的动画，最后加入到动画组中去。
以第一条线为例：
- 设置线的锚点和位置
- 线的起始位置：起始 y 坐标位置
- 线的起始角度：起始的旋转角度
- 线的结束位置：结束 y 坐标位置，设置弹簧动画的参数(stiffness、damping 等)
- 线的结束角度：结束的旋转角度，设置弹簧动画的参数(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;
[self.firstLine.layer addAnimation:firstLineGroup forKey:nil];
// 第二条线
// 设置锚点
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.secondLine.layer addAnimation:secondLineGroup forKey:nil];
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];
}
个人技术公众号：
个人技术公众号
网友评论