sinPlanet.aep
----------使用关键帧创建动画 ----------
新建合成，背景色#eeeeee，帧速率30fps，持续时间3秒以上；
长按矩形工具，在弹出来的菜单中选择椭圆工具，然后双击椭圆工具1次，得到1个形状图层；
点击任何空白的地方（画板外或者图层空白处），或者快捷键ctrl shift a 取消所有选择，然后再双击椭圆工具，得到第二个形状图层，命名上面的图层为sBAll，下面的图层为bBAll；
选中两个形状图层，在搜索栏输入“大小”，其中sBAll层填写20，bBall层填100；
选中两个图层，在搜索栏输入“颜色”，其中sBall层更改填充颜色为#00ADB5，bBall层更改填充颜色为#393E46；
选中两个图层，打开3d层开关，按P键，分别右键图层下的位置，点击单独尺寸；
点击sBall上x位置和z位置的码表，点击bBall上y位置的码表；
为了方便后面打关键帧，按着ctrl，左键点击图层上的时间码，时间码就会显示为帧，后面k关键帧就可以直接点击这里，输入帧数，切换到对应的时间；
在sBall的x位置，分别在第0帧，第40帧，第80帧，输入330；
在sBall的x位置，分别在第20帧，第60帧，输入470；
在sBall的在z位置，分别在第0帧，第40帧，第80帧，输入70；
在sBall的z位置，分别在第20帧，第60帧，第100帧，输入-70；
在sBall的z位置，第60帧，输入-600；
点击sBall的“z位置”的文字，选择z位置上所有关键帧，向前拖动10帧（或者选中状态按着alt按左键，能够逐帧移动关键帧）；
按着ctrl 点击sBall的“z位置”和“x位置”的文字，选择x位置和z位置上所有关键帧，按F9，因为默认缓动曲线就是sin函数，而圆周运动在两垂直方向上是符合sin函数的波形运动规律的，因此不必修改关键帧的速度值；
在时间码输入79，回车，时间指示器变换到79帧的地方，按N键截取工作区域；
选中sBall层，按ctrl shift c，选中“将所有属性移动到新合成”和“将合成持续时间调整为所选图层的时间范围”，命名为satellite ；
打开satellite层的小太阳；
选中satellite层，按R，点击旋转的码表，在第0帧输入0，在第80帧输入360；
在第0帧，拖动satellite的小蚊香指向bBall层；
在bBall层的y位置，第0帧，第80帧，输入410，第40帧输入390；
点击bBall的“y位置”的文字，选择y位置上所有关键帧，按F9 添加缓动；
这时候能看到在大概65帧的时候sBall是没有绕开bBall的，所以修改sBall的z位置的速度：
双击打开satellite，选中sBall的z位置，点击打开图表编辑器，
点击图中按钮选择编辑速度图表
双击30帧时的点，修改输出速度的影响为70%
双击70帧时的点，修改进来速度的影响为70%
得到如图速度图表
返回planet中检查，没问题的话可以ctrl+m 添加渲染队列，
设置好渲染参数就可以进行渲染，把渲染好的视频文件放到ps中，ctrl shift alt s 导出web所用格式，选择永远，选择其他参数，储存gif，AE关键帧制作部分结束。
这部分是把ae的这些简单的动画，转换为能够在网页上使用的css动画，因为直接储存在html以及css文件中，能减少部分流量，并且适当修改还能随意调整尺寸；
使用关键帧制作动画请查看：https://weibo.com/ttarticle/p/show?id=2309404054073757284356
---------- html部分 ----------
在html中可以参照AE中的预合成关系来编写html的结构，而sBall的x和z方向移动的开始时间不一致，所以需要把这两个属性分开。
这些代码需要使用dreamweaver或者其他编辑器编写（不推荐记事本、写字板、word等办公软件/微笑），我这里为了演示方便，直接使用codepen的编辑器。
我们可以看到在AE中的层级结构是这样的：
项目
planet合成
satellite合成
sBAll的x位移动画
sBall的z位移动画
bBall形状图层的
而在html中对应编写成：
---------- css样式部分 ----------
接下来，需要对上面这些结构添加样式：
首先使整个底色变成合成的底色：
html{background:#eee;}
然后将所有内容移动到整个页面中心：
.con{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
其中position是指定绝对位置，top和left让左上角放在页面中心，然后使用translate向左向上偏移大小的一半；（由于.con实际大小为0，translate也可以省略。）
绘制两个圆形：
.sBallX{width: 20px; height: 20px; background: #00ADB5; border-radius: 50%;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.bBall{width: 100px; height: 100px; background: #393E46;border-radius: 50%;position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0px);}
与.con相比，sBall以及bBall存在宽高，所以需要translate偏移。
width 宽度 height高度 background 底色 border-radius圆角半径 position定位方式 absolut绝对定位到上一个确定定位的元素 top上边距离定位元素顶点距离 left左边距离定位元素左端距离 transform: translate3d(-50%,-50%,0px)将本元素向左向上偏移本元素宽高的50%
----------css动画部分 ----------
接下来使用css的@keyframes 和 transform 制作动画，这里只描述具体步骤，相关知识请查阅相关网站；
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://www.w3school.com.cn/css3/css3_animation.asp
打开excel，或者wps表格，其他表格软件可能也可以，但不保证能用；
回到AE中，找到sBall层，复制所有的x位置的关键帧，到表格软件中选中A1格黏贴；
选中h11单元格，在函数输入框中填写 = ，然后单击c11，然后继续填写-400，回车；
选中h11单元格，在单元格左下角点击并且向下拖动，得到所有关键帧的相对移动的数值；
选中f11单元格，在函数输入框中填写 = ，然后单击b11，然后继续填写 /80*100 ；
选中f11单元格，在单元格左下角点击并且向下拖动，得到所有关键帧的时间百分比；
在g11单元格填写 %{transform:translateX( ， 在i11单元格填写 px);} ，注意要使用半角符号；
分别选中并且向下拖动，获得所有关键帧的代码；
复制刚才在表格软件中我们弄出来的那段代码，到记事本中黏贴
选中0和%中的制表符，复制，ctrl h，全部替换为没有东西（也就是右边什么都不输入）
复制所有到编辑器中黏贴并且在 0%上一行输入 @keyframes sBallX{ ，在100%下一行输入 }
同样的处理，复制sBall中z位置的关键帧得到@keyframes sBallZ ，复制satellite预合成图层中的旋转关键帧得到@keyframes satellite ， 由于satellite通过父子级链接到bBall图层，所以可以认为bBall的Y位置动画就是planet整个合成的位移动画；
sBallZ
satellite
planet
需要注意的是z位置的动画，是从-10帧时已经存在，因此在编写@keyframes的时候，需要从-10帧开始，然后再在后面引用动画时进行延迟或者提前；
此处可以看到z位置的值从0帧之前已经开始
接下来就是把刚才编写好的关键帧动画，添加到对应的div上：
在css3中，控制动画一共有6个属性
animation-name /*动画名称*/
animation-duration /*动画持续时间*/
animation-timing-function /*动画关键帧插值方式*/
animation-delay /*动画延迟时间*/
animation-iteration-count /*动画重复次数*/
animation-direction /*动画播放方向*/
这些属性可以简写到animation中：
animation: namedurationtiming-functiondelayiteration-countdirection;
对应到sBallx中就是
#sBallX{animation:sBallX 2.666s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite normal;}
其中 cubic-bezier(0.445, 0.05, 0.55, 0.95) 是缓动参数，常用值还有 linear（线性）、ease、ease-in、ease-out、ease-in-out，需要自定义缓动曲线可以参考https://easings.net/ 以及 https://cubic-bezier.com/
由于sBall的z轴上的动画是从-10帧开始，因此这个动画需要提前三分之一秒：
#sBallZ{animation:sBallZ 2.666s cubic-bezier(0.445, 0.05, 0.55, 0.95) -0.333s infinite normal;}
接下来就是satellite的旋转以及planet的上下晃动：
#satellite{animation:satellite 2.666s linear 0s infinite normal;}
由于在AE中，我们没有对salellite的旋转添加缓动，所以缓动参数使用linear就可以了
#planet{animation:planet 2.666s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite normal;}
由于我们使用的是三维的动画，而这些动画默认是渲染在平面中的，所以需要添加类似摄像机的设置：
#con{perspective:200px;}
div{transform-style:preserve-3d;}
其中perspective的数值是摄像机到z轴圆点的距离，这个值和sBallZ中的最极端的值可以自己仔细调整；
到这里css动画就基本还原了AE中的效果了
效果参考： https://codepen.io/leizingyiu/pen/KNeERm
使用关键帧制作动画请查看：https://weibo.com/ttarticle/p/show?id=2309404054073757284356
制作css动画请查看： https://weibo.com/ttarticle/p/show?id=2309404054074088638072
---------- 表达式部分 ----------
接下来是把AE中的关键帧全部换成表达式，有兴趣的同学可以继续哟~
首先同样的是在AE中新建合成planet，并且新建两个形状图层，分别命名sBall以及bBall，sBall直径20，颜色#00ADB5 ，bBall直径100，颜色#393E46；
首先来看之前关键帧版本sBall中x方向的位置以及三角函数的曲线：
关键帧版本的x位置的曲线
三角函数曲线图
可以看到，与y=cos(x)相比，sBall的x位置在波长、振幅都有变化
首先在sBall的x位置上添加表达式：
p=Math.cos(time*Math.PI);
add(value,p);
其中 p=Math.cos(time*Math.PI) 相当于 p=cos（time*π）；add（value，p）相当于value+p，value指当前表达式所在的值；
接下来增加p的振幅并且调整偏移的方向：
p=-70*Math.cos(time*Math.PI);
add(value,p);
我们发现当时间到2秒的时候刚好完成一个周期，合成中我设定了一秒是30帧，而我们需要在80帧内完成两个周期，所以要让时间到达80帧的时候，让Math.PI乘以120：
p=-70*Math.cos(time*(120/80)*Math.PI);
add(value,p);
因为后面的其他动画也是使用类似的方法，所以把一些数值抽象出来，变成代数：
k=120/80;
a=-70;
t=time*k;
p=a*Math.cos(t*Math.PI);
add(value,p);
对比两者可见x位置的变化是一致的
然后我们来看一下关键帧版本的z位置的移动动画曲线：
可以看到z位置除了再波长、振幅有变化，还在30帧到70帧时，振幅有大量增加；
复制x位置表达式黏贴到z位置中，修改cos为sin
k= 120/80 ;
a=-70;
t=time*k;
p=a*Math.sin(t*Math.PI);
add(value,p);
由于30到70帧增加的振幅是由波形叠加产生的，所以另外写一个表达式去对应增加的振幅；
因为z位置从1秒开始减少，所以叠加的波形是从1秒开始的cos曲线，时间上需要变成（time-1），得到叠加的波形表达式：
p2=Math.cos((time-1)*k*Math.PI);
（直接追加在表达式最末端，AE会以最后一个得数作为反馈）
从上图可以看到30帧到70帧是一个先减少到最小，然后又增加回来的一个曲线，这时候我们使p2整体向下移动变成负数 ：
p2=Math.cos((time-1)*k*Math.PI)-1;
现在可以看到30-70帧之间，是从0到-2，再回到0的一个曲线，在关键帧版本中我们使sBallz的极值到达了600，所以我们需要把这个数值成倍增加，使p2的最大振幅加上p等于-600，所以这里乘以（600-70）/2：
p2=(600-70)/2*(Math.cos((time-1)*k*Math.PI)-1);
增加判断表达式，让p在30帧到70帧时与p2增加，其余时间不相加：
k= 120/80;
a=-70;
t=time*k;
p=a*Math.sin(t*Math.PI);
p2=(600-70)/2*(Math.cos((time-1)*k*Math.PI)-1);
if(time>1&&time<(70/30)){
add(value,(p+p2));
}else{
add(value,p);
}
可以看到波形已经与关键帧版本的波形接近了，但是在30帧与70帧的地方过度不是很平滑，那么就再使用一个三角函数与p2相乘，使叠加效果缓慢的增加：
p3=(Math.cos((time-1)*k*Math.PI)-1);
因为要让p2增加的数量从0缓增到530，所以要使p3整体变成整数，并且最大值只有1：
p3=-1/2*(Math.cos((time-1)*k*Math.PI)-1);
然后整理表达式，并且p2与p3相乘：
k= 120/80 ;
a=-70;
t=time*k;
p=a*Math.sin(t*Math.PI);
p2=(600-70)/2*(Math.cos((time-1)*k*Math.PI)-1);
p3=-1/2*(Math.cos((time-1)*k*Math.PI)-1);
if(time>1&&time<(2+1/3)){
add(value,(p+p2*p3));
}else{
add(value,p);
}
可以看到30帧与70帧的过度已经平滑很多了，有兴趣的同学可以p2多次乘以p3，观察变化；
这里我只是一下多次乘以p3的效果而已╮(╯-╰)╭
然后把p2 p3中的数字抽象出来，方便其他地方复用；
k= 120/80 ;
a=-70;
b=(600-70)/2;
c=-0.5;
t=time*k;
t2=(time-1)*k;
p=a*Math.sin(t*Math.PI);
p2=b*(Math.cos(t2*Math.PI)-1);
p3=c*(Math.cos(t2*Math.PI)-1);
if(time>1&&time<(70/30)){
add(value,(p+p2*p3));
}else{
add(value,p);
}
z位置动画完成；
由于这里是直接改变整个图层的位置，旋转是依照图层锚点旋转，而图层锚点固定再圆的中心，所以之前的satellite的旋转需要在预合成上完成；
ctrl shift c把sBall变成预合成，命名为satellite；
在预合成satellite的旋转添加表达式：
r=time*360;
我们可以看到预合成satellite一秒就旋转360度，而我们需要它在80帧的时间才旋转360度，所以添加上系数：
r=30/80*time*360;
最后依然是抽象代数：
k=30/80;
r=k*time*360;
然后就是bBall的上下晃动，我们需要bBall在80帧内完成一次上下晃动，而cos函数是2π才完成一个周期，所以在系数乘以二得到：
k=30/80*2;
t=time*k;
pY=Math.cos(t*Math.PI);
add(value,pY);
增加振幅：
k=30/80*2;
a=10;
t=time*k;
pY=a*Math.cos(t*Math.PI);
add(value,pY);
最后把satellite的y位置绑定到bBall的y位置上，得到：
thisComp.layer("bBall 2").transform.yPosition
最后最后，把时间指示器拖到79帧，按快捷键N，选择此处为工作区域结尾；
记得记得点以下satellite的小菊花：
完成！恭喜你得到一个没有关键帧的动画~
