Линейная анимация при использовании jQuery - PullRequest
Новая
       17

Линейная анимация при использовании jQuery

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

Мой клиент запрашивает строки, которые соединяют текст (основные теги p) с кнопками на изображении (см. Прилагаемую фотографию), мне трудно найти способ сделать это и убедиться, что он отзывчивый.

End Result

У меня было две идеи, как это сделать:

Импортировать изображение линии (клиент дал мне файл png)и использовать CSS, чтобы линия соответствовала правильно на изображении.Проблема в том, что он теряет правильное расположение, когда я уменьшаю размер экрана.У меня есть мой код здесь, на codepen, у меня все работает из изображения выше, кроме этих чертовых линий: https://codepen.io/dec23rd1986/full/PdEoZa/

Я также думал о SVG-анимации, но я не уверен, как бы я включил это в jQueryЯ использую для своих кнопок.Который я использую для перемещения вперед и назад между двумя кнопками и боковыми стрелками, вместе с эффектом затухания.

Если кто-нибудь может указать мне правильное направление для достижения этой цели (статьи, видео, лучший подход), я был бы очень признателен!
С наилучшими пожеланиями, 

   <div class="container-fluid jumbo_features">
    <div class="row">
     <div class="col-md-6">
      <img src="https://image.ibb.co/ijvTfU/feature_meeting.png" class="meeting_img">

      <img src="https://image.ibb.co/hZNxPp/feature_tasks.png" class="tasks_img"></div>

     <div class="col-md-6">
      <button type="button"  class="btn active" aria-pressed="true" id="meeting_button">Meeting</button>
      <button type="button" class="btn" aria-pressed="true" id="tasks_button">Tasks</button>

       <br>
     <p class="meeting_info"><b>Attends Meetings:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
     <p class="meeting_info "><b>Takes meeting notes:</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
      <!--Tasks-->
       <p class="tasks_info"><b>Example One</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Two</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>
              <p class="tasks_info"><b>Example Three</b><br>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p><br>

         </div>
          </div>
       </div>

      <br>
       </div>
      </div>  
    </div>

</div>
</div>
       <div class ="meeting_info">
<img src="https://thumb.ibb.co/c4yUFU/line1.png" id="line">

Ответы [ 2 ]

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

Для анимации line вам не нужно использовать ничего, кроме собственной анимации svg: 

<svg height="120" width="120">
  <polyLine
    id="myLine"
    points="120,0 60,0 60,60 0,60"
    fill="none"
    stroke-width="2"
    stroke="red"
    stroke-dasharray="240"
    stroke-dashoffset="240"
  />

  <animate
    xlink:href="#myLine"
    attributeName="stroke-dashoffset"
    from="240"
    to="0"
    dur="3s"
    begin="1s"
    fill="freeze"
   />   
</svg>

PS: вы можете получить общую длину (240) с вычислением , но для ограниченного числа строк это нормальновычислить вручную.

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

Хотя мне не совсем ясно, почему ваш jQuery может мешать использованию линий, вот простой пример SVG, который будет масштабироваться при изменении размера окна. Все, что вам нужно сделать, чтобы сделать его масштабированным, это использовать процентные значения, а не буквальные значения пикселей.

Если у вас есть некоторые пропорциональные изменения при изменении размеров экрана, возможно, вам придется изменить этот код программно. Если вы предоставите больше информации о том, почему у вас есть проблемы с взаимодействием с jQuery, поделитесь ими, и я обновлю свой ответ.

Редактировать: Я обновил свой пример, чтобы дать приблизительное представление (например, сообщение не всегда выстраивается должным образом) того, что, я думаю, вы ищете. Если я вас правильно понял, вы можете уточнить это оттуда. Кроме того, вы можете изменить процентное соотношение экранами разных размеров. Если это так, используйте @media запросов в вашем CSS. 

div {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}

#myImg img {
  width: 100%;
}

#mySVG {
  margin-top: 20%;
  margin-left: -10%;
}

#myMsg {
  margin-top: 28.5%;
  padding-left: 10px;
}
<div id="myImg">
  <img src="https://www.yotako.io/images/documentation/balsamiq/containers/android_balsamiq.png" />
</div>
<div id="mySVG">
  <svg height="100%" width="100%">
  <line x1="0" y1="0" x2="50%" y2="0" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="0" x2="50%" y2="50%" style="stroke:#000;stroke-width:2" />
  <line x1="50%" y1="50%" x2="100%" y2="50%" style="stroke:#000;stroke-width:2" />
</svg>
</div>
<div id="myMsg">
  <p>Your message goes here</p>
</div>
...