视觉中国图片编码
Hey everyone, hope you’re keeping well, today’s lessons bring us to a close on Applied Visual Design with FreeCodeCamp.
大家好，希望您一切都好，今天的课程使我们结束了使用FreeCodeCamp的Applied Visual Design 。
Let’s pick up where we left off with animations.
让我们从动画开始吧。
—
-
在CSS动画中创建心跳 (Create a Heartbeat in CSS Animations)
Using the animation-iteration-count:infinite; we can create a heartbeat of the heart element we created the other day. A continuous cycle of animation that mimics the look of a heart beating.
使用animation-iteration-count：infinite; 我们可以为前几天创建的心脏元素创建心跳。 模仿心脏跳动外观的连续动画周期。
There will be two animations happening within a 1 second period. The colour change and the size change. Let’s take a look at the code:
1秒内将发生两个动画。 颜色变化和尺寸变化。 让我们看一下代码：
<style>
<样式>
.back {
。背部 {
position: fixed;
位置：固定
padding: 0;
填充：0;
margin: 0;
边距：0;
top: 0;
最高：0;
left: 0;
左：0；
width: 100%;
宽度：100％;
height: 100%;
高度：100％;
background: white;
背景：白色；
animation-name: backdiv;
animation-name：backdiv；
animation-iteration-count: infinite;
animation-iteration-count：无限；
animation-duration: 1s;
动画时间：1秒；
}
}
.heart {
.heart {
position: absolute;
位置：绝对；
margin: auto;
保证金：自动；
top: 0;
最高：0;
right: 0;
正确：0；
bottom: 0;
底部：0
left: 0;
左：0；
background-color: pink;
背景颜色：粉红色；
height: 50px;
高度：50px；
width: 50px;
宽度：50像素；
transform: rotate(-45deg);
变换：旋转(-45度);
animation-name: beat;
animation-name：节拍；
animation-iteration-count: infinite;
animation-iteration-count：无限；
animation-duration: 1s;
动画时间：1秒；
}
}
.heart:after {
.heart：{
background-color: pink;
背景颜色：粉红色；
content: “”;
内容：“”；
border-radius: 50%;
边界半径：50％；
position: absolute;
位置：绝对；
width: 50px;
宽度：50像素；
height: 50px;
高度：50px；
top: 0px;
顶部：0px；
left: 25px;
左：25px；
}
}
.heart:before {
.heart：{
background-color: pink;
背景颜色：粉红色；
content: “”;
内容：“”；
border-radius: 50%;
边界半径：50％；
position: absolute;
位置：绝对；
width: 50px;
宽度：50像素；
height: 50px;
高度：50px；
top: -25px;
顶部：-25px；
left: 0px;
左：0px；
}
}
@keyframes backdiv {
@keyframes backdiv {
50% {
50％{
background: #ffe6f2;
背景：＃ffe6f2;
}
}
}
}
@keyframes beat {
@keyframes击败{
0% {
0％{
transform: scale(1) rotate(-45deg);
变换：scale(1)旋转(-45deg);
}
}
50% {
50％{
transform: scale(0.6) rotate(-45deg);
变换：比例尺(0.6)旋转(-45deg);
}
}
}
}
</style>
</ style>
<div class=”back”></div>
<div class =“ back”> </ div>
<div class=”heart”></div>
<div class =“ heart”> </ div>
As we can see, the .back is referring to the background and on a infinite loop, the colours pulse at the 50% mark to pinkish. Then we have the .heart selector in an absolute position (centered in the browser) which the pseudo-classes ::before and ::after are grouped to, all moving to a smaller scale size of 0.6 of the original size at the 50% mark. This gives the effect of a beating heart action repeating over and ove
如我们所见， .back指的是背景，并且在无限循环中，颜色在50％标记处脉动变粉红色。 然后，将.heart选择器放到绝对位置(在浏览器中居中)，将伪类:: before和:: after分组到该位置，所有这些都移到较小的比例，该比例在50％时为原始尺寸的0.6标记。 这会产生重复跳动的心脏动作的效果
以可变速率对元素进行动画处理(Animate Elements at Variable Rates)
If we have multiple animated elements, we can simply alter the animation time (the percentage markings) at which they take action. By varying the percent of each separate animation, we can make each animation have it’s own individual timing. Take this chunk of code for example which looks at the twinkling of two star animations:
如果我们有多个动画元素，我们可以简单地更改它们执行动作的动画时间(百分比标记)。 通过改变每个单独动画的百分比，我们可以使每个动画都有其自己的单独时间。 以这段代码为例，它看两个星星动画的闪烁：
.star-1 {
.star-1 {
margin-top: 15%;
保证金最高：15％;
margin-left: 60%;
左边距：60％；
animation-name: twinkle-1;
动画名称：twinkle-1;
animation-duration: 1s;
动画时间：1秒；
}
}
.star-2 {
.star-2 {
margin-top: 25%;
利润率最高：25％；
margin-left: 25%;
左边距：25％；
animation-name: twinkle-2;
动画名称：twinkle-2；
animation-duration: 1s;
动画时间：1秒；
}
}
@keyframes twinkle-1 {
@keyframes twinkle-1 {
50% {
50％{
transform: scale(0.5);
转换：scale(0.5);
opacity: 0.5;
不透明度：0.5;
}
}
}
}
@keyframes twinkle-2 {
@keyframes twinkle-2 {
20% {
20％{
transform: scale(0.5);
转换：scale(0.5);
opacity: 0.5;
不透明度：0.5;
}
}
}
}
Notice how the percentage for twinkle-1 is set at 50% and twinkle-2 is at 20% in the Keyframes rules? This means that the first twinkle animation will peak at half way through the 1 second animation period (the 50% mark), wheres as the other will peak at a fifth (the 20% mark) of the way through it’s animation at the same time. Therefore creating a varied animation of twinkling.
请注意，如何在“关键帧”规则中将“闪烁1 ”的百分比设置为50％ ，将“闪烁2 ”的百分比设置为20％ ？ 这意味着第一个闪烁动画将在1秒动画周期的一半(50％标记)达到峰值，而另一个闪烁动画将在动画的一半时间(动画标记)达到峰值(20％标记)。 。 因此，创建了瞬息万变的动画。
we could also alter the animation-duration of each animation if we wanted to, which would give the same result as above.
如果需要，我们还可以更改每个动画的动画持续时间，这将产生与上述相同的结果。
使用关键字更改动画计时功能 (Changing the Animation-Timing-Function with Keywords)
Let’s look at a new property of animation, the fifth property that we have covered now, the animation-timing-function.
让我们看一下animation的新属性，即我们现在介绍的第五个属性animation-timing-function 。
Imagine a car driving from one point to another, the animation-timing-function determines how much the car accelerates or decelerates over that period.
想象一辆汽车从一个点行驶到另一个点，动画定时功能确定了这段时间内汽车加速或减速的程度。
A couple keywords to know are:
要知道的几个关键字是：
ease : starting slow, speeding up then slowing down again.
缓解：开始缓慢，先加速然后再减速。
ease-out : starting fast and slowing down.
缓解：快速开始并放慢速度。
ease-in : which starts slow and speeds up.
缓入：开始缓慢并加速。
linear : applies a constant speed throughout.
线性：始终施加恒定速度。
So for example if we applied an animation-timing-function: ease-out; declaration to an animation in it’s selector, the affected element will then start fast and slow down towards the end of it’s animation. Easy.
因此，例如，如果我们应用了动画定时功能：easy-out; 在选择器中对动画进行声明，受影响的元素将在动画结束时快速开始并减速。 简单。
贝塞尔曲线 (Bezier Curves)
Instead of the generic values above, we can finely tune an animation using a Bezier curve, called the cubic-bezier function in the code. Imagine an X and Y-axis. The X-axis is the time duration of the animation and the Y-axis is the progress in the animation. The curve is marked on a 1 by 1 coordinate system, with four main points set out as p0, p1, p2 and p3.
除了上面的通用值，我们还可以使用Bezier曲线(在代码中称为cubic-bezier函数)对动画进行微调。 想象一下X和Y轴。 X轴是动画的持续时间，Y轴是动画的进度。 该曲线在1乘1坐标系上标记，四个主要点分别设置为p0，p1，p2和p3 。
p0 and p3 are the start and end of the curve (0,0 and 1,1 respectively) and are previously defined and fixed. When writing the positions of p1 and p2, they are defined as so: (x1,y1,x2,y2), with p1 being x1,y1 and p2 being x2,y2. Okay, let’s see that all-together visually with the example from Newton meets CSS:
p0和p3是曲线的起点和终点(分别为0,0和1,1)，并且已预先定义和固定。 写入p1和p2的位置时，它们的定义如下：( x1，y1，x2，y2 )，其中p1为x1，y1，而p2为x2，y2 。 好的，让我们看到牛顿的示例在视觉上完全符合CSS ：
Makes sense right? The p1 and p2 define the shape of the Bezier curve, as the lower and upper half of the curve will be pulled toward those two points. If you’ve ever messed about with Photoshop’s RGB graphs you’ll know what I mean.
有道理吧？ p1和p2定义了Bezier曲线的形状，因为曲线的下半部和上半部将被拉向这两个点。 如果您曾经对Photoshop的RGB图感到迷惑，那么您就会明白我的意思。
Here’s an example of the Bezier curve written in CSS:
这是用CSS编写的Bezier曲线的示例：
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
animation-timing-function函数：cubic-bezier(0.25，0.25，0.75，0.75);
This gives the same result as linear, as these points line up straight diagonally from bottom left of the graph to the top right, from 0,0 to 1,1.
这给出了与linear相同的结果，因为这些点从图的左下角到右上角从0,0到1,1沿对角线直线排列。
Another example alike to the ease-out value would be:
相似的难易出值另一个例子是：
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
animation-timing-function函数：cubic-bezier(0，0，0.58，1);
This would appear as a fast progression through the X-axis (time) slowing down near the end as the line curves out to reach the 1,1 position. Like a line going straight up then branching to the right.
这将表现为通过X轴(时间)的快速前进，随着直线弯曲到达1,1位置，其在末端附近变慢。 就像直线向上然后向右分支一样。
用贝塞尔曲线进行更自然的运动 (Making More Natural Movement with the Bezier Curve)
Let’s go for something really naturalistic. I took a break midway through this blog and took a walk, imagining how rain would look in the curve, dripping from a drain, or something similar that falls. But let’s stick to the example from FreeCodeCamp today, looking at a green ball being juggled. Just imagine the juggler is invisible.
让我们去寻找一些自然主义的东西。 我在这个博客的中途休息了一下，走了一段路，想象着雨水在弯道上看起来如何，从排水管滴下的水或类似的东西。 但是，让我们继续今天FreeCodeCamp的示例，看看一个杂乱无章的绿色球。 想象一下杂耍者是看不见的。
When we write the coordinates for the x1,y1,x2,y2, we can write the y-axis higher than the limitation of the 1 by 1 coordinate system, whereas the x-axis is limited to the 1 by 1 coordinate system (between 0–1). This means that we can make a bouncing ball for example, making an animation faster in a shorter length of time.
当我们写x1，y1，x2，y2的坐标时，我们可以写出高于1 x 1坐标系限制的y轴，而x轴则限于1 x 1坐标系(介于0–1)。 这意味着我们可以制作一个弹跳球，例如在较短的时间内使动画更快。
Let’s affect the id attribute “#green” for the ball in this example and alter it’s animation-timing-function. You’ll see the background property of the ball and how far it’s offset to the right of the browser, with the left offset.
在此示例中，让我们影响球的id属性“ #green”，并更改其animation-timing-function 。 您将看到该球的背景属性，以及该球向浏览器右侧的偏移量(向左偏移)。
Also, notice how the y2 coordinate is above the limitations of the 1 by 1 coordinate system perameters (above 1):
另外，请注意y2坐标如何超出1乘1坐标系统性能指标的限制(高于1)：
#green {
＃绿色 {
background: green;
背景：绿色；
left: 75%;
左：75％;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
动画计时功能：三次贝塞尔曲线(0.311，0.441，0.444，1.649);
}
}
—
-
And with that, we have swiftly come to the end of this section in Applied Visual Design!
至此，我们很快进入了“应用视觉设计”这一节的结尾！
Next time we’ll be diving into Applied Accessibility Challenges, which looks at the user interface (frontend development) which “can be understood, navigated, and interacted with by a broad audience” (FreeCodeCamp).
下次，我们将深入探讨“应用辅助功能挑战”，它着眼于用户界面(前端开发)，它“可以被广泛的受众理解，导航和交互”( FreeCodeCamp )。
Til then my good friends. Stay safe and see you tomorrow!
直到我的好朋友。 保持安全，明天见！
翻译自: https://medium.com/@hughburgess/learning-to-code-day-18-applied-visual-design-part-8-74747eaafa00
视觉中国图片编码
