Как сбросить SVG анимацию в сове-карусели - PullRequest
Новая
       12

Как сбросить SVG анимацию в сове-карусели

0 голосов
/ 19 ноября 2018

у меня svg анимация, сделанная вот так 

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' 
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' 
xml:space='preserve'><path class='loader' transform='translate(125, 125) 
scale(.84)'/>
</svg>

JS для анимации 

var loader = document.getElementsByClassName("loader")
    , a = 0
    , p = Math.PI
    , t = 9;

(function draw() {
    a++;
    a %= 360;
    var r = ( a * p / 180 )
        , x = Math.sin( r ) * 125
        , y = Math.cos( r ) * - 125
        , mid = ( a > 180 ) ? 1 : 0
        , anim = "M 0 0 v -125 A 125 125 1 "
        + mid + " 1 "
        +  x  + " "
        +  y  + " z";

    Object.values(loader).forEach(item=>item.setAttribute("d",anim));

    setTimeout(draw, t); // Redraw
}());

и css 

svg {
    position: absolute;
    top: 0;
    border: 3px solid pink;
    border-radius: 50px;
}
svg path {display: none;}
.owl-dot.active svg path {display: block;}

css в основном для отображения swg, когда установлен активный класс. Это в карусели, поэтому мне нужно отображать только одну анимацию для каждого слайда. Но проблема в том, что все SVG анимируются одновременно. Мне нужно сбрасывать эти анимации каждый раз, когда карусель меняет слайд. Для карусели используется Сова-Карусель с простым кодом: 

$("#our-work-carousel2").owlCarousel({
        loop: true,
        lazyLoad: true,
        autoplay: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        slideSpeed: 300,
        paginationSpeed: 400,
        dotData: true,
        dotsData: true,
        itemsDesktop: false,
        itemsDesktopSmall: false,
        itemsTablet: true,
        itemsMobile: false,
        onChange:callback,
    });

   function callback(event){
   }

Мне, вероятно, понадобится некоторый код в обратном вызове для сброса анимации SVG, но я не могу найти это решение. Спасибо всем за каждый совет.

1 Ответ

0 голосов
/ 19 ноября 2018

Состояние анимации обновляется на основе переменной a, на каждом шаге анимации переменная увеличивается на единицу, до достижения 360, затем возвращается к 0.

Для сброса анимации вам нужносбросить переменную a, установив значение 0. 

var loader = document.getElementsByClassName("loader")
    , a = 0
    , p = Math.PI
    , t = 9;

(function draw() {
    a++;
    a %= 360;
    var r = ( a * p / 180 )
        , x = Math.sin( r ) * 125
        , y = Math.cos( r ) * - 125
        , mid = ( a > 180 ) ? 1 : 0
        , anim = "M 0 0 v -125 A 125 125 1 "
        + mid + " 1 "
        +  x  + " "
        +  y  + " z";

    Object.values(loader).forEach(item=>item.setAttribute("d",anim));

    console.log('a:', a);
    setTimeout(draw, t); // Redraw
}());

document.getElementById('reset-loader').addEventListener('click', () => a = 0);
svg {
    border: 3px solid pink;
    border-radius: 50px;
}
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' 
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' 
xml:space='preserve'><path class='loader' transform='translate(125, 125) 
scale(.84)'/>
</svg>

<button id="reset-loader">reset</button>
...