--- theme: qklhk-chocolate --- ## 背景 ##### 👏前几天在某短视频平台刷到一个类似的效果，觉得蛮好玩的，将它应用到你的小程序吧~ ##### 文末分享源代码。记得点赞+关注+收藏！ ## 1.实现效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14b1f4d9734d42a88cd60f190e40b09d~tplv-k3u1fbpfcp-zoom-1.image) ## 2.实现原理☕️ ### 2.1 引入阿里巴巴矢量图标可参考文章：[微信小程序引入外部icon（阿里巴巴矢量图标）](https://blog.csdn.net/qq_48085286/article/details/122574728?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166360292116800180637479%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166360292116800180637479&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122574728-null-null.nonecase&utm_term=%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4&spm=1018.2226.3001.4450) *注：生成彩色的图标，需在项目设置中勾选彩色哦~* ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0367f49d58eb4a59899b8dd88b44b0fe~tplv-k3u1fbpfcp-zoom-1.image) ### 2.2 圆环菜单布局 - 将菜单基于圆环布局，假设此圆只有一个菜单，让它定位到下图黄色菜单所示位置 ***注意：transform执行顺序从最外面字段开始~*** ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5d3f596d44045bb89d21f076a663ab9~tplv-k3u1fbpfcp-zoom-1.image) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2a3afa449a54af1bfc801af3f917ee1~tplv-k3u1fbpfcp-zoom-1.image) - rotate角度的获取：一个圆为360deg，将其等分，2个菜单偏移角度为180deg，4个菜单偏移角度90deg，以此类推可以得到： > rotate角度为： 360deog/菜单的个数 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c19bee41a6c4739b9d5e8b5849898c2~tplv-k3u1fbpfcp-zoom-1.image) - rotate旋转带动子元素图标的转动，将子元素设置反方向的转动 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/203567d049324d918e090d1df2561f43~tplv-k3u1fbpfcp-zoom-1.image) ### 2.3 CSS3 2D 转换+transaction [CSS3 transition 属性](https://www.runoob.com/cssref/css3-pr-transition.html)： >transition 属性设置元素当过渡效果。*注：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。* [CSS3 2D 转换：](https://www.runoob.com/css3/css3-2dtransforms.html) | 函数 |描述 | |--|--| |translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 | |scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 | ## 3.实现步骤🔔 - 定义菜单显示与否字段show_menu（默认false），当前所选菜单索引currIndex（默认' '） - 画一个盒子包括以下内容，默认设置属性为： ```cpp opacity: 0; transform: scale(0); visibility: hidden; transition: all 0.5s; ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b8ee622629d4a3d8ffd0fca8fabcab4~tplv-k3u1fbpfcp-zoom-1.image) - 画一个盒子元素，里面放一个可爱的图标，盒子设置伪元素 "点我吧"，当show_menu为true，为该盒子添加激活样式，即伪元素opacity设置为0 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a71f1941666a4a3c8102068c744a77db~tplv-k3u1fbpfcp-zoom-1.image) - 当show_menu为true，设置圆形菜单scale(1)；opacity：1； visibility: visible;计算菜单个数，设置rotate值，并调整合适的translateX偏移 - rotate角度根据菜单个数定 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc8ca49e44fe40d59c86d7e795bb8b78~tplv-k3u1fbpfcp-zoom-1.image) - 偏移量设置 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6bae9edffdf418dac205b9fb3bd1462~tplv-k3u1fbpfcp-zoom-1.image) ```cpp --n:{{index}};//index为菜单当前索引 --deg:{{360/ menu.length}}deg;//menu为菜单列表 ``` ```cpp transform: rotate(calc(var(--deg) * var(--n))) translateX(-140rpx); ``` - 设置选中菜单样式 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d2f43c9247140ceacfcf4e56131b727~tplv-k3u1fbpfcp-zoom-1.image) - 当currIndex===index，选中菜单背景，基于圆形absolute垂直居中定位，设置rotate+translateX，rotate角度为-deg*currIndex相关，translateX设置偏移量向外扩大一丢丢即可 ```cpp ``` ```cpp transform: rotate(calc(var(--deg) * var(--n))) translateX(-200rpx); opacity: 1; visibility: visible; ``` - 当currIndex===index，选中菜单，translateX设置偏移量向外扩大一丢丢即可，为图标并添加scale缩放效果 ```cpp ``` ```cpp .menu-box-item.active { transform: rotate(calc(var(--deg) * var(--n))) translateX(-200rpx); } .menu-box-item.active icon { animation: scale 1s ease-in-out; } @keyframes scale { 100% { transform: scale(1.9); } } ``` ## 4.实现代码 ```cpp ``` ```cpp @import "../utils/icon-font.wxss"; page { --bg: pink; background: var(--bg); height: 100%; display: flex; align-items: center; justify-content: center; --active: orange; --bgcolor: rgb(190, 127, 67); } /* 圆形菜单 */ .container { width: 400rpx; height: 400rpx; position: relative; } .menu-box { width: 400rpx; height: 400rpx; position: relative; opacity: 0; transform: scale(0); visibility: hidden; transition: all 0.5s; } .menu-box.active { transform: scale(1); opacity: 1; visibility: visible; } .icon { font-size: 56rpx; transition: all 0.5s; } /* 点我吧 */ .menu-add-box { width: 120rpx; height: 120rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.5s; position: absolute; top: calc(50% - 60rpx); left: calc(50% - 60rpx); background: var(--bg); } .menu-add-box::after { content: '^点我吧^'; position: absolute; bottom: -20rpx; font-size: 22rpx; color: #222; font-weight: bold; font-style: italic; transition: all .5s; opacity: 1; } .menu-add-box.active::after { font-size: 0rpx; opacity: 0; } .menu-add-box icon { transform: scale(1.5); } .menu-add-box.active icon { transform: rotate(135deg); } /* 每一项菜单 */ .menu-box-item { width: 80rpx; height: 80rpx; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; top: calc(50% - 40rpx); left: calc(50% - 40rpx); transition: all 0.5s; transform: rotate(calc(var(--deg) * var(--n))) translateX(-140rpx); } .menu-box-item icon { transform: rotate(calc(var(--deg) * var(--n))); transition: all 0.5s; } .menu-box-item.active { transform: rotate(calc(var(--deg) * var(--n))) translateX(-200rpx); } .menu-box-item.active icon { animation: scale 1s ease-in-out; } @keyframes scale { 100% { transform: scale(1.9); } } /* 选中的背景框 */ .menu-box-active { position: absolute; width: 100rpx; height: 100rpx; background: var(--active); box-shadow: 0 0 0 10rpx var(--bg); border-radius: 50%; pointer-events: none; transition: all 0.5s; transform-origin: center; top: calc(50% - 50rpx); left: calc(50% - 50rpx); z-index: 1; opacity: 0; visibility: hidden; } .menu-box-item.active~.menu-box-active { transform: rotate(calc(var(--deg) * var(--n))) translateX(-200rpx); opacity: 1; visibility: visible; } /*filter（滤镜）修饰父元素背景，影响子元素问题解决 */ .menu-box::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--bgcolor); border-radius: 50%; filter: drop-shadow(0px 0px 8px var(--active)); -webkit-filter: drop-shadow(0px 0px 8px var(--active)); } ``` ```cpp Page({ data: { menu_add: "icon-susumakalong", menu: [ { icon: "icon-susushutiao", name: "薯条", }, { icon: "icon-susutiantong", name: "甜筒", }, { icon: "icon-susutongluoshao", name: "铜锣烧", }, { icon: "icon-susuxiaoxiongruantang-46", name: "小熊软糖", }, { icon: "icon-susushiwutubiao-49", name: "提拉米苏", }, { icon: "icon-susunailao", name: "奶酪", }, { icon: "icon-susuhanbao", name: "汉堡", }, { icon: "icon-susupaofu-53", name: "泡芙", }, ], show_menu: false, currIndex: "", }, showMenu() { let { show_menu } = this.data; this.setData({ show_menu: !show_menu, currIndex: "", }); }, clickActive(e) { let { index } = e.currentTarget.dataset; if (this.data.currIndex === index || index === undefined) return false; this.setData({ currIndex: index, }); }, }); ``` ## 5.写在最后 ##### 看完本文如果觉得有用，记得点赞+关注+收藏鸭 ##### 更多小程序相关，关注💯***苏苏的bug***，💢[苏苏的github](https://github.com/susu-hu/susu-mini-tem)，😎[苏苏的码云](https://gitee.com/susuhhhhhh/wxmini_demo)~ ## 参考链接： 1. [微信小程序引入外部icon（阿里巴巴矢量图标）](https://blog.csdn.net/qq_48085286/article/details/122574728?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166360292116800180637479%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166360292116800180637479&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122574728-null-null.nonecase&utm_term=%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4&spm=1018.2226.3001.4450) 2. [CSS3 transition 属性](https://www.runoob.com/cssref/css3-pr-transition.html) 3. [CSS3 2D 转换](https://www.runoob.com/css3/css3-2dtransforms.html)