用CSS实现曲线动画

开发活动中，遇到了一个需要让奖品按抛物线飘动的需求。有点类似饿了么添菜的时候从当前点沿抛物线滑入购物车的动画效果。

需求分析

使用css动画实现
css动画好像无法直接使用单个动画来实现抛物线的运动。如果设置成多个过渡点，点与点之间的运动也是直线的，会使动画效果看起来很难受。
使用js动画都用js了，还有啥实现不了的，唯一缺点就是比较浪费性能吧。
使用多个css动画叠加实现抛物线效果物理课应该学过抛物线，其实就是一个水平的匀速运动 + 一个垂直的加速运动。那么我们可以给元素加一个相同大小的父容器，父容器是水平运动，子容器是加速的垂直运动。即可实现抛物线效果。
为了方便观察，我给父容器加了个边框，这样可以方便的看出来两个动画的叠加效果。

Kapture 2020-01-17 at 10 22 36

可以在chrome devtool中调整垂直运动的贝塞尔曲线，让动画看起来更接近加速运动

代码如下 .html

<div class="outer">
  <div class="inner"></div>
</div>

.css

.outer {
  animation: flowerAnimateX 3s linear infinite;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  border: 1px solid green;
}

.inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: red;
  animation: flowerAnimateBottom 3s cubic-bezier(0.93, 0.1, 1, 1) infinite;
}

@keyframes flowerAnimateX {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(200px);
    }
}

@keyframes flowerAnimateBottom {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(200px);
    }
}

demo可以看这里: https://codepen.io/gong12339/pen/vYEzgxg

EmberYu / vic-blog

用CSS实现曲线动画 #22

需求分析