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>

用于动画制作的

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都同时设置了动画。轮播更换幻灯片时，我每次都需要重置这些动画。对于旋转木马，使用Owl-Carousel并附带简单代码：

$("#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，然后返回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>

如何在猫头鹰轮播中重置SVG动画

1 个答案: