Web演示，单个文件中的应用程序
谁需要使用并非总是适用于所有系统的无聊笨重的办公室演示文稿包创建的演示文稿？您只需要一个Web浏览器和一组矢量/像素图像。只需一个HTML / CSS / JavaScript文件中的解决方案，您就可以拥有人们在演示文稿中使用的所有功能。
内容
动机
用法
演示数据
演示属性
图像文件类型
动画
实现细节
保留的动画
触摸屏支持
RTL支持
许可证说明
动机
在上一个演示中，我已经交付了SVG图像集合，这些图像主要表示一些体系结构解决方案。在开发建筑和设计解决方案时，总会有一些，因为SVG是最通用的矢量格式。尽管可以使用合适的图像查看器以演示方式轻松显示照片，但SVG通常会花费一些额外的精力，而最糟糕的选择可能就是与那些办公室演示应用程序发生冲突。为什么不显示图像本身？毕竟，它们具有可伸缩性，并且与所有非废话Web浏览器兼容。
因此，我迅速将这些图像放到一个JavaScript文件中，并添加了用于从一个图像移动到另一个图像的最简单脚本。终于解脱了！谁还会需要其他东西？
对于本文，我决定与大家分享这一喜悦，并添加了一些更高级的设置和一个演示，以将其重新设计成一个全面的解决方案。即使进行了这种开发，它仍然是一个简约的单文件产品，甚至更易于使用。
在演示中，我添加了一些动画SVG，静态WebP照片以及从摄像机外视频转换为WebP动画形式的WebP视频。这些文件和功能与演示产品本身无关，它们只是证明我们所需的一切已经可用，只能使用开源产品来创建。同时，我们可以用一种更容易的方式获得那些those肿的办公软件应用程序所期望的所有功能。
用法
基本用法可能非常简单。在现场演示还提供了一个介绍演示系统，并显示其功能。
基本上，演示者创建一组文件，每个文件代表一个演示框架，在演示数据文件中按所需顺序列出其路径，然后在浏览器中加载“https://www.xiaoyuani.com/”，并将演示数据文件传递到URL查询字符串中。演示开始。
也有一些高级属性的最小集合。每个都是可选的。
演示数据
除了图像文件，还需要描述演示文稿。首先，它需要一个图像文件的相对路径列表，以定义图像数据和演示文稿中图像的顺序。可以忽略所有其他属性，然后使用默认值。例如，假设我们将其放在文件“ demo / presentation.js”中，路径相对于“ presentation.html”：
const presentation = {
images: [ // relative to presentation.html
"demo/1.webp",
"demo/1.svg",
"demo/2.webp",
],
title: "Presentation Demo",
hideHelpOnStart: false,
colors: {
background: "white",
text: {
background: "azure",
foreground: "black",
border: "lightBlue",
},
},
rtl: false,};123456789101112131415161718
通过使用URL的查询字符串中演示文稿文件的路径，可以将该演示文稿加载到网页中。最简单的方法是拥有一个单独的特定于演示文稿的HTML文件。假设这是文件“ demo / index.html”，则其内容可能是：
<!doctype HTML><html>
<head>
<meta http-equiv="refresh" content="0; url=
../presentation.html?demo/presentation.js" />
</head></html>1234567
演示属性
所有路径都相对于“ presentation.html”的位置。
presentation.images：图像文件名称的数组，路径是相对于“ presentation.html”的。此属性是唯一的必需属性。如果缺少它，或者这是一个空列表，则应用程序将报告错误。
可选属性：
title：演示标题
hideHelpOnStart：布尔值（true / false），默认值：false，即默认情况下，在启动时显示帮助文本
colors：演示文稿背景和文本数据渲染的颜色
colors.background：演示文稿背景。对于支持透明度或Alpha通道的所有图像，它也用作背景。
colors.text：用于呈现文本数据的颜色，一个具有三个自解释属性的对象。
rtl：该选项从右到左的文化，详细解释如下，默认：false。
图像文件类型
对于表示框架，可接受所有针对Web标准化的MIME类型。对于矢量图形，这是SVG，图像/ svg + xml。对于栅格图形，可接受的类型为：image / apng，image / avif，image / gif，image / jpeg，image / png和image / webp。
最好避免使用特定浏览器接受但未针对Web标准化的图像文件类型，例如.bmp，.ico或.tif。
对于光栅图像，最实用和推荐的格式是WebP。与旧的图像类型相比，它提供了更好的压缩效果，支持渐进式渲染，针对图片，图标，照片，绘图和文本以及动画进行了优化的单独预设。栅格图形的其他动画支持类型是APNG，AVIF和GIF。
但是，出于演示目的，最重要的动画类型是矢量动画SVG，因为人们广泛使用各种过渡效果。即使这种效果比帮助理解材料更分散了演讲的注意力，但仍应将其视为必不可少的。
动画
尽管创建图像文件是用户的全部责任，但我只想评论动画的创建，仅使用针对Web标准化的图像文件类型以及仅使用开源产品和标准。有许多用于创建动画的工具。
例如，可以使用Inkscape创建SVG 。关于SVG动画，有很多文档，首先是SMIL，这可能是最适合演示的方法：每个过渡效果仅需要一小段XML代码，并且这些效果可以组合在同一元素上。此外，还提供了一些动画附件。
对于光栅图形，最好的方法可能是WebP。我使用了两种工具来创建动画。首先，动画可以由GIMP中的一组独立帧组成。为此，需要将每个帧放在单独的图层中，执行动画优化（[主菜单] =>滤镜=>动画=>优化（差异）），然后将结果保存在WebP图像中。保存时，GIMP将提供一个选项来创建动画。
另外，FFMpeg可以将可用的视频文件转换为WebP动画。命令行示例：
ffmpeg -i input_file -vcodec libwebp -filter:v fps=fps=20 -lossless 0 -compression_level 6 -an -vsync 0 output_file.webp1
有关更多详细信息，请参见FFMpeg文档。
我提到的所有软件工具不仅是开源的，而且在大多数平台上都可用。
实施细节
该实现非常简单，无需过多地详细介绍。本文的目的是为演示提供一个全面的工作工具，而不是要教任何东西。如果这项工作可以教人一点，那就是所有这些those肿的产品都追求极简主义和清醒实用的外观。
因此，我将仅涉及一些不太明显的方面。
保留动画
通过在初始化阶段不加载所有图像来保留动画。取而代之的是，只有一个img元素通过src仅针对演示文稿的第一张图片通过分配其属性而从源中加载。如图所示，将加载所有其他图像：
const move = backward => {
if (backward)
if (current > 0) --current; else current = presentation.images.length - 1;
else
if (current < presentation.images.length - 1) ++current; else current = 0;
image.src = presentation.images[current];
resize(image);};12345678
这样，每个image.src属性分配都会启动动画。因此，每当显示同一图像时，动画就会再次开始。
触摸屏支持
let touchStart = undefined;addEventListener("touchstart", event => {
touchStart = { x: event.changedTouches[0].clientX,
y: event.changedTouches[0].clientY };}, false);addEventListener("touchend", event => { touchStart = undefined; }, false);addEventListener("touchmove", event => {
if (touchStart == undefined) return;
const vector = { x: event.changedTouches[0].clientX - touchStart.x,
y: event.changedTouches[0].clientY - touchStart.y };
const horizontal = Math.abs(vector.x) > Math.abs(vector.y);
let back = horizontal ? vector.x > 0 : vector.y > 0;
if (horizontal && presentation.rtl) back = !back;
move(back);
touchStart = undefined;}, false);12345678910111213141516
此行为还取决于presentation.rtl下面说明的属性。
RTL支持
基于从右到左系统的书面写作文化也会稍微改变人们的观点。这种文化因素会影响某些人看时间箭头的方式：在西方文化中，人们将时间想象为左右浮动的事物，而另一些人则可能会反其道而行之。在这种情况下，将演示流程视为从右向左移动的内容会更加自然。对于这些人，rtl提供了财产。它仅更改触摸屏向左/向右箭头和向左/向右滑动的用法：更改为的方向相反。它与CSS方向无关，但基于类似的考虑。
实际上，它仅影响人们对待箭头键“←”和“→”的方式以及触摸屏滑动的方向。在西方文化中，暗指“←”表示“上一个”，“→”表示“下一个”，执行这些操作的人将当前帧想象为一个窗口，显示一条代表时间轴的帧。对于触摸屏滑动，一个人本身不是在移动窗口，而是在移动一条框架，因此“←”表示“下一个”，“→”表示“上一个”。在RTL文化中，所有四个操作都是相反的方向。同时，上下方向的含义不取决于文化。
因此，由于该函数move接受布尔参数，其含义是“转到上一帧”，因此箭头键的处理取决于presentation.rtl，但仅适用于水平方向：
switch (event.code) {
case "Space":
case "ArrowDown": move(false); break;
case "Backspace":
case "ArrowUp": move(true); break;
case "ArrowRight": move(presentation.rtl); break;
case "ArrowLeft": move(!presentation.rtl); break;
//...}123456789
类似地，仅在触摸屏滑动手势的实现中，反向才用于水平方向。