如何制作流畅的动画

Question

所以我一直在学习用 JS、CSS、HTML 制作动画，并试图学习如何制作类似于 this 的滚动动画

我尝试过使用 jQuery-SlotMachine，尽管我对操作的执行方式非常迷茫，即使旁边有 JS 代码也是如此。有人可以解释一下我如何使用相同的 API 或其他 API 编写代码，或者使用 vanilla JS 编写代码。

Answer 1

1.首先，您必须有一个容器：

<div id="theContainer" class="container">
</div>

2.很好，现在让我们在里面放一些图片。

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
   <img src="https://picsum.photos/100/?random">
</div>

3.现在，让我们添加两个按钮来移动它：

<div id="theContainer" class="container">
   <img src="https://picsum.photos/100/?image=0">
   <img src="https://picsum.photos/100/?image=1">
   <img src="https://picsum.photos/100/?image=2">
</div>
<button id="prev" value="Previous">
<button id="next" value="Next">

4. 甜蜜！我们得到了 HTML，现在我们只需要添加我们的 Javascript：

// Set up previous button
const btnPrev = document.querySelector('#prev');

// Set up Next Button
const btnNext = document.querySelector('#next');

// Set up our container
const el = document.querySelector('#theContainer');

// Create new SlotMachine
const slot = new SlotMachine(el, {});

// Add Event Listeners or do things when we click it
btnPrev.addEventListener('click', () => slot.prev());
btnNext.addEventListener('click', () => slot.next());

<link href="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/jquery.slotmachine.min.css"></style>

<div id="theContainer" class="container" style="width: 100px; height: 100px">
  <div><img src="https://picsum.photos/100/?image=0"></div>
  <div><img src="https://picsum.photos/100/?image=1"></div>
  <div><img src="https://picsum.photos/100/?image=2"></div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

<!-- Add script files -->
<script src="https://cdn.jsdelivr.net/npm/jquery-slotmachine@4.0.0/dist/slotmachine.min.js"></script>

5.注意事项：

• 您必须为#theContainer 添加宽度和高度。 (style="width: 100px; height: 100px")
• 图像必须被块元素包围。 (<div><img /></div>)

Answer 2

您可以尝试使用一些 javascript 代码来控制您的自定义动画状态的 CSS 动画。

我认为我的示例可以帮助您。

CodePen

$(document).ready(function() {
  let $elements = $(".element");
  let $transitionList = $(".transition-list");

  let currentIndex = 0;

  setInterval(function() {
    $transitionList.css(
      "transform",
      "translateY(" + currentIndex * -250 + "px)"
    );
    currentIndex++;
    if ($elements.length - 1 < currentIndex) {
      currentIndex = 0;
    }
  }, 750);
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  width: 50%;
}

.center {
  align-items: center;
  justify-content: center;
}

.border-container {
  border: 25px solid #dfe0a0ed;
  border-radius: 30%;
  overflow: hidden;
}

.transition-list {
  width: 250px;
  height: 250px; 
  background-color: #fefefe;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.1, 0.2, 0.7, 1);    
}

.element {
  background-color: #6f6f6f;
  width: 250px;
  height: 250px;
  font-size: 188px;
  display: flex;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="conainer center">
  <div class="border-container">
<div class="transition-list">
  <div class="element center"><i class="fas fa-clock"></i></div>
  <div class="element center"><i class="fas fa-unlock"></i></div>
  <div class="element center"><i class="fas fa-th"></i></div>
  <div class="element center"><i class="fas fa-american-sign-language-interpreting"></i></div>
</div>
  </div>
</div>