Как исправить ошибку TweenMax TimelineLite - PullRequest
Новая
       144

Как исправить ошибку TweenMax TimelineLite

0 голосов
/ 08 апреля 2019

Я создаю анимацию для моего логотипа с TweenMax TimeLine. И я получаю странную ошибку. Это создает некоторый тип сбоев.

Вот площадка для проверки кода. https://codepen.io/innocentabi/pen/ZZpaVJ

Код 

var tl = new TimelineLite();
var tween = tl.to(".logo", 0.5, {
   morphSVG: {
      shape: ".oneclosed",
      type: "rotational"
    },
    ease: Power1.easeInOut,
    repeat: 1,
    repeatDelay: 0.5,
    yoyo: true,
    delay: 0.5
  }
).to(".logo", 0.5, {
   morphSVG: {
      shape: ".bothclosed",
      type: "rotational"
    },
    ease: Power1.easeInOut,
    repeat: 1,
    repeatDelay: 0.5,
    yoyo: true,
    delay: 0.5
  }
);

Я ожидаю, что конечный результат будет гладким. Но я сталкиваюсь с проблемами. Это мой оригинальный логотип http://prntscr.com/n922rd Winked версия https://prnt.sc/n9238z Оба глаза закрыты версия http://prntscr.com/n923xs

Мне нужен логотип, чтобы подмигнул, подмигнул, чтобы снова логотип. Теперь логотип для обоих закрыт.

1 Ответ

2 голосов
/ 08 апреля 2019

Проблема вызвана первой частью каждого пути, внешней маской.Простым решением было бы удалить эту часть и использовать ее для создания другого пути, который не изменяется.В остальном нужно поменять цвет на # 222.Это не очень хорошее решение, так как вместо дырок у вас есть темный (# 222) путь, но он работает: 

<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<svg viewBox="0 0 841.9 595.3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin">


  <path fill="#3a32b3" d="M750,5.2c-20.4-1-60.5,0.7-127.4,17.6c0,0-325.5,58.9-535.4,306.6c0,0-83.3,78.9-55.5,191.1   c0,0,28.9,106.6,160,61.1c0,0,79.8-26.1,189.9-163.7c5.6-7,15.9-7.8,22.6-1.9c37.7,33.1,150.9,130.8,199.6,155.6   c0,0,80.3,51.3,137.3-34.2c9.2-13.8,15.8-29,20.5-44.8c10.5-35.1,32.6-116.7,40-202.3c0.7-8.1,1.5-16.3,2.6-24.4   c5.5-39.5,22.2-181.9-14.2-238.3C781.2,14,766,6,750,5.2z" />


<path class="logo" fill="#222" d="M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,514.9   c0,0-25,60.4-90,22.2c0,0-38.2-16-191.7-145.9c-7-6-8.1-16.4-2.3-23.6c41.9-51.6,200.6-244.5,289.1-313.4   c5.4-4.2,11.4-7.7,17.9-10.1c13.8-5.1,34.1-6.9,37,24.2C769.3,68.4,785.9,377.2,709.3,514.9z" />
<path class="oneclosed" fill="#3a32b3" d="M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />
<path class="bothclosed" fill="#3a32b3" d=" M203.8,409.2C90.5,420.1,65,403.4,65,403.4c-33.3-26.5,120-29.3,120-29.3   c82.6-2.2,135.1,2.3,159.1,5.2c8.7,1,10.5,3.3,3.8,4.8C261,403.5,203.8,409.2,203.8,409.2z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />

</svg>

Далее я попытался изменить путь, удалив несколько точек направая сторона или маска.Это та же форма, но с меньшим количеством очков.

<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<svg viewBox="0 0 841.9 595.3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin">
<path class="logo" fill="#3a32b3" d="M750, 5.2 
           C729.6, 4.2 689.5, 5.9 622.6, 22.8 
           C622.6, 22.8 297.1, 81.7 87.2, 329.4 
           C87.2, 329.4 3.9, 408.3 31.7, 520.5 
           C31.7, 520.5 60.6, 627.1 191.7, 581.6 
           C191.7, 581.6 271.5, 555.5 381.6, 417.9 
           C387.2, 410.9 397.5, 410.1 404.2, 416 
           C441.9, 449.1 555.1, 546.81 603.8, 571.6 
           C603.8, 571.6 684.1, 622.9 741.1, 537.4
           C750.3, 523.6 756.9, 508.4 761.6, 492.6
           C772.1, 457.5 794.2, 375.9 804.2, 265.9 
           C809.7, 226.4 826.4, 84 790, 27.6 
           C781.2, 14 766, 6 750, 5.2 Z


                                     M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,514.9   c0,0-25,60.4-90,22.2c0,0-38.2-16-191.7-145.9c-7-6-8.1-16.4-2.3-23.6c41.9-51.6,200.6-244.5,289.1-313.4   c5.4-4.2,11.4-7.7,17.9-10.1c13.8-5.1,34.1-6.9,37,24.2C769.3,68.4,785.9,377.2,709.3,514.9z" />
<path class="oneclosed" fill="#3a32b3" d="M750, 5.2 
           C729.6, 4.2 689.5, 5.9 622.6, 22.8 
           C622.6, 22.8 297.1, 81.7 87.2, 329.4 
           C87.2, 329.4 3.9, 408.3 31.7, 520.5 
           C31.7, 520.5 60.6, 627.1 191.7, 581.6 
           C191.7, 581.6 271.5, 555.5 381.6, 417.9 
           C387.2, 410.9 397.5, 410.1 404.2, 416 
           C441.9, 449.1 555.1, 546.81 603.8, 571.6 
           C603.8, 571.6 684.1, 622.9 741.1, 537.4
           C750.3, 523.6 756.9, 508.4 761.6, 492.6
           C772.1, 457.5 794.2, 375.9 804.2, 265.9 
           C809.7, 226.4 826.4, 84 790, 27.6 
           C781.2, 14 766, 6 750, 5.2 Z
                                          M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7   c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />
<path class="bothclosed" fill="#3a32b3" d="M750, 5.2 
           C729.6, 4.2 689.5, 5.9 622.6, 22.8 
           C622.6, 22.8 297.1, 81.7 87.2, 329.4 
           C87.2, 329.4 3.9, 408.3 31.7, 520.5 
           C31.7, 520.5 60.6, 627.1 191.7, 581.6 
           C191.7, 581.6 271.5, 555.5 381.6, 417.9 
           C387.2, 410.9 397.5, 410.1 404.2, 416 
           C441.9, 449.1 555.1, 546.81 603.8, 571.6 
           C603.8, 571.6 684.1, 622.9 741.1, 537.4
           C750.3, 523.6 756.9, 508.4 761.6, 492.6
           C772.1, 457.5 794.2, 375.9 804.2, 265.9 
           C809.7, 226.4 826.4, 84 790, 27.6 
           C781.2, 14 766, 6 750, 5.2 Z
                                           M203.8,409.2C90.5,420.1,65,403.4,65,403.4c-33.3-26.5,120-29.3,120-29.3   c82.6-2.2,135.1,2.3,159.1,5.2c8.7,1,10.5,3.3,3.8,4.8C261,403.5,203.8,409.2,203.8,409.2z M709.3,398.4c0,0-25,7.6-90,2.8   c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3   C769.3,342.1,785.9,381.1,709.3,398.4z" />
</svg>

Я ничего не изменил в вашем css или js, поэтому я добавляю только часть svg.Я надеюсь, вы найдете это полезным.

...