网站开发服务合同,怎么用wordpress安装源码,杨凌网站建设公司,上海做壁画的网站前言
引导动画是程序在某一时刻播放的动画#xff0c;通常用于向用户介绍程序的功能和特点。
实现效果 实现方式
引导动画的实现方式有很多种#xff0c;这里我使用的是 CSS 的 clip-path 属性。
技术选型
这里我为什么要选择 clip-path 属性而不是 mask 属性呢#xf…前言
引导动画是程序在某一时刻播放的动画通常用于向用户介绍程序的功能和特点。
实现效果 实现方式
引导动画的实现方式有很多种这里我使用的是 CSS 的 clip-path 属性。
技术选型
这里我为什么要选择 clip-path 属性而不是 mask 属性呢因为我试了下 mask 好像只能在上层加个半透明背景虽然它可以通过 CSS 的渐变实现绘制出某个元素的位置上方的背景为透明色但是这个背景仍然是全屏覆盖的还是会遮挡下方元素的点击等操作。 后来我试了下将下方被遮挡的元素完全复制到背景上方这样就能实现元素不被遮挡的效果了但是点击等事件并不能复制过来所以最后我选择了 clip-path 属性。
从背景中抠出一块矩形区域的 CSS 代码如下
mask: {display: none,transition: all 1s,width: 100vw,height: 100vh,background: rgba(0, 0, 0, 0.5),position: absolute,top: 0,left: 0,clipPath: polygon(0% 0%, 0% 100%, 200px /* x坐标的最小值 */ 100%,200px 100px, /* 左上角坐标 */400px 100px, /* 右上角坐标 */400px 200px, /* 右下角坐标 */200px 200px, /* 左下角坐标 */200px /* x坐标的最小值 */ 100%, 100% 100%, 100% 0%),
}实现步骤
js 创建创建背景层和提示文字层并赋予样式js 动态计算每一步骤的坐标并更新背景层的样式js 监听每一步骤的点击事件并更新背景层的样式js 监听每一步骤的动画结束事件并更新背景层的样式跳转到下一步骤并播放下一步骤的动画最后隐藏背景层及提示文字层
技术难点
因为 img 元素是异步加载的所以需要异步等待 img 元素加载完成后再进行计算所以我将 img 的 onload 事件封装成了异步函数并使用 await 来同步操作但这样的话在外层也需要使用 await 来进行等待。所以我使用了执行器队列来解决这一问题。即在外部调用某个函数时将该函数放入队列中最后使用循环来依次按先后顺序执行队列中的函数。
安装及使用
npm i guide-anime这样在使用时就可以直接这样写
const guider Guide();
guider.setOptions({steps: [{element: #vite,},{element: #vue,},],
});
guider.start();总结
我已经将这个库封装成一个 npm 包并添加更多的功能比如自动计算每一步骤的坐标以及自动播放每一步骤的动画等。
具体使用请参考 guide-anime
此项目的开发让我对前端有了更深的理解我将继续钻研前端工程化方面的知识。
参考
使用 CSS 渐变奇妙的 CSS MASKclip-pathclip-path 在线生成器
