vue

✍️ Tangxt

⏳ 2020-08-07

🏷️ Vue 动画

14-深入讲解 Vue 动画原理

大致看了一下，主要用了CRM大法来学习 Vue 动画 -> 其中提到一个跑马灯的由来，就是banner是用来打广告的，而每张轮播图片隶属于不同的公司，而每家公司都想排在第一位，于是就有了类似发廊里那种跑马灯的效果来展示轮播，而这样一来，就无法断定哪张图片是先出现的了……

动画是什么？

动画艺术是指以实景记录之外的各种方法创造运动的影像。

简单来说，动画是“画出来的动”，关键不在于“画”的来源，而在于“动”的来源，如果这种动是记录了现实中发生过的运动，那它就是电影，如果这种动在现实中不曾存在，那它就是动画。

关于 CSS 动画，我们需要了解两个概念：

定格动画：一个小动作，就拍一帧，完成一个大动作，就需要拍很多帧，在 1s 内有 24 帧图片轮播，就可以看到这个动画是很流畅的……如完成一个开箱的 vlog、上楼梯时每踏一步的缓慢抬腿就拍一帧
补间动画：做 FLASH 动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动；插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的

我其实还是无法区分动画、电影、视频 -> 难道动画、电影都是视频？ -> 还有什么叫做「动」呢？

其它说法：

动画其实就是人脑的 bug，动画是由多个图片组成的，这其中的画面叫做帧，通过这些连续的帧来让大脑产生视觉残像而产生动画，在现在对动画的应用中，影视播放速度为每秒 24 帧，游戏每秒 30 帧，还有 60 帧，120 帧，140 帧的。

而在 CSS 中我们大都使用 transform，transition 和 animation 来制作动画