web前段进阶：＜3＞逐帧动画和弹性布局

回顾一下上一期我们讲的内容，讲了3d的一个小案例和动画的基本操作，我们要实现3d效果必须要打开透视和3d空间，一般会配合定位一起使用，而且定位和3d空间的属性一般放在一起，而透视可以加载body上；动画实现的步骤分为定义和使用，我们使用#keyframe 名称{}来定义动画，有两种方式一种是from to，一种是百分比；使用动画的属性为animation:动画名称、动画时长、速度曲线、延迟时间、循环次数、动画方向、停止状态；

学完动画的基本操作之后，我们来了解一个好玩的：

也就是逐帧动画，其实就是将一张精灵图通过动画的作用来实现动态的效果：

    <div class="frame"></div>

其实这就是用到了一个属性， animation-timing-function: steps(n);这是将动画的时长分为了n步来实现，大家都玩过贪食蛇吧，这个就是那个效果；

在讲解前，请大家想一想，要实现这个效果我们可以怎么做？

1、逐帧动画

既然是动画，那么就分为定义和实现两个步骤：

先讲一下思路，其实就是一个盒子，然后背景图片是一张精灵图，可以使用动画让图片动起来，

我们都知道在设置背景图片的时候其实是可以设置图片的显示位置的：

background-position: -1472px 0;

那么这个位置要如何计算才能让人物准确的显示在盒子的中间呢？很简单，我们将图片的长度量出来，一般电脑自带的图片编辑软件上就有，然后数一数图片上人物的数量，用长度除以人物数量就是盒子宽度了，动画的步数就是人物的数量，当然这个步数是可以写在复合属性里面的animation；

.frame{width: 184px;height: 325px;margin-top: 10px;background: url("../../images/jframe1.png");animation: change2 1s steps(8) infinite,change3 2s linear forwards;border: 2px solid black;
}
@keyframes change2 {
/*     from{background-position: 0 0;} */to{background-position: -1472px 0;}
}@keyframes change3 {
/*     from{transform: translateX(0);} */to{transform: translateX(700px);}
}

如果开始状态和盒子的初始状态相同的话我们就可以省略from；使用steps(N)，n为人物个数，设置逐帧动画，如果要写多个动画，我们直接在第一组动画后写都好继续加就可以；

这里补充一个知识点，如果我们想要在一个元素上使用多个属性怎么办，比如图中这个人物要从浏览器左边走到右边怎么办，

    animation: change2 1s steps(8) infinite,change3 2s linear forwards;

看这一段代码，其实使用了两组动画，可以看到第一组是我们的逐帧动画，带有steps，第二组使用一个逗号隔开，然后是使用transform：translateX来实现的人物移位，所以我们可以使用逗号隔开的方式来使用多组动画；

2、弹性布局

这是浏览器提倡使用的一种布局模型，它的作用就是可以很好的布局，解决了以前使用浮动会脱标的问题；既然是浏览器提倡，那么它的渲染速度肯定要快；

这种模型分为四个部分：弹性容器、弹性盒子、主轴、侧轴

.flexbox1{height: 100px;border: 2px solid black;justify-content: space-between;
/*     align-items: center; */display: flex;
}
.flexbox1 div{width: 100px;/*  height: 50px; */background-color: pink;
}

使用display:flex来表示开启弹性模型，用在父级容器上，于是父级容器就叫做弹性容器，那么子级就叫做弹性盒子，默认水平方向叫做主轴，垂直方向叫做侧轴；

对齐方式：

主轴：

justify-content: center;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;

也就是是水平方向，第一个是居中，也就是不留空隙的居中；第二个是在盒子周围留下空隙所以盒子之间的空隙会是两边的两倍；第三种是等距排列；第四种是中间留空隙，两边不留；

当然这里还有start和end，因为很少使用到我这里就不做讲解，毕竟几乎没有哪一个网页会在首部或者尾部留白；

侧轴：

含有两种，一种给父级加align-items，一种给自己加align-self，它们的取值都是一样的，这里给出一组：

align-items: center;
align-items: stretch;

第一个是垂直居中，第二个是默认样式

那好，这一期我们就到这，后面会带来一些flex布局的小案例；

web前段进阶：＜3＞逐帧动画和弹性布局相关推荐

[练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
python做flash帧动画_[练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
前端逐帧动画性能探究和比较
什么是逐帧动画? 首先看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简单的来说就是: 以一定的速度切换几张连续图像,让它动起来 ...
Android动画之逐帧动画FrameAnimation
动画入门和进阶文章列表: Animation动画概述和执行原理 Android动画之补间动画TweenAnimation Android动画之逐帧动画FrameAnimation Android动画之 ...
逐帧动画效果——简单篇
当我们制作一些通过属性变化无法实现的动画效果时,就需要使用逐帧动画. 现在lllustrator 矢量图绘图软件中绘制好跑步动作的每一个环节(这里我借鉴书上的图): 这里图像的每一帧内容都是 300x ...
Android 逐帧动画(Frame)
Android 逐帧动画(Frame) 很好理解就是将多张图片放到一个容器里面通过控制这些图片一帧一张图片从而形成动画使用的使用通过AnimationDrawable 加载放好的图片然后通过调用 ...
逐帧动画和补间动画的使用场景（二）
2019独角兽企业重金招聘Python工程师标准>>> 逐帧动画和补间动画的使用场景(二) 上一节我们详细的介绍了补间动画和逐帧动画的基本使用,如果你对这还不熟悉的请看这篇文章: h ...
Android自定义控件：动画类---逐帧动画AnimationDrawable
1:概述 Android动画包括View Animation(视图动画)和Property Animator(属性动画),而View Animation包括Tween Animation(补间动画)和 ...
Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿 ...

web前段进阶：＜3＞逐帧动画和弹性布局

web前段进阶：＜3＞逐帧动画和弹性布局相关推荐

最新文章

热门文章