7

Пытаюсь реализовать таймер в виде окружности с бордером до следующего слайда. Вроде бы продумал, как это выстроить логически: сделать svg окружность и заполнять обводку, примерно по такой формуле: (длина окружности) / (время до следующего слайда).
Очень нужен совет, как реализовать данную задачу. А именно интересует: каким параметром svg реализовать интервальную заливку окружности и на какое событие slick slider применить все эти действия, наверное on afterchange?

моя попытка сделать это, пытался ориентироваться на прогресс бар в виде линии https://codepen.io/st-iv/pen/KGKgmv?editors=1010

$(document).ready(function(){
  var time = 2;
  var $bar,
      $slick,
      isPause,
      tick,
      percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true,
  });

  $bar = $('.slider-progress .progress');

  $('.slider-wrapper').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  })

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 10);
  }

  function interval() {
    if(isPause === false) {
      percentTime += 1 / (time+0.1);
      $bar.css({
        width: percentTime+"%"
      });
      if(percentTime >= 100)
        {
          $slick.slick('slickNext');
          startProgressbar();
        }
    }
  }


  function resetProgressbar() {
    $bar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }

  startProgressbar();

});

// circle bar

 //Рассчитываем длину окружности по формуле (с=2πr)
var circleLength = $('.progress-round__wrap circle').attr('r')*Math.PI*2;
// здесь нужно будет сопоставить длину окружности со временем до перелистывания на другой слайд
$('.progress-round__wrap circle').css('stroke-dasharray',       circleLength*part+','+circleLength);
});
$(document).ready(function(){
  var time = 2;
  var $circlebar; 
  $circlebar = $('.progress-round__wrap circle');
  function resetCirclebar() {
    $circlebar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }

})

и может быть попробовать совместить с данным решением https://codepen.io/st-iv/pen/jeOMVm?editors=1010

4
  • stroke-dasharray, stroke-dashoffset для заливки круга. Там в slick в настройках можно кастомный html кнопок задать, я бы прям туда кинул svg 28 сен 2018 в 4:23
  • Отличное решениею Мне не нужно будет привязывать к кнопкам навигации, это будет в дальнейшем вот такой анимированный круг ru.stackoverflow.com/questions/884757/…
    – stiv
    28 сен 2018 в 4:25
  • вы лучше не таймер запускайте при переключении слайдов, а наоборот слайды листайте вручную по истечении анимации
    – teran
    28 сен 2018 в 7:27
  • @teran как это реализовать ещё более непонятно
    – stiv
    28 сен 2018 в 7:29

1 ответ 1

7
+50

Если нужно, чтобы окружность просто заполнялась синхронно с линией (как в первой ссылке), то функцию interval() достаточно заменить на следующий код:

var $rbar = $('.progress circle');
var rlen = 2 * Math.PI * $rbar.attr('r');
function interval() {
  if (isPause === false) {
    percentTime += 1 / (time + 0.1);
    $bar.css({
      width: percentTime + '%'
    });
    $rbar.css({
      'stroke-dasharray': rlen,
      'stroke-dashoffset': rlen * (1 - percentTime / 100)
    });
  
    if (percentTime >= 100) {
      $slick.slick('slickNext');
      startProgressbar();
    }
  }
}
   /*... и стили немного сократить:*/
   .progress circle {
  fill: #ccc;
  stroke: #00d6d6;
  stroke-width: 10;
}

UPD

Переписал часть кода. Что-то убрал, что-то добавил. Надеюсь, что в моём дополнении присутствует нужный функционал:

$(document).ready(function() {
  var time = 2;
  var $slick, isPause, tick, percentTime = 0;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true
  });
  $slick.on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
      startProgressbar();
    },
    mousedown: function() {
      $rbar.fadeOut('slow');
      percentTime = 0;
    },
    afterChange: function(event, slick, currentSlide, nextSlide) {
      $('.circle-tx').text(((currentSlide ? currentSlide : 0) + 1) + '/' + slick.slideCount);
    }
  });

  function startProgressbar() {
    clearTimeout(tick);
    isPause = false;
    tick = setInterval(interval, 20);
    $rbar.fadeIn('slow');
  }
  var $rbar = $('.circle-go');
  var rlen = 2 * Math.PI * $rbar.attr('r');

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time + 0.1);
      $rbar.css({
        strokeDasharray: rlen,
        strokeDashoffset: rlen * (1 - percentTime / 100)
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        percentTime = 0;
        startProgressbar();
      }
    }
  }
  startProgressbar();
});
.slider-wrapper {
  display: block;
  width: 250px;
  position: relative;
  margin: 0 auto;
}
.slide img {
  width: 250px;
  height: auto;  
}
.progress-round__wrap {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  text-align: center;
}

.circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 10;
  stroke-linecap: butt;
}
.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(90, 230, 240, 0.75);
  stroke-width: 8;
  stroke-linecap: round;
}
.circle-tx {
  fill: rgba(255, 255, 255, 0.6);
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1;
  font: bold 50px 'Arial';
  text-anchor: middle;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide"><img src="https://i.stack.imgur.com/MraLT.jpg" alt="red wall"></div>
    <div class="slide"><img src="https://i.stack.imgur.com/VxVNC.jpg" alt="yellow flower"></div>
    <div class="slide"><img src="https://i.stack.imgur.com/A9VLC.jpg" alt="green forest"></div>
    <div class="slide"><img src="https://i.stack.imgur.com/oYG0R.jpg" alt="blue rose"></div>
  </div>
  <div class="progress-round__wrap">
    <svg class="progress" viewBox="0 0 110 110">
      <circle class="circle-bg" r="50" cx="55" cy="55"/>
      <circle class="circle-go" r="50" cx="55" cy="55"/>
      <text class="circle-tx" x="50%" y="70"> </text>
    </svg>
  </div>
</div>

3
  • 1
    Отличное решение! Подскажите ещё, пожалуйста, как реализовать сброс обводки окружности когда самостоятельно перелистываем слайд?
    – stiv
    3 окт 2018 в 9:39
  • @stiv дополнил ответ.
    – UModeL
    6 окт 2018 в 16:22
  • @UModeL Отличный ответ, только сейчас увидел. Остается надежда, что в недалеком будущем у тебя будет больше времени, чтобы дарить нам эстетическое удовольствия от твоих ответов. 28 авг 2019 в 14:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.