卡尔·海德尔达尔美好的一天。这篇简短的文章专门测试了两个微小的新JavaScript库（motionia.js和consoleimg.js）的功能。第一个用于处理动画，第二个用于将图像输出到控制台。Motionia.js
Motionia.js是用于处理动画的库。元素使用进行动画处理motionia('target', 'anim')，其中target是任何HTML元素（id，class，tag），anim是动画的名称。根据开发人员的说法，motionia.js提供了100多种具有可扩展性的内置动画。我们连接库：<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>
我们创建五个容器。向每个添加单击事件处理程序。通过单击，将调用“ motionia”函数，该函数将作为参数传递给动画目标（动画元素），动画的名称以及在两种情况（第一个和最后一个容器）中的一个附加参数-动画设置：<div class="box1" onclick="motionia('.box5', 'slideX', '100px')">slideX</div>
<div class="box2" onclick="motionia('.box3', 'bounceIn')">bounceIn</div>
<div class="box3" onclick="motionia('.box4', 'rollIn')">rollIn</div>
<div class="box4" onclick="motionia('.box2', 'slideIn')">slideIn</div>
<div class="box5" onclick="motionia('.box1', 'slideY', '-100px')">slideY</div>
添加样式：body {
margin: 0;
height: 100vh;
background: radial-gradient(circle, lightgreen, darkgreen);
display: flex;
justify-content: center;
align-items: center;
}
div {
margin: 0 .5em;
width: 100px;
height: 100px;
background: linear-gradient(skyblue, steelblue);
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.8);
display: inherit;
justify-content: center;
align-items: center;
font-family: system-ui;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
user-select: none;
}
结果：在Github上放个星标以提出想法。在缺点中，可以指出以下几点：- 根据我的计算，有33种内置动画（例如Animate.css有97种）。
- 某些动画不起作用，例如翻转。
- 动画非常简单。
- 当尝试在另一个脚本中使用时，我们得到了
Uncaught ReferenceError: motionia is not defined，即 您只能在不常用的内置脚本中使用它。 - 由jQuery使用，它也不常见。我对jQuery没有什么反对，但是可以在纯JS中实现这种功能。
- 在选择器中，仅标识符，类和标记可用。
当然，要决定是否使用该库。Consoleimg.js
Consoleimg.js-顾名思义，这是一个用于将图像输出到控制台的库。我们找到并下载合适的图像（支持所有格式，包括gif和svg），从Github下载脚本并进行连接：<script src="consoleimg.min.js"></script>
使用会在控制台中显示图像consoleimg.load('image', {size: 320, color: 'transparent'})，其中image是图像的名称，大小是最大图像高度（默认为320px），color是背景色（默认为透明）。consoleimg.load('img.png', {size: 320, color: '#fff'})
结果：
无用，但有趣。代码在这里。感谢您的关注。