安卓控件大小动态文字排版

Lately I’ve been interested in creating motion typography for the web. Making shattered text turned out to be a combination of SVG, JavaScript and CSS, which I thought might make a useful tutorial article.

最近，我对创建Web的动作排版感兴趣。 制作破碎的文本原来是SVG ， JavaScript和CSS的组合，我认为这可能会成为有用的教程文章。

制作文字 (Making The Text)

Neither HTML nor CSS has the ability to fragment letterforms: that’s currently the sole province of SVG. To make that happen, I created text in Adobe Illustrator, broke the letters into outlines, and split the result using the Knife tool, working from the inside out. This created “breakpoints” in the text, while maintaining the appearance of wholeness.

HTML和CSS都不具有对字母格式进行分段的功能：这是SVG的唯一省份。 为此，我在Adobe Illustrator中创建了文本，将字母分解为轮廓，然后使用“ 切刀”工具从内到外拆分结果。 这在文本中创建了“断点”，同时保持了整体外观。

The result, exported as an SVG and given a quick code cleanup, is a series of simple paths:

作为SVG导出并给出快速代码清除的结果是一系列简单的路径：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.7 162.3" id="heavy"><path d="M72, 134.1v0.9h30.5v-8.8C92, 127.2, 81.9, 130.4, 72, 134.1z"/><path d="M102.6, 113c-10.1, 1.5-20.3, 2.2-30.5, 2.7v18.4c9.9-3.7, 20-6.9, 30.5-7.8V113z" />
…

This SVG code is placed directly in the body of an HTML document.

该SVG代码直接放置在HTML文档的主体中。

By default SVG paths are filled with black, but I wanted the reverse. I also needed to add a stroke definition, so that the SVG pieces looked seamless. The following CSS will achieve that:

默认情况下，SVG路径填充为黑色，但我想反过来。 我还需要添加stroke定义，以便SVG片段看起来无缝。 以下CSS将实现这一目标：

body { background: #000; }
svg#heavy path { fill: white; stroke: white; }

With the fractures in place, I needed to consider how to make the pieces fly apart.

骨折到位后，我需要考虑如何使碎片飞散。

运动设计 (Motion Design)

Animating each of the letter fragments by hand would be incredibly tedious; instead, I decided to write the motion as a script. Before starting to code, I had to design what the motion would look like, and then translate it into mathematics.

手工制作每个字母片段的动画将非常繁琐； 相反，我决定将议案作为脚本来编写。 在开始编码之前，我必须设计运动的外观，然后将其转化为数学形式。

From the separation lines I used to divide the letters, I knew that the word “HEAVY” would explode outwards from its center. This means that every piece would travel in a radial line from the center of the text. If I could locate each piece, then I could determine its distance (x and y) from the center. Moving each piece could then be a simple matter of taking a portion of x and y and using a CSS transform to translate it further in the same direction.

从我用来分隔字母的分隔线中，我知道“ HEAVY”一词将从其中心向外爆炸。 这意味着每一段都将从文本中心沿径向线行进。 如果我可以找到每个零件，则可以确定其与中心的距离( x和y )。 那么移动每个片段就很简单，只需取x和y的一部分，然后使用CSS变换将其沿相同方向进一步平移即可。

使用JavaScript编写动作脚本 (Scripting Motion With JavaScript)

A script at the end of the document gains the information we need we need to create the motion.  We can’t use the standard offsetLeft to locate SVG elements; instead, we have to use getBBox():

文档末尾的脚本获得了创建动作所需的信息。 我们不能使用标准的offsetLeft来定位SVG元素； 相反，我们必须使用getBBox() ：

var heavy = document.getElementById("heavy"),
dim = heavy.getBBox(),
heavyCenterX = dim.width/2,
heavyCenterY = dim.height/2,
force = 8;
heavyPieces = document.querySelectorAll("svg#heavy path");

Next, we’ll loop though the paths:

接下来，我们将遍历路径：

for (var i=0; i < heavyPieces.length; i++) {var piece = heavyPieces[i];piece.id = "fragment"+i;var bbox = piece.getBBox();var pieceCenterX = bbox.x + (bbox.width/2);var pieceCenterY = bbox.y + (bbox.height/2);var distanceX = Math.abs(heavyCenterX - pieceCenterX);var distanceY = Math.abs(heavyCenterY - pieceCenterY);…
}

Each fragment is given an id, with a calculated center and a distance from the center of the text.

每个片段都有一个id ，其id带有计算得出的中心以及距文本中心的距离。

Next, we move the pieces. If the fragment is in the top right corner, it moves up and to the right; if it’s in the lower left corner, it moves to the left and down. At the same time, we want to ensure that each fragment moves proportional to its position: the inner fragments by just a fraction, and the outer ones significantly more. I’ll use force to reduce the distances proportionally:

接下来，我们移动碎片。 如果片段在右上角，则它将向上和向右移动； 如果它位于左下角，则它将向左和向下移动。 同时，我们要确保每个片段都按其位置成比例地移动：内部片段仅占一小部分，而外部片段则更多。 我将force按比例减小距离：

if (pieceCenterX > heavyCenterX) {var moveX = distanceX/force+"px";
} else {var moveX = "-"+distanceX/force+"px"; }
if (pieceCenterY > heavyCenterY) {var moveY = distanceY/force+"px";
} else {var moveY = "-"+distanceY/force+"px";
}

It will be a little boring if the fragments only move in straight lines away from the center; I’ll also add a little random spin:

如果片段仅沿直线远离中心移动，将有些无聊； 我还将添加一些随机旋转：

var force = 8,
min = -2.5,
max = 2.5,
randomRot = Math.floor(Math.random() * (max - min + 1)) + min;

I want this action to take place when the user hovers over the text. Putting all of this together in a transform applied with JavaScript, and ignoring vendor prefixes for the sake of simplicity:

我希望用户将鼠标悬停在文本上时执行此操作。 将所有这些放在一起进行JavaScript转换，并为简单起见忽略供应商前缀 ：

document.styleSheets[0].insertRule("svg:hover #fragment"+i+" { transform: translate("+moveX+","+moveY+") rotate("+randomRot+"deg) }",1);

This is good, but the text doesn’t actually animate yet: a hover over the SVG will simply place the fragments in their final position.

很好，但是文本实际上还没有动画：将鼠标悬停在SVG上只会将片段放置在最终位置。

创建动作电影动作 (Creating Action Movie Motion)

I wanted a very specific kind of motion for the explosion: a “move quick, then slow motion” movement familiar from modern action movies. After a little fiddling in Ceaser, I came up with a motion graph that looks like Figure 1.

我想要一种非常特殊的爆炸动作：现代动作电影中熟悉的“先快后慢”动作。 在对Ceaser稍作摆弄之后 ，我想出了一个类似于图1的运动图。

Time is measured horizontally in this graph, with “amount of change” vertically: so what you see is a very quick “explosion” phase, followed by a long, drawn-out movement driven by the initial impetus.

在此图中，时间是水平测量的，垂直是“变化量”的：因此，您看到的是一个非常快速的“爆炸”阶段，随后是由初始动力驱动的长而缓慢的运动。

As a CSS Bezier curve timing function, it looks something like this:

作为CSS Bezier曲线计时功能，它看起来像这样：

svg#heavy path {fill: white;stroke: white;transition: 12s 1.6s cubic-bezier(0, 1, 0, 1);
}

