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

零、动画效果

效果:待补充,建议跑一下 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 来实现。

这个动画一共有三条线,但是只有两条需要做动画。所以这两条线分别按照时间点进行动画拆解实现,形成几个小的动画,最后加入到动画组中去。

以第一条线为例:

  • 设置线的锚点和位置
    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;
        [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];
}

个人技术公众号:


个人技术公众号