Несколько кубических безье в теге анимации SVG?

Я только что смотрел простую SVG-анимацию торта здесь, код 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 кубические кривые Безье? И какой из них на самом деле используется в анимации?


person Tenali_raman    schedule 01.12.2015    source источник
comment
Это кривые Безье (безье, если хотите), названные в честь Пьера Безье. Не кривые кривые =)   -  person Mike 'Pomax' Kamermans    schedule 02.12.2015


Ответы (1)


В анимации, которой вы делитесь, есть 4 значения атрибута пути. И 3 значения для атрибута keySplines. Это означает, что анимация имеет 4 состояния и 3 изменения состояния.

Каждый набор контрольных точек Безье используется для вычисления точек между каждым соответствующим состоянием анимации.

  • 1-е значение keySplines используется для анимации между состояниями пути 1 и 2.
  • 2-е значение keySplines используется для анимации между состояниями пути 2 и 3.
  • 3-е значение keySplines используется для анимации между состояниями пути 3 и 4.

Больше информации :

person web-tiki    schedule 01.12.2015