后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用这些工具提高效率！🍇 九月精选
夏天即将结束😞，快来看看这些新的 JS 库，别忘了好心情！🎉🎉
Granim.js是一个简单、轻量级的 javascript 库，允许配置渐变动画。
<canvas id="canvas-basic"></canvas>
var granimInstance = new Granim({
element: '#canvas-basic',
direction: 'left-right',
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#ff9966', '#ff5e62'],
['#00F260', '#0575E6'],
['#e1eec3', '#f05053']
]
}
}
});
在网站上，您可以找到各种示例，展示基本功能和高级功能。
例如，我们可以将图像与渐变动画混合，创造出极具启发性的效果。然后，可以将其与自定义逻辑相结合，根据一天中的时间显示不同的颜色：
Anime.js是一个轻量级的 JavaScript 动画库，拥有简单但强大的 API。
它兼容 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
我们可以立即导入并开始使用它：
import anime from 'animejs/lib/anime.es.js';
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
有一组丰富的示例可用于实验库的功能：
动画手写文字
蛇的精彩动画
（只需从一个登录字段切换到下一个登录字段即可查看效果）
动画提交按钮
（点击按钮即可观看直播）
支持主流浏览器（🔥 甚至 IE 8+ 🔥）
Popper.js是一个 JS ES2015 库，用于在 Web 应用程序中定位“poppers”。
弹出窗口是屏幕上从应用程序的自然流程中“弹出”的元素。
弹出窗口的常见示例包括工具提示、弹出框和下拉菜单。
它是一种定位引擎，其目的是计算元素的位置，并将其放置在给定的参考对象附近。
通过以下代码，我们可以指示目标“popper”元素根据其位置显示在其参考元素的左侧/底部/顶部。这可以非常轻松地解决工具提示根据其在父容器中的位置动态显示在不同位置的问题。
var popper = new Popper(referenceElement, onLeftPopper, {
placement: 'left',
modifiers: {
flip: {
behavior: ['left', 'bottom', 'top']
},
preventOverflow: {
boundariesElement: container,
},
},
});
当我们位于容器的左上角时：
左下角一次：
我们有多少次需要编辑图片并设置透明背景？确实，我们可以使用一些程序来实现这一点，例如 MS Paint.Net。
但是，当背景由多种颜色或图案组成时，它们仍然能提供良好的效果吗？在某种程度上，或许可以，但这需要付出与背景复杂性成正比的相当大的努力。
对于这些情况，RemoveBG可以提供帮助！
这是一款在线工具，能够移除已上传照片的背景，并替换为新背景。
如果我们使用 Photoshop，可以将其集成为扩展程序，或者我们甚至可以在应用程序中通过API使用它：
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');
request.post({
url: 'https://api.remove.bg/v1.0/removebg',
formData: {
image_file: fs.createReadStream('/path/to/file.jpg'),
size: 'auto',
},
headers: {
'X-Api-Key': 'INSERT_YOUR_API_KEY_HERE'
},
encoding: null
}, function(error, response, body) {
if(error) {
return console.error('Request failed:', error);
}
else if(response.statusCode != 200) {
return console.error('Error:', response.statusCode, body.toString('utf8'));
}
fs.writeFileSync("no-bg.png", body);
});
我试了一下，输出结果的精确度令我印象深刻。
我们甚至可以在保存最终图像之前，对中间版本进行优化，以获得更精确的结果。
原始图像下方：
最终结果：
CSS Wand收集了一组常见的 CSS 效果（如：旋转、收缩、波纹等），我们可以在项目中复制和使用它们。
对于以下旋转效果：
提供以下代码片段：
以下是可复制版本的相同代码片段：
button {
color: #1D9AF2;
background-color: #292D3E;
border: 1px solid #1D9AF2;
border-radius: 4px;
padding: 0 15px;
cursor: pointer;
height: 32px;
font-size: 14px;
transition: all 0.2s ease-in-out;
}
button:hover{
transform: rotateZ(-30deg);
}
因此，我们可以将 CSS Wand 视为一个规则库，当我们需要快速设置 Web 应用程序中某些元素的样式或仅仅作为参考时，可以访问该规则库。
这些就是我们九月份的发现！下个月再来查看新的系列吧。
