我只是看一个简单的SVG蛋糕动画here，CSS代码如下：
@import url(http://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
width: 100%;
height: 100%;
}
body {
background: #ee9ca7;
}
#cake {
display: block;
position: relative;
margin: -10em auto 0 auto;
}
*/* ============================================== Candle
*/
.velas {
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
@keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
@keyframes in {
to {
transform: translateY(0);
}
}
.text {
color: #8b6a60;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style:italic;
text-align: center;
h1 {
font-size: 1.4em;
}
}
在检查了一下代码后，我开始知道图层动画是由以下动画标签引起的：
<animate id="relleno_2" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 0.58 1" begin="bizcocho_2.end" dur="0.5s" fill="freeze" values="
M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607c0-19.144,0-57.432,0-76.575c0-11.057,0-44.226,0-44.226C96.636-177.015,98.142-178.521,100-178.521
L100-178.521z
;
M100,267.257c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
c0,19.143,0,57.43,0,76.574c0,10.151,0,40.606,0,40.606c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364
c0,0,0-30.455,0-40.606c0-19.145,0-57.432,0-76.576c0-11.057,0-44.225,0-44.225C96.636,268.763,98.142,267.257,100,267.257
L100,267.257z
;
M93.928,405.433c-0.655,6.444-0.102,9.067,2.957,11.798c0,0,8.083,5.571,16.828,3.503
c18.629-4.406,43.813,6.194,50.792,7.791c14.75,3.375,9.162,6.867,9.162,6.867c-2.412,2.258-58.328,0-73.667,0l0,0
c-1.858,0-69.995,2.133-73.667,0c0,0-3.337-2.439,6.172-5.992c11.375-4.25,52.875,8.822,47.139-9.442
c-6.333-20.167,5.226-21.514,5.226-21.514c3.435-0.915,12.78-6.663,10.923-0.546L93.928,405.433z
;
M102.242,427.569c5.348,0,14.079,0,17.462,0c0,0,17.026,0,27.504,0
c19.143,0,20.39-3.797,26.459,0c3,1.877,0,7.823,0,7.823c-2.412,2.258-58.328,0-73.667,0l0,0c-1.858,0-67.187,0-73.667,0
c0,0-4.125-4.983,0-7.823c5.201-3.58,16.085,0,23.725,0c8.841,0,20.762,0,20.762,0c3.686,0,8.597,0,19.511,0H102.242z
" />
现在，如果我看到指定的立方贝塞尔曲线，我会看到以下内容：
keySplines="0 0 1 1; 0 0 1 1; 0 0 0.58 1"
为什么有3个立方贝塞尔曲线？实际上在动画中使用了哪一个？
答案 0 :(得分：2)
在您共享的动画中，路径属性有4个值。 keySplines属性有3个值。这意味着动画中有4个状态和3个状态更改。
每组贝塞尔控制点用于计算每个相应动画状态之间的点。
更多信息：