Нечетная SVG-кубическая анимация Безье (Кривые к точкам / линиям) - PullRequest
Новая
       5

Нечетная SVG-кубическая анимация Безье (Кривые к точкам / линиям)

0 голосов
/ 24 сентября 2018

Итак, я довольно новичок в анимации SVG CSS и пытаюсь преобразовать три пути (все очень изогнутые, то есть кубический маршрут Безье) в три прямоугольника.У меня это работает, но во время переходных частей это странным образом смещается внутрь (см. CodePen ниже).Верхний правый, средний и нижний левый - это то, что я ожидаю увидеть, но верхний левый и нижний правый - области wtf.Есть ли способ установить кривые так, чтобы этого эффекта не было, или это просто побочный эффект выбранного метода.Если это так, есть ли лучший способ сделать то, что я делаю, чтобы переход выглядел плавно? 

svg {
  height: 150px;
  cursor: pointer;
}

svg path {
  transition: d 1s ease;
}

svg:hover .top {
  d: path('M 1280,256 C 2560,256 2560,256 2560,256 C 2560,768 2560,768 2560,768 C 1280,768 1280,768 1280,768 C 0,768 0,768 0,768 C 0,256 0,256 0,256 C 1280,256 1280,256 1280,256');
}

svg:hover .middle {
  d: path('M 1280,1024 C 2560,1024 2560,1024 2560,1024 C 2560,1280 2560,1280 2560,1280 C 2560,1536 2560,1536 2560,1536 C 1280,1536 1280,1536 1280,1536 C 0,1536 0,1536 0,1536 C 0,1280 0,1280 0,1280 C 0,1024 0,1024 0,1024 C 1280,1024 1280,1024 1280,1024');
}

svg:hover .bottom {
  d: path('M 1280,1792 C 2560,1792 2560,1792 2560,1792 C 2560,2304 2560,2304 2560,2304 C 1280,2304 1280,2304 1280,2304 C 0,2304 0,2304 0,2304 C 0,1792 0,1792 0,1792 C 1280,1792 1280,1792 1280,1792');
}
<!DOCTYPE html>
<html>
  <body>
    <svg viewBox="0 0 2560 2560">
      <path class="top" d="
        M 1280,0
        C 1986.92447978368,0 2489.165,505 2553.665,1152
        C 2553.665,1152 2041.665,1152 2041.665,1152
        C 1976.434,789.00439808 1704.154687870208,512 1280,512
        C 855.8453121297921,512 583.566,789.00439808 518.335,1152
        C 518.335,1152 6.335,1152 6.335,1152
        C 70.835,505 573.07552021632,0 1280,0
      " />
      <path class="middle" d="
        M 1280,768
        C 1562.769791913472,768 1792,997.230208086528 1792,1280
        C 1792,1280 1792,1280 1792,1280
        C 1792,1562.769791913472 1562.769791913472,1792 1280,1792
        C 1280,1792 1280,1792 1280,1792
        C 997.230208086528,1792 768,1562.769791913472 768,1280
        C 768,1280 768,1280 768,1280
        C 768,997.230208086528 997.230208086528,768 1280,768
        C 1280,768 1280,768 1280,768
      " />
      <path class="bottom" d="
        M 1280,2048
        C 1704.154687870208,2048 1976.434,1770.99560192 2041.665,1408
        C 2041.665,1408 2553.665,1408 2553.665,1408
        C 2489.165,2055 1986.92447978368,2560 1280,2560
        C 573.07552021632,2560 70.835,2055 6.335,1408
        C 6.335,1408 518.335,1408 518.335,1408
        C 583.566,1770.99560192 855.8453121297921,2048 1280,2048
      " />
    </svg>
  </body>
</html>

CodePen (протестировано в Chrome.)

1 Ответ

0 голосов
/ 24 сентября 2018

Я почти уверен, что это всего лишь комбинация следующих вещей:

  1. способ изгиба формы
  2. используемая линейная интерполяция
  3. способ, которым вы решили создавать прямые линии, используя Безье (т.е. выбор контрольных точек)

Вы выбрали, чтобы обе контрольные точки были такими же, как конечная точка кривой 

C    ...      ...   1280,256 
C 2560,256 2560,256 2560,256

Поскольку кривая линейно интерполируется, это приводит к тому, что некоторые кривые выпучиваются наружу, а некоторые - внутрь.В зависимости от направления пути и от того, находитесь ли вы внутри или снаружи кривой.

Вы получите намного лучшие результаты, если будете управлять контрольными точками другим способом.Либо:

  1. Установите контрольные точки в точках 1/3 и 2/3 линии, либо
  2. Установите по одной контрольной точке на каждом конце.

В следующем примере я выбрал второй метод (потому что здесь он был быстрее и проще).Это дает лучший результат. 

C    ...      ...   1280,256 
C 1280,256 2560,256 2560,256


svg {
  height: 150px;
  cursor: pointer;
}

svg path {
  transition: d 1s ease;
}

svg:hover .top {
  d: path('M 1280,256 C 1280,256 2560,256 2560,256 C 2560,256 2560,768 2560,768 C 2560,768 1280,768 1280,768 C 1280,768 0,768 0,768 C 0,768 0,256 0,256 C 0,256 1280,256 1280,256');
}
<svg viewBox="0 0 2560 2560">
  <path class="top" d="
        M 1280,0
        C 1986.92447978368,0 2489.165,505 2553.665,1152
        C 2553.665,1152 2041.665,1152 2041.665,1152
        C 1976.434,789.00439808 1704.154687870208,512 1280,512
        C 855.8453121297921,512 583.566,789.00439808 518.335,1152
        C 518.335,1152 6.335,1152 6.335,1152
        C 70.835,505 573.07552021632,0 1280,0
      " />
</svg>

PS.Помните, что CSS-анимация атрибута d еще не поддерживается во всех браузерах.Это просто браузеры на основе Webkit, такие как Chrome, прямо сейчас.

...