CSS结合原生JS实现一个跳跃的硬币

前言

这篇文章我们用CSS结合原生JS去写一个硬币跳动的效果分析需要用到CSS、JS属性和对应的功能

我们可以通过码上掘进的功能看到对应的代码实现和实时效果

API

主要讲解CSS+JS，点击按钮实现跳跃的逻辑，这边我们需要先对一些重要的CSS属性有一些基本的了解，我列出了对应的属性和参数的文档地址

transform

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

transition

**transition **CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

@keyframes

关键帧  @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

逻辑

按钮动画效果

点击按钮，按钮在很短时间内顺时针旋转了一些角度，是通过这两个css,在按钮被点击的时候顺时针旋转4度，过度动画是transition控制的，transform代表着旋转，缩放，倾斜或平移给定元素, 在50ms内，采取ease-in-out的过度策略，具体参照文档解释

.tip-button {
  transition: transform 50ms ease-in-out;
}
 
.tip-button:active {
 transform: rotate(4deg);
}

这样就实现了第一个最简单的动画效果，我们还有一个按钮点击完消失的动画效果，我们在点击tip-button的时候，我们在对应的dom节点加了一个选择器clicked,这边css使用了animation+@keyframes实现更细致的动画控制，分别控制在0%,66%,100%旋转的角度，采用ease-in-out的模式，

加了clicked之后影响对应的选择器如下列的css

.tip-button.clicked {
  animation: 150ms ease-in-out 1 shake;
  pointer-events: none;
}

.tip-button.clicked .tip-button__text {
  opacity: 0;
  transition: opacity 100ms linear 200ms; // 透明度由100变成0, 100ms的时间,模式linear,延时200ms
}

.tip-button.clicked::before {
  height: 0.5rem; //高度缩小
  width: 60%; //宽度缩小
}

.tip-button.clicked .coin {
  transition: margin-bottom 1s linear 200ms;
  margin-bottom: 0;
}

@keyframes shake {
  0% {
    transform: rotate(4deg);
  }
  66% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate();
  }
}

button.classList.add("clicked");

flipCoinLoop这个函数就是用来处理硬币翻转的样式变化，每一次的改变的数据都不一样，

.coin {
  --front-y-multiplier: 0;
  --back-y-multiplier: 0;
  --coin-y-multiplier: 0;
  --coin-x-multiplier: 0;
  --coin-scale-multiplier: 0;
  --coin-rotation-multiplier: 0;
  --shine-opacity-multiplier: 0.4;
  --shine-bg-multiplier: 50%;
  bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);
  height: 3.5rem;
  margin-bottom: 3.05rem;
  position: absolute;
  right: calc(var(--coin-x-multiplier) * 34% + 16%);
  transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(--coin-rotation-multiplier) * -1deg));
  transition: opacity 100ms linear 200ms;
  width: 3.5rem;
  z-index: 3;
}

可以看到前面几个是自定义的css属性，可以用到其他样式里面，实现动态样式的改变，我们在每次循环的时候通过改变这些css属性，直到最后循环结束改变class

            button.classList.add("coin-landed");
            coin.style.setProperty("opacity", 0);
            setTimeout(() => {
              button.classList.remove(
                "clicked",
                "shrink-landing",
                "coin-landed"
              );
              setTimeout(() => {
                resetCoin();
              }, 300);
            }, 1000);

css变化的主要难点就在动态变化的css属性，让coin的动画看起来流畅