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

5a2b844280be0485ebc76e6567ec1148.png
前端入门系列视频教程:
前端基础16课--从入门到放弃 - 网易云课堂​study.163.com
本文适合有 CSS 基础同学阅读

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

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

例如:

83272df8d48a88136b3c583fe0f72296.gif
CSS 动画

上图中,蓝球的动画可以分解为四个动作:向右,向下,向左,向上;

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

1、动作 transition

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

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

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

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

a489188c39ee335e2f25fba35e9dedac.gif
普通的属性变化

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

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

363db38378d8db8ec8805db8749a4427.gif
带过渡效果的属性变化

这里的 transition 属性其实是一个简写形式,它由四部分组成,分别是(冒号后为默认值):

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

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

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

2、动画 animation

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

我们先来看个例子:

0d43b638737ae6a1ae1b298cf00609b4.gif
CSS 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

6324106a98d90bf8e00b32f43d947d05.png
transform 位移

即可以使用相对定位

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

也可以使用 transform

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

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

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

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

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

这里有几点需要说明

1、transform 原点位于元素中心

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

ce54be31a26518e56abd62aecd8c6777.png
transform 坐标系

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

2、理解 skew(倾斜)

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

ee773bb6943497bdd3e1b66f1f99ca6a.png
transform: skewX

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

3c2e551575f929ee8a1058180e057cc5.png
transform: skewY

3、理解 perspective(透视)

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

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

我们用一张图来说明一下

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

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

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

4、CSS 动画动手玩

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

c667155be53e683db4fbb708756080fc.gif
人生如汪

代码在这里:Try it on CodePen


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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值