如何在 owl-carousel 中重置 SVG 动画

Question

我有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主要是设置classactive时显示swg。它在轮播中，所以我只需要为每张幻灯片显示一个动画。但问题是，所有 svg 都在同时进行动画处理。每次轮播更改幻灯片时，我都需要重置这些动画。对于carousel使用Owl-Carousel with simple code :

$("#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 动画，但我想不出这个解决方案。感谢大家的每一个建议。

Answer 1

动画状态根据变量a更新，动画每走一步变量加1，直到达到360，然后return变为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>

如何在 owl-carousel 中重置 SVG 动画

How to reset SVG animation in owl-carousel

html

javascript

svg

owl-carousel

owl-carousel-2