Note the relatively long duration (12 seconds) and the brief pause beforehand (1.6 seconds). The pause is present because I needed some motion to initially break up the letters, which is the next step.

请注意相对较长的持续时间(12秒)和短暂的预先暂停(1.6秒)。 之所以会出现暂停，是因为我需要一些动作来初步分解字母，这是下一步。

在压力之下 (Under Pressure)

Without a cue – the sound of a gunshot or a visual impact – there’s no reason for the letters to fly apart in the first place. I decided to animate the word “HEAVY” as a whole, as it was as struggling to contain internal pressure.

没有提示(枪声或视觉冲击声)，字母就没有理由飞散了。 我决定对整个“ HEAVY”这个词进行动画处理，因为它难以承受内部压力。

While it would be possible to write this in JavaScript too, I decided to simply code it a CSS keyframe animation:

尽管也可以用JavaScript编写此代码，但我还是决定将其编码为CSS关键帧动画：

@keyframes shake {0% { transform: translate(3px,5px); }5% { transform: translate(8px,-5px); }10% { transform: translate(-3px,2px); }…
}

The motion doesn’t have to be much, but it does need to move relatively quickly:

动作不必太多，但确实需要相对快速地移动：

svg:hover { animation: shake 1s linear; }

With the timing delay on the explosion, the animation and transitions work together to give the impression of a seamless sequence.

由于爆炸的时间延迟，动画和过渡效果共同发挥作用，给人以无缝序列的印象。

添加触控支持 (Adding Touch Support)

To gain support on iOS and other devices I created a quick hack to initiate the same behaviour on touch:

为了获得对iOS和其他设备的支持，我创建了一个快速技巧来启动触摸时的相同行为：

var paths = document.getElementsByTagName('path')[0];
heavy.onclick = function() {
paths.onhover.call(paths);
};

结论 (Conclusion)

While the result works well, there are a few improvements that could be made… the most significant being auto-fragmenting the text using JavaScript, rather than drawing the divisions by hand. This is a challenge I will leave for a future article.

虽然效果很好，但是可以进行一些改进……最重要的是使用JavaScript自动对文本进行片段化，而不是手工绘制分割。 这是我将在以后的文章中提出的挑战。

翻译自: https://thenewcode.com/868/Dynamic-Web-Typography-Exploding-Text

安卓控件大小动态文字排版