实现复杂的按钮动画

news2024/11/28 0:42:37

今天主要是实现一个复杂的按钮提交动画效果，具体的关键变形环节如下：

初始环节

加载环节

展示结果环节

代码实现过程

1、html 页面机构

<button class="btn" data-btn>Submit</button>
<div class="check_box">
  <svg x="0px" y="0px" fill="none" class="check_svg" viewBox="0 0 25 30">
    <path d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
  </svg>
</div>

2、css 代码部分

.btn {
  position: relative;
  background: #2c2e30;
  color: #7bd5c2;
  border: none;
  border-radius: 0.125em;
  width: var(--btn-width);
  height: var(--btn-height);
  font-weight: bold;
  cursor: pointer;
  padding: 0;
}

.btn::after {
  content: "";
  display: none;
  position: absolute;
  background: #777;
  border-radius: 0.125em;
  left: 50%;
  right: 50%;
  top: 45%;
  bottom: 45%;
  animation: progrss var(--progress-anmation-time) var(--squish-animation-time);
  animation-fill-mode: forwards;
}

.btn::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  background: #2c2e30;
  border-radius: 0.125em;
  animation: squish var(--squish-animation-time) cubic-bezier(
      0.1,
      0.76,
      0.76,
      1.36
    );
  animation-fill-mode: forwards;
}

.btn.animating {
  background-color: transparent;
  color: transparent;
  user-select: none;
  cursor: default;
  animation: hide 0ms calc(
      var(--squish-animation-time) + var(--progress-anmation-time)
    ) forwards;
}

.btn.animating::after,
.btn.animating::before {
  display: block;
}

.btn.animating + .check_box {
  display: flex;
  background-color: #2b2d2f;
  border-radius: 0.25em;
  width: 0;
  height: 0;
  animation: circle var(--circle-animation-time) calc(
      var(--squish-animation-time) + var(--progress-anmation-time)
    )
    forwards cubic-bezier(0.26, 0.6, 0.46, 1.7);
  justify-content: center;
  align-items: center;
}

.btn.animating + .check_box .check_svg {
  width: 25px;
  animation: checkmark var(--checkmark-animation-time) calc(
      var(--squish-animation-time) + var(--progress-anmation-time) + var(--circle-animation-time)
    )
    forwards cubic-bezier(0.26, 0.6, 0.46, 1.7);
  stroke: white;
  stroke-dashoffset: 40.84104919433594;
  stroke-dasharray: 40.84104919433594;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 3px;
}

@keyframes squish {
  100% {
    left: -25%;
    right: -25%;
    top: 45%;
    bottom: 45%;
    border-radius: 0.25em;
  }
}

@keyframes progrss {
  100% {
    left: -25%;
    right: -25%;
  }
}

@keyframes hide {
  100% {
    width: 0;
    height: 0;
  }
}

@keyframes circle {
  0% {
    width: calc(var(--btn-width) * 1.5);
    height: calc(var(--btn-height) * 0.1);
  }
  100% {
    background-color: #71dfbe;
    width: 50px;
    height: 50px;
    border-radius: 100%;
  }
}

@keyframes checkmark {
  100% {
    stroke-dashoffset: 0;
  }
}

3、JS 代码部分

const btn = document.querySelector("[data-btn]");
btn.addEventListener("click", () => {
  btn.classList.add("animating");
});

// 获取SVG图片的总长度，用于CSS笔画动画计算
const path = document.querySelector("path");
const length = path.getTotalLength();
console.log(length);