CSS/SCSS 做一个心跳的动画 keyframe

KyleBing

CSS/SCSS 做一个心跳的动画

heartbeat.gif

一、心电图数据化

做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分

1. 横向10等分

找到基线,横向10等分。
整个图是一个心跳周期,10等分一会好算时间,对应 keyframe 中的 10% 20% 30% ...
1.png

2. 纵向10等分

以基线为基准,找到上半部分最高的位置作为最高处,从基线到最高处10等分。
再复制一份上面的坐标到下面。
2.png

3. 找到曲线中的关键点

找到曲线的关键点,这些就是我们要在动画中记录的变化位置
3.png

二、写动画 css

拿到图形数据之后,我们就需要对它进行代码化了。
其实就是把上面每个关键点都写到动画 css 的关键帧中。

这里我们用 SCSS 写,因为它可以使用算式。

SCSS 的使用教程移步这里: SCSS 日常基础用法

原理

3.png
动画时间轴
图中横向的 1-10 对应 keyframe 中的 from,10%,20%,30%...to

css 缩放实现
css 中使用 transform: scale() 实现对图形的放大缩小动画

css 动画缩放的比例如何算
图形的原始大小是 scale(1)
我们先设置一个缩放的最大值,比如 scale(1 + 0.2),那么变化的增幅就是 0.2,这个 0.2 就代表图中 从基线位置到最高点的距离 ,这样就可以计算出每个关键点的增幅。
比如:第二个关键点的位置差不多是 (横向 12%,纵向 10%),那么css关键帧中就是

开写 SCSS 动画

// 定义一个变量:增幅
$max-amplitude: 0.2;
// 第一帧的增幅就是:$max-amplitude * 0.1
@keyframes heart-bounce {
  from {transform: scale(1);}
  12% {transform: scale(1 + $max-amplitude * 0.1);}
  to {transform: scale(1);}
}

按照图中位置补齐所有关键点就是

@keyframes heart-bounce {
  from {transform: scale(1);}
  12% {transform: scale(1 + $max-amplitude * 0.1);}
  20% {transform: scale(1 - $max-amplitude * 0.05);}
  28% {transform: scale(1 - $max-amplitude * 0.1);}
  32% {transform: scale(1 + $max-amplitude * 1);}
  38% {transform: scale(1 - $max-amplitude * 0.2);}
  50% {transform: scale(1 - $max-amplitude * 0);}
  58% {transform: scale(1 - $max-amplitude * 0.1);}
  70% {transform: scale(1 - $max-amplitude * 0.5);}
  80% {transform: scale(1 - $max-amplitude * 0.1);}
  to {transform: scale(1);}
}

这样生成的 css 是这样的

@keyframes heart-bounce {
  from {transform: scale(1); }
  12% {transform: scale(1.02); }
  20% {transform: scale(0.99); }
  28% {transform: scale(0.98); }
  32% {transform: scale(1.2); }
  38% {transform: scale(0.96); }
  50% {transform: scale(1); }
  58% {transform: scale(0.98); }
  70% {transform: scale(0.9); }
  80% {transform: scale(0.98); }
  to {transform: scale(1); } }
/*# sourceMappingURL=heartbeat.css.map */

这样动画代码出来了,再定义一个类名 .heart-beat 来调用这个动画

.heart-beat{
    animation-duration: 1s; // 一个完整动画的持续时间
    animation-iteration-count: infinite; // 动画循环次数:无限循环
    animation-name: heart-bounce; // 调用的动画名,对应上面的 .heart-bounce
}

这样,在你需要跳动的图片或文字上使用该 class 即可

效果如图:

heartbeat.gif

阅读 1.2k

青枫ky
个人成长记录

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

617 声望
12 粉丝
0 条评论
你知道吗?

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

617 声望
12 粉丝
宣传栏