Spine教程 | 偏好曲线+速率调整+设计思路梳理

遥控小车psd文件：https://pan.baidu.com/s/1bJWq538Ll9YiRRkXUnb30w?pwd=2233 提取码: 2233

spine脚本文件: https://pan.baidu.com/s/1rlkGqRDl2CMYOqh-Q5JKvg?pwd=2233 提取码: 2233

一、数学里的速度坐标

x轴代表时间，y轴代表路程。

1）匀速运动

当一个物体，它从原点出发，10秒跑10米，100秒跑100米，在相等的时间内，通过相等的距离，就是匀速运动，它的坐标连线就是一条笔直的斜线。

2）快进慢出

当一个物体，它从原点出发，前20秒跑50米，后80秒慢悠悠的跑完剩下的50米，它的坐标连线就是先上坡（快），再平缓（慢）。

3）慢进快出

前80秒慢悠悠的跑了50米，后20秒加速跑完剩下的50米，坐标连线就是先平缓（慢），再上坡（快）。

二、曲线

1）spine里的曲线具体是指什么？

曲线：关键帧之间的连线。

a.如果时间轴上 前后两个关键帧的参数，像旋转，移动，缩放，以及附件里的变形，都是一样的，前后两个关键帧之间就没有连线。

b.只有当后面的关键帧产生了变化，前后才会有连线。

c.曲线很多种表现方式，系统自带的有直角线，斜线，贝塞尔曲线等，不同的设置对应不同的动画展示效果。

2）曲线在哪里操作？

【图表】：会把所有关键帧之间的曲线展示出来，有时候还会展示一些其他的属性，整体看起来会有一点拥挤。

【曲线】：位于【视图】菜单栏里，只显示“所选关键帧”至“下一个关键帧”之间的这一段曲线，操作起来会比较清晰。

3）如何记忆曲线？

a.数学好的同学，代入坐标去理解。

b.数学不好的同学，记住：竖快横慢。

杠杆：

越靠近y轴，跑的越快。

越靠近x轴，跑的越慢。

中间切线：

越接近y轴，竖着切，跑的越快。

越接近x轴，横着切，跑的越慢。

c.小窗的横轴（x轴）时间，是摄影表里卡的关键帧，是固定的。但上下y轴代表路程，是可以改动。曲线往y轴负数方向跑，就是后退，超过终点路程，就是跑过了。

三、小车示范

第1步，ps转json文件

1）检查图层

2）改变坐标

3）脚本导出

第2步，导入文件

首先选中背景，使用缩放工具，将背景横向拉长一些，若不想这个背景的图片影响到操作，可在层级树下方，将【选择】这个勾选项取消掉。

第3步，绑定骨骼

第4步，理顺设计思路

1）首先我想要的画面是什么：

摇控器控制小车往前往后跑

2）其次可动部件的有哪些：

遥控杆，小汽车的车身和轮胎，以及木头人

3）最后每次行动的时间是多少：

a.拨动一次遥杆4帧左右，往前、复位、往后、复位，共拨动4次。

b.小汽车比摇控器慢个1帧开始移动，因为摇控器接受指令 需要一点时间。

c.小车一个动作：移动+刹车+晃动，差不多在30帧左右。

d.车身前后晃动2次，使用负数曲线让车身自己左右晃动。

e.木头人它会随惯性一起摇摆，比车慢个2到3帧。

f.轮胎就根据小汽车具体情况转动。

这么一梳理，时间轴就出来了：

第二套动作从36帧开始

时间安排是一样的，只是方向不一样而已

第5步，添加关键帧

1）摇控器向右摆。

2）往右移动小车上方的十字花。

3）旋转车身，先锁定13帧旋转角度，+10帧，将车头下压，+8帧，车头第二次下压，但角度没有第一次那么大，+4帧，复位。

4）摇控器向左摆。

5）往左移动小车。

6）旋转车身，锁定49帧的旋转角度，+10帧，车尾下压，+8帧，车尾第二次下压，但角度没有第一次那么大，+4帧，复位。

7）车胎，在第1帧锁定车胎的旋转角度，在第13帧打一个关键帧，输入-360，13-17因为刹车有一个小小回移，那么轮胎就要往回滚一点。

8）阴影，在车身晃动的时候缩放一下。

第6步，调整曲线

1）车身移动，先慢后快，刹车的时候有一点点回移。

2）车身摇摆，直接用曲线代替。

3）木头人，这里我偷懒将车身的旋转复制过来了，木头人比小车慢个3帧，木头小人在第4帧锁定旋转角度，16帧随着惯性先向后倒，再往前摇。

完成。