弹跳效果

背景知识

背景知识： animation (opens new window), timing-function (opens new window), transform (opens new window)

小球下落过程属于自由落体运动，在时间函数timing-function (opens new window)中,ease（更快的加速度）相对更接近于自由落体运动，所以下落过程我们选用ease作为时间函数的关键值；当小球被弹起时属于减速运动，我们需用使用ease的方向版本cubic-bezier(.1,.25,.1,.25)（更快的减速度）作为时间函数的函数值来模仿减速运动。调速函数如下图所示：

<style>
  .main-bounce {
    width: 100%;
    height: 584px;
    padding: 52px 39px;
    background: #0c1a39 url('https://cdn-static.learntech.cn/notes/20201105/1028-Us90Rz.jpg!min') no-repeat center bottom / 100% 489.5px;
  }
  .ball {
    width: 0;
    margin: auto;
    padding: 20px;
    border-radius: 50%;
    background: #b4a078 radial-gradient(at 30% 30%, #f7f5f1, #b4a078);
    /*当动画完成后，保持最后一帧*/
    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
  }
  .btn {
    cursor: pointer;
  }
  @keyframes bounce {
    40%,
    60%,
    80%,
    to {
      transform: translateY(380px);
      animation-timing-function: ease-in;
    }
    50% {
      transform: translateY(260px);
    }
    70% {
      transform: translateY(300px);
    }
    90% {
      transform: translateY(360px);
    }
  }
</style>
<template>
  <div>
    <div class="main">
      <div class="ball" :style="{ animationName }"></div>
      <a class="btn" @click="reset">重置</a>
      <a class="btn" @click="play">运行</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "cssBounce",
  data() {
    return {
      animationName: 'bounce',
    }
  },
  methods: {
    reset() {
      this.animationName = 'none';
    },
    play() {
      this.animationName = 'bounce';
    }
  }
}
</script>

重置 运行