旋转轮上的突出动画

huangapple
go评论59阅读模式
英文:

Highlight animation on spinning wheel

问题

当旋转轮开始旋转时，目前位于中心的块应该具有100%的不透明度，而其余部分可以设置为50%，以实现突出效果。

Codepen链接：

链接中的代码

提前感谢您。旋转时应突出显示中心的块。

英文:

I have a this spinning wheel, what I am trying to do is when the wheel starts spinning the block which is currently in the center should have opacity 100% and the rest is lets say 50% so it will give that highlight effect.

Codepen link:

Code in link

Thanks in advance

Block in the center should be highlighted when spinning

答案1

得分: 0

以下是代码部分的翻译：

  1. 让所有的.card元素都具有opacity: 0.5。我们将根据需要在活动的.card上应用opacity: 1。
  2. 为了尽量保持性能，我们仅在旋转时才监听活动位置的变化。
  3. 我们使用requestAnimationFrame()来定时检查显示帧。

希望这有助于您理解代码。如果您需要更多翻译，请告诉我。

英文:

Have all the .card elements have opacity: 0.5. We shall apply the opacity: 1 on the active .card as needed. To try to keep it as performant as possible, we only listen for active positional change when the spinner is spinning. We use requestAnimationFrame() to time our checks to the display frame.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const {
  start,
  stop,
  tick
} = (() =&gt; {
  // Whether we should be actively listening for changes in the active item.
  let highlightListen = false;
  // The currently highlighted item.
  let active;

  // Do a check of which element should be highlighted.
  const tick = () =&gt; {
    // Get the x-coordinate of the middle of the screen.
    const middle = window.innerWidth / 2;
    const middleCard = document
      // Get all elements at the point in the document of x: middle, y: 50px.
      .elementsFromPoint(middle, 50)
      // Filter this list to `.card` elements.
      .filter((element) =&gt; element.matches(&#39;.card&#39;))
      // Get the first item from this array.
      ?.[0];

    // If this middle card is different from the last-known active item.
    if (active !== middleCard) {
      // Remove the highlight opacity style that was on the previously
      // active item.
      if (active) {
        active.style.opacity = &#39;&#39;;
      }
      // Add the highlight opacity style to the new middle card. Check
      // that it exists since we might have hit an instance where the
      // the middle of the screen is not on a card.
      if (middleCard) {
        middleCard.style.opacity = &#39;1&#39;;
      }
      // Store the new middle card.
      active = middleCard;
    }

    // If we should be listening to positional changes, run this check
    // again on the next drawing frame.
    if (highlightListen) {
      requestAnimationFrame(tick);
    }
  };

  return {
    // Start listening for active changes.
    start() {
      highlightListen = true;
      tick();
    },
    // Stop listening for active changes.
    stop() {
      highlightListen = false;
    },
    // Do a single check.
    tick,
  };
})();

$(document).ready(function() {
  //setup multiple rows of colours, can also add and remove while spinning but overall this is easier.
  initWheel();
  // Once all the elements are set up, do a single check to mark the initial state.
  tick();

  $(&#39;button&#39;).on(&#39;click&#39;, function() {
    var outcome = parseInt($(&#39;input&#39;).val());
    spinWheel(outcome);
  });
});

function initWheel() {
  var $wheel = $(&#39;.roulette-wrapper .wheel&#39;),
    row = &quot;&quot;;

  row += &quot;&lt;div class=&#39;row&#39;&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;1&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;14&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;2&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;13&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;3&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;12&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;4&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card green&#39;&gt;0&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;11&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;5&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;10&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;6&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;9&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card red&#39;&gt;7&lt;\/div&gt;&quot;;
  row += &quot;  &lt;div class=&#39;card black&#39;&gt;8&lt;\/div&gt;&quot;;
  row += &quot;&lt;\/div&gt;&quot;;

  for (var x = 0; x &lt; 29; x++) {
    $wheel.append(row);
  }
}

function spinWheel(roll) {
  var $wheel = $(&#39;.roulette-wrapper .wheel&#39;),
    order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
    position = order.indexOf(roll);

  //determine position where to land
  var rows = 12,
    card = 75 + 3 * 2,
    landingPosition = (rows * 15 * card) + (position * card);

  var randomize = Math.floor(Math.random() * 75) - (75 / 2);

  landingPosition = landingPosition + randomize;

  var object = {
    x: Math.floor(Math.random() * 50) / 100,
    y: Math.floor(Math.random() * 20) / 100
  };

  $wheel.css({
    &#39;transition-timing-function&#39;: &#39;cubic-bezier(0,&#39; + object.x + &#39;,&#39; + object.y + &#39;,1)&#39;,
    &#39;transition-duration&#39;: &#39;6s&#39;,
    &#39;transform&#39;: &#39;translate3d(-&#39; + landingPosition + &#39;px, 0px, 0px)&#39;
  });

  // Start active positional checking.
  start();

  setTimeout(function() {
    $wheel.css({
      &#39;transition-timing-function&#39;: &#39;&#39;,
      &#39;transition-duration&#39;: &#39;&#39;,
    });

    var resetTo = -(position * card + randomize);
    $wheel.css(&#39;transform&#39;, &#39;translate3d(&#39; + resetTo + &#39;px, 0px, 0px)&#39;);

    // Stop active positional checking.
    stop();
  }, 6 * 1000);
}

<!-- language: lang-css -->

body {
  font-family: &#39;Titillium Web&#39;, sans-serif;
  background: #191B28;
}

.roulette-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.roulette-wrapper .selector {
  width: 3px;
  background: grey;
  left: 50%;
  height: 100%;
  transform: translate(-50%, 0%);
  position: absolute;
  z-index: 2;
}

.roulette-wrapper .wheel {
  display: flex;
}

.roulette-wrapper .wheel .row {
  display: flex;
}

.roulette-wrapper .wheel .row .card {
  height: 75px;
  width: 75px;
  margin: 3px;
  border-radius: 8px;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5em;
  opacity: 0.5;
}

.card.red {
  background: #F95146;
}

.card.black {
  background: #2D3035;
}

.card.green {
  background: #00C74D;
}

* {
  box-sizing: border-box;
}

<!-- language: lang-html -->

&lt;link href=&quot;https://fonts.googleapis.com/css?family=Titillium+Web&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&#39;roulette-wrapper&#39;&gt;
  &lt;div class=&#39;selector&#39;&gt;&lt;/div&gt;
  &lt;div class=&#39;wheel&#39;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;input placeholder=&#39;outcome&#39;&gt;
  &lt;button&gt;
    Spin Wheel
  &lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

&lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;

&lt;!-- 语言: lang-js --&gt;

$(document).ready(function() {
  //设置多行颜色，可以在旋转时添加和删除，但总体上这更容易。
  initWheel();

  $('button').on('click', function() {
    var outcome = parseInt($('input').val());
    spinWheel(outcome);
  });
});

function initWheel() {
  var $wheel = $('.roulette-wrapper .wheel'),
    row = "";

  row += "<div class='row'>";
  row += "  <div class='card red'>1<\/div>";
  row += "  <div class='card black'>14<\/div>";
  row += "  <div class='card red'>2<\/div>";
  row += "  <div class='card black'>13<\/div>";
  row += "  <div class='card red'>3<\/div>";
  row += "  <div class='card black'>12<\/div>";
  row += "  <div class='card red'>4<\/div>";
  row += "  <div class='card green'>0<\/div>";
  row += "  <div class='card black'>11<\/div>";
  row += "  <div class='card red'>5<\/div>";
  row += "  <div class='card black'>10<\/div>";
  row += "  <div class='card red'>6<\/div>";
  row += "  <div class='card black'>9<\/div>";
  row += "  <div class='card red'>7<\/div>";
  row += "  <div class='card black'>8<\/div>";
  row += "<\/div>";

  for (var x = 0; x < 29; x++) {
    $wheel.append(row);
  }
}

function spinWheel(roll) {
  var $wheel = $('.roulette-wrapper .wheel'),
    order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
    position = order.indexOf(roll);

  //确定着陆位置
  var rows = 12,
    card = 75 + 3 * 2,
    landingPosition = (rows * 15 * card) + (position * card);

  var randomize = Math.floor(Math.random() * 75) - (75 / 2);

  landingPosition = landingPosition + randomize;

  var object = {
    x: Math.floor(Math.random() * 50) / 100,
    y: Math.floor(Math.random() * 20) / 100
  };

  $wheel.css({
    'transition-timing-function': 'cubic-bezier(0,' + object.x + ',' + object.y + ',1)',
    'transition-duration': '6s',
    'transform': 'translate3d(-' + landingPosition + 'px, 0px, 0px)'
  });

  setTimeout(function() {
    $wheel.css({
      'transition-timing-function': '',
      'transition-duration': '',
    });

    var resetTo = -(position * card + randomize);
    $wheel.css('transform', 'translate3d(' + resetTo + 'px, 0px, 0px)');
  }, 6 * 1000);
}

&lt;!-- 语言: lang-css --&gt;

body {
  font-family: 'Titillium Web', sans-serif;
  background: #191B28;
}

.roulette-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.roulette-wrapper .selector {
  width: 3px;
  background: grey;
  left: 50%;
  height: 100%;
  transform: translate(-50%, 0%);
  position: absolute;
  z-index: 2;
}

/* 我添加的 */
.roulette-wrapper .selector:before,
.roulette-wrapper .selector:after {
  content: '';
  position: absolute;
  height: 100%;
  width: calc(50vw - (75px / 2));
  background: #191B28;
  opacity: 50%
}

.roulette-wrapper .selector:before {
  right: 37px;
}

.roulette-wrapper .selector:after {
  left: 37px;
}
/****************/

.roulette-wrapper .wheel {
  display: flex;
}

.roulette-wrapper .wheel .row {
  display: flex;
}

.roulette-wrapper .wheel .row .card {
  height: 75px;
  width: 75px;
  margin: 3px;
  border-radius: 8px;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5em;
}

.card.red {
  background: #F95146;
}

.card.black {
  background: #2D3035;
}

.card.green {
  background: #00C74D;
}

* {
  box-sizing: border-box;
}

&lt;!-- 语言: lang-html --&gt;

&lt;link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"&gt;
&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;

&lt;div class='roulette-wrapper'&gt;
  &lt;div class='selector'&gt;&lt;/div&gt;
  &lt;div class='wheel'&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;input placeholder='outcome'&gt;
  &lt;button&gt;
    Spin Wheel
  &lt;/button&gt;
&lt;/div&gt;

&lt;!-- 结束代码片段 --&gt;
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
//setup multiple rows of colours, can also add and remove while spinning but overall this is easier.
initWheel();
$(&#39;button&#39;).on(&#39;click&#39;, function() {
var outcome = parseInt($(&#39;input&#39;).val());
spinWheel(outcome);
});
});
function initWheel() {
var $wheel = $(&#39;.roulette-wrapper .wheel&#39;),
row = &quot;&quot;;
row += &quot;&lt;div class=&#39;row&#39;&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;1&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;14&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;2&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;13&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;3&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;12&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;4&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card green&#39;&gt;0&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;11&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;5&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;10&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;6&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;9&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;7&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;8&lt;\/div&gt;&quot;;
row += &quot;&lt;\/div&gt;&quot;;
for (var x = 0; x &lt; 29; x++) {
$wheel.append(row);
}
}
function spinWheel(roll) {
var $wheel = $(&#39;.roulette-wrapper .wheel&#39;),
order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
position = order.indexOf(roll);
//determine position where to land
var rows = 12,
card = 75 + 3 * 2,
landingPosition = (rows * 15 * card) + (position * card);
var randomize = Math.floor(Math.random() * 75) - (75 / 2);
landingPosition = landingPosition + randomize;
var object = {
x: Math.floor(Math.random() * 50) / 100,
y: Math.floor(Math.random() * 20) / 100
};
$wheel.css({
&#39;transition-timing-function&#39;: &#39;cubic-bezier(0,&#39; + object.x + &#39;,&#39; + object.y + &#39;,1)&#39;,
&#39;transition-duration&#39;: &#39;6s&#39;,
&#39;transform&#39;: &#39;translate3d(-&#39; + landingPosition + &#39;px, 0px, 0px)&#39;
});
setTimeout(function() {
$wheel.css({
&#39;transition-timing-function&#39;: &#39;&#39;,
&#39;transition-duration&#39;: &#39;&#39;,
});
var resetTo = -(position * card + randomize);
$wheel.css(&#39;transform&#39;, &#39;translate3d(&#39; + resetTo + &#39;px, 0px, 0px)&#39;);
}, 6 * 1000);
}

<!-- language: lang-css -->

body {
font-family: &#39;Titillium Web&#39;, sans-serif;
background: #191B28;
}
.roulette-wrapper {
position: relative;
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.roulette-wrapper .selector {
width: 3px;
background: grey;
left: 50%;
height: 100%;
transform: translate(-50%, 0%);
position: absolute;
z-index: 2;
}
/* What I added */
.roulette-wrapper .selector:before,
.roulette-wrapper .selector:after {
content: &#39;&#39;;
position: absolute;
height: 100%;
width: calc(50vw - (75px / 2));
background: #191B28;
opacity: 50%
}
.roulette-wrapper .selector:before {
right: 37px;
}
.roulette-wrapper .selector:after {
left: 37px;
}
/****************/
.roulette-wrapper .wheel {
display: flex;
}
.roulette-wrapper .wheel .row {
display: flex;
}
.roulette-wrapper .wheel .row .card {
height: 75px;
width: 75px;
margin: 3px;
border-radius: 8px;
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
}
.card.red {
background: #F95146;
}
.card.black {
background: #2D3035;
}
.card.green {
background: #00C74D;
}
* {
box-sizing: border-box;
}

<!-- language: lang-html -->

&lt;link href=&quot;https://fonts.googleapis.com/css?family=Titillium+Web&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&#39;roulette-wrapper&#39;&gt;
  &lt;div class=&#39;selector&#39;&gt;&lt;/div&gt;
  &lt;div class=&#39;wheel&#39;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;
  &lt;input placeholder=&#39;outcome&#39;&gt;
  &lt;button&gt;
    Spin Wheel
  &lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

It's not exactly what you wanted but it's close and less heavy on the computing side

答案3

得分: 0

在这里你可以找到如何检查重叠的方法：
https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection
但我不确定你的解决方案是否正确...

英文:

How to check overlapping you can find here
https://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection
But I'm not sure that your solution is correct...

答案4

得分: 0

以下是您要翻译的部分：

"另一种方法是用半透明的灰色覆盖卡片，中间部分透明。这样就不需要进行额外的计算。

这是一个简单的代码片段 - 使用黑色、透明和黑色线性渐变进行覆盖。显然，您可以根据您想要的效果进行修改。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
  body {
    font-family: 'Titillium Web', sans-serif;
    background: #191B28;
  }

  .roulette-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  .roulette-wrapper::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, black, transparent calc(50% - (75px / 2)) calc(50% + (75px / 2)), black);
    top: 0;
    left: 0;
    position: absolute;
  }

  .roulette-wrapper .selector {
    width: 3px;
    background: grey;
    left: 50%;
    height: 100%;
    transform: translate(-50%, 0%);
    position: absolute;
    z-index: 2;
  }

  .roulette-wrapper .wheel {
    display: flex;
  }

  .roulette-wrapper .wheel .row {
    display: flex;
  }

  .roulette-wrapper .wheel .row .card {
    height: 75px;
    width: 75px;
    margin: 3px;
    border-radius: 8px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
  }

  .card.red {
    background: #F95146;
  }

  .card.black {
    background: #2D3035;
  }

  .card.green {
    background: #00C74D;
  }

  * {
    box-sizing: border-box;
  }
</style>
<div class='roulette-wrapper'>
  <div class='selector'></div>
  <div class='wheel'></div>
</div>

<div>
  <input placeholder='outcome'>
  <button>
    Spin Wheel
  </button>
</div>
<script>
  $(document).ready(function() {
    //setup multiple rows of colours, can also add and remove while spinning but overall this is easier.
    initWheel();

    $('button').on('click', function() {
      var outcome = parseInt($('input').val());
      spinWheel(outcome);
    });
  });

  function initWheel() {
    var $wheel = $('.roulette-wrapper .wheel'),
      row = "";

    row += "<div class='row'>";
    row += "  <div class='card red'>1</div>";
    row += "  <div class='card black'>14</div>";
    row += "  <div class='card red'>2</div>";
    row += "  <div class='card black'>13</div>";
    row += "  <div class='card red'>3</div>";
    row += "  <div class='card black'>12</div>";
    row += "  <div class='card red'>4</div>";
    row += "  <div class='card green'>0</div>";
    row += "  <div class='card black'>11</div>";
    row += "  <div class='card red'>5</div>";
    row += "  <div class='card black'>10</div>";
    row += "  <div class='card red'>6</div>";
    row += "  <div class='card black'>9</div>";
    row += "  <div class='card red'>7</div>";
    row += "  <div class='card black'>8</div>";
    row += "</div>";

    for (var x = 0; x < 29; x++) {
      $wheel.append(row);
    }
  }

  function spinWheel(roll) {
    var $wheel = $('.roulette-wrapper .wheel'),
      order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
      position = order.indexOf(roll);

    //determine position where to land
    var rows = 12,
      card = 75 + 3 * 2,
      landingPosition = (rows * 15 * card) + (position * card);

    var randomize = Math.floor(Math.random() * 75) - (75 / 2);

    landingPosition = landingPosition + randomize;

    var object = {
      x: Math.floor(Math.random() * 50) / 100,
      y: Math.floor(Math.random() * 20) / 100
    };

    $wheel.css({
      'transition-timing-function': 'cubic-bezier(0,' + object.x + ',' + object.y + ',1)',
      'transition-duration': '6s',
      'transform': 'translate3d(-' + landingPosition + 'px, 0px, 0px)'
    });

    setTimeout(function() {
      $wheel.css({
        'transition-timing-function': '',
        'transition-duration': '',
      });

      var resetTo = -(position * card + randomize);
      $wheel.css('transform', 'translate3d(' + resetTo + 'px, 0px, 0px)');
    }, 6 * 1000);
  }
</script>

<!-- end snippet -->

请注意：在运行此代码时，我的笔记本电脑的GPU使用率为15%。"

英文:

A different approach would be to overlay the cards with a semi transparent grayish color, with the middle bit transparent. That way no extra calculations have to happen.

Here's a simple snippet - overlaying with a black, transparent, black linear-gradient. Obviously you can alter that to get the effect you want.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;link href=&quot;https://fonts.googleapis.com/css?family=Titillium+Web&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
body {
font-family: &#39;Titillium Web&#39;, sans-serif;
background: #191B28;
}
.roulette-wrapper {
position: relative;
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.roulette-wrapper::after {
content: &#39;&#39;;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, black, transparent calc(50% - (75px / 2)) calc(50% + (75px / 2)), black);
top: 0;
left: 0;
position: absolute;
}
.roulette-wrapper .selector {
width: 3px;
background: grey;
left: 50%;
height: 100%;
transform: translate(-50%, 0%);
position: absolute;
z-index: 2;
}
.roulette-wrapper .wheel {
display: flex;
}
.roulette-wrapper .wheel .row {
display: flex;
}
.roulette-wrapper .wheel .row .card {
height: 75px;
width: 75px;
margin: 3px;
border-radius: 8px;
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
}
.card.red {
background: #F95146;
}
.card.black {
background: #2D3035;
}
.card.green {
background: #00C74D;
}
* {
box-sizing: border-box;
}
&lt;/style&gt;
&lt;div class=&#39;roulette-wrapper&#39;&gt;
&lt;div class=&#39;selector&#39;&gt;&lt;/div&gt;
&lt;div class=&#39;wheel&#39;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input placeholder=&#39;outcome&#39;&gt;
&lt;button&gt;
Spin Wheel
&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
$(document).ready(function() {
//setup multiple rows of colours, can also add and remove while spinning but overall this is easier.
initWheel();
$(&#39;button&#39;).on(&#39;click&#39;, function() {
var outcome = parseInt($(&#39;input&#39;).val());
spinWheel(outcome);
});
});
function initWheel() {
var $wheel = $(&#39;.roulette-wrapper .wheel&#39;),
row = &quot;&quot;;
row += &quot;&lt;div class=&#39;row&#39;&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;1&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;14&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;2&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;13&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;3&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;12&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;4&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card green&#39;&gt;0&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;11&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;5&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;10&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;6&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;9&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card red&#39;&gt;7&lt;\/div&gt;&quot;;
row += &quot;  &lt;div class=&#39;card black&#39;&gt;8&lt;\/div&gt;&quot;;
row += &quot;&lt;\/div&gt;&quot;;
for (var x = 0; x &lt; 29; x++) {
$wheel.append(row);
}
}
function spinWheel(roll) {
var $wheel = $(&#39;.roulette-wrapper .wheel&#39;),
order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
position = order.indexOf(roll);
//determine position where to land
var rows = 12,
card = 75 + 3 * 2,
landingPosition = (rows * 15 * card) + (position * card);
var randomize = Math.floor(Math.random() * 75) - (75 / 2);
landingPosition = landingPosition + randomize;
var object = {
x: Math.floor(Math.random() * 50) / 100,
y: Math.floor(Math.random() * 20) / 100
};
$wheel.css({
&#39;transition-timing-function&#39;: &#39;cubic-bezier(0,&#39; + object.x + &#39;,&#39; + object.y + &#39;,1)&#39;,
&#39;transition-duration&#39;: &#39;6s&#39;,
&#39;transform&#39;: &#39;translate3d(-&#39; + landingPosition + &#39;px, 0px, 0px)&#39;
});
setTimeout(function() {
$wheel.css({
&#39;transition-timing-function&#39;: &#39;&#39;,
&#39;transition-duration&#39;: &#39;&#39;,
});
var resetTo = -(position * card + randomize);
$wheel.css(&#39;transform&#39;, &#39;translate3d(&#39; + resetTo + &#39;px, 0px, 0px)&#39;);
}, 6 * 1000);
}
&lt;/script&gt;

<!-- end snippet -->

Note: the GPU usage on my laptop was 15% when this was running.

huangapple
  • 本文由 发表于 2023年4月17日 01:29:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76029315.html
  • animation
  • css
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定