如何在猫头鹰旋转木马中添加随机动画效果

How to add random animation effect in owl carousel?

本文关键字：随机 动画 添加 猫头鹰 旋转木马      更新时间：2023-09-26

这是我对猫头鹰转盘的代码和效果

$(document).ready(function(){
          $(".owl-carousel").owlCarousel({
              autoplay:true,
              autoplayTimeout:2000,
              autoplayHoverPause:true,
              dots: true,
              merge:false,
              loop:true,
              items:1,
              animateOut: 'bounce',
              animateIn: 'zoomIn',
          });
        });

指示在这里只使用一个动画

animateOut: 'bounce',
animateIn: 'zoomIn',

我想在这里使用随机动画。我该怎么做？

试试这个：

function getRandomAnimation(){
    var animationList = ['bounce', 'zoomIn']; 
    return animationList[Math.floor(Math.random() * animationList.length)];
}    
$(document).ready(function(){
      let props = {
          autoplay:true,
          autoplayTimeout:2000,
          autoplayHoverPause:true,
          dots: true,
          merge:false,
          loop:true,
          items:1
      };
      props['animateOut'] = getRandomAnimation();
      props['animateIn'] = getRandomAnimation();
      $(".owl-carousel").owlCarousel(props);
});

@ykaragol的答案确实创建了随机属性，但仅在第一次加载时，像我一样，如果你也希望每次滑块更改时都有随机动画，那么在owl carousel库文件中进行以下更改（注意：我使用的是owl carousel v2.1.0，其他版本的代码可能不同）：

找到this.core.settings.animateIn，它应该在第一个的两个位置，代码如下：

        var left,
        clear = $.proxy(this.clear, this),
        previous = this.core.$stage.children().eq(this.previous),
        next = this.core.$stage.children().eq(this.next),
        incoming = this.core.settings.animateIn,
        outgoing = this.core.settings.animateOut;

继续，然后添加这个代码：

        if(incoming.constructor == Array){
            incoming = incoming[Math.floor(Math.random() * incoming.length)];
        }
        if(outgoing.constructor == Array){
            outgoing = outgoing[Math.floor(Math.random() * outgoing.length)];
        }

现在在文件中再次找到this.core.settings.animateIn，它将围绕这样的代码：

    $(e.target).css( { 'left': '' } )
        .removeClass('animated owl-animated-out owl-animated-in')
        .removeClass(this.core.settings.animateIn);
        .removeClass(this.core.settings.animateOut);
    this.core.onTransitionEnd();

将其更改为：

    var incoming = this.core.settings.animateIn;
    var outgoing = this.core.settings.animateOut
    if(incoming.constructor == Array){
        for (var i = incoming.length - 1; i >= 0; i--) {
            $(e.target).removeClass(incoming[i]);
        }
    }else{
        $(e.target).removeClass(this.core.settings.animateIn);
    }
    if(outgoing.constructor == Array){
        for (var i = outgoing.length - 1; i >= 0; i--) {
            $(e.target).removeClass(outgoing[i]);
        }
    }else{
        $(e.target).removeClass(this.core.settings.animateOut);
    }
    $(e.target).css( { 'left': '' } )
        .removeClass('animated owl-animated-out owl-animated-in');
    this.core.onTransitionEnd();

现在，这应该只需通过传递一个动画数组来动画属性，如下所示：

    $owlSty1.owlCarousel({
        animateOut: ['slideOutDown', 'zoomOut'],
        animateIn: ['flipInX', 'zoomIn'],
        loop: true,
        nav: false,
        items: 1,
        dots: true,
        responsive: false,
        autoplay: true,
        autoplayTimeout: 6000,
        rtl: directionRTL
    });
相关文章：