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];
}

个人技术公众号：


个人技术公众号
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345