anime.js 图片位移动画_CSS 进阶之动画

前端入门系列视频教程：

本文适合有 CSS 基础同学阅读

我们都知道动画电影由一帧一帧的静态画面拼接而成，一秒动画有24帧画面，如果低于24帧，人眼即可感知画面切换，就会有卡顿的感觉。

CSS 中，如果按一秒24帧的画法来写代码，未免太过繁琐。所以我们把动画拆解为动作(transition)，一个动作表示从一个状态到另一个状态的变化，然后把一组动作串起来，即是 CSS 中的动画(animation)

例如：

上图中，蓝球的动画可以分解为四个动作：向右，向下，向左，向上；

下面来详细的讲一下动作和动画

1、动作 transition

transition 直译为过渡，即给属性变化添加过渡效果。

我们知道，如果两个样式属性被赋在同一个元素上，后一个样式属性会覆盖前一个，比如：

.blueball {
  ...
  opacity: 1; /* 不透明 */
}
.blueball:hover {
  opacity: 0.3; /* 透明度 30% */
}

当我们把鼠标放在蓝球上时，蓝球会立刻变透明

而如果我们给蓝球增加 transition 属性，其透明度变化会有一个过渡

.blueball {
  ...
  opacity: 1;
  transition: opacity 1s;  /* 改变 opacity 属性，持续1秒 */
}
.blueball:hover {
  opacity: 0.3;
}

这里的 transition 属性其实是一个简写形式，它由四部分组成，分别是（冒号后为默认值）：

transition-property: all; /* 过渡属性 */
transition-duration: 0; /* 耗时 */
transition-timing-function: ease; /* 效果，默认 ease（缓入缓出） */
transition-delay: 0; /* 延迟 */

如果考虑到默认值，上面过渡效果的例子中，可以进一步简写成transition: 1s

transition 可以同时给多个属性添加过渡效果，比如可以在移动元素的同时，改变其透明度。但不管有多少个属性同时在变化，这种过渡效果只能是一次性的，也就是单个动作.

2、动画 animation

transition 只能做单个动作，如果动画包含多个动作，这时候就需要 animation

我们先来看个例子：

这个动画明显由两个动作组成：蓝变绿，绿变橙。

两个连续的线段有三个关键点，两个连续的动作必然也有三个关键帧（keyframe），我们通过定义这三个关键帧（起点，蓝变绿，终点）来定义这两个动作。

我们来看一下这个动画的 CSS 代码

.blueball {
  ...
  background-color: #0080ff; /* 蓝色 */
  position: relative;
  animation: forward 4s; /* 执行 forward 动画，耗时 4s */
}
 
/* 三个关键帧： 起点（蓝色），蓝变绿，终点（橙色） */
@keyframes forward {
  0% {left: 0; }
  50% {left: 200px; background-color: #009a61;}
  100% {left: 400px; background-color: orange;}
}

@keyframes中的百分比，代表时间尺度上的百分比 ，后面跟着的是此时间点的样式。

同样的，animation: forward 4s;也是简写形式，完整的 animation 属性包括（冒号后为默认值）：

animation-name: none; /* 动画名称 */
animation-duration: 0; /* 耗时 */
animation-timing-function: ease; /* 效果，默认缓入缓出 */
animation-delay: 0; /* 延迟 */
animation-iteration-count: 1; /* 循环次数 */
animation-direction: normal; /* 正放 or 倒放 */

CSS 动画的知识点，就这么些，但目前看来，我们只能动动元素的大小，位置，透明度，颜色什么的，有点单调。为了给动画加点料，下面介绍一下 transform

3、transform

transform 直译为变换，虽然名字和 transition 有点像，但是它和动画无关。transition 是一个状态到另一个状态的变化过程，而 transform 仅仅是静止的最终状态。

例如：如果想把蓝球从水平排列中，向下移动100px

即可以使用相对定位

.blueball {
  ...
  position: relative;
  top: 100px;
}

也可以使用 transform

.blueball {
  ...
  transform: translateY(100px);
}

它们的效果是一致的，都是把蓝球向下移动 100px

除了位移，tranform 还可以做很多变换

• matrix 矩阵变换
• translate 位移
• scale 缩放
• rotate 绕轴旋转
• skew[skju:] 倾斜
• perspective 透视距离

每种变换的具体参数说明可以参照 w3school 文档

这里有几点需要说明

1、transform 原点位于元素中心

我们知道 CSS 元素默认的坐标系，原点在左上角；而 transform 变换的原点位于元素中心

图中亦标识了绕轴旋转（rotate）时的默认方向，为了便于记忆，你可以理解为：你站在原点位置，看向正轴方向，默认旋转方向为逆时针旋转

2、理解 skew（倾斜）

skew 倾斜变换并不直观，为了便于记忆，你可以这样想像：你拉住了矩形的右下角，左右横拉，即是沿X轴倾斜

同样的，skewY 即是抓住右下角上下拉

3、理解 perspective（透视）

perspective 表示透视距离，可简单理解为眼睛离屏幕的距离

transform: translateZ(100x); /* 向Z轴正向移动 100px */
perspective: 200px; /* 透视距离 200px */

我们用一张图来说明一下

• d 为透视距离 200px
• Z 为元素在Z轴上移动的距离 100px
• 虚线的圆表示元素实际的位置
• 而蓝色的圆，是元素在屏幕上的投影，也是最终展示的效果

其它变换属性比较好理解，除了matrix（这个需要单独开一篇来讲），就不再一一缀述

注：由于画图功力有限，tranform 部分图片取材自这篇文章： transform | Codrops CSS Reference

4、CSS 动画动手玩

最后以一个动画来结束这篇文章吧，想一想用到了哪些方法

代码在这里：Try it on CodePen

如果觉得我写的不错，欢迎点赞评论分享

更多关于 CSS 和 JS 的文章：前端同学 - 文章索引