尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

figma数字转盘交互动态效果

figma数字转盘交互动态效果
📅 发布时间:2026/6/20 17:39:54

今天我要做出 Figma 里数字转盘的动效,核心是用组件 + 原型动效 + 参数配置与调试
一、制作数字转盘静态效果
步骤 1:创建画布与轴心
打开 Figma,新建一个iPhone 13(快捷键F),作为手机显示画布。用椭圆工具(O)按住Shift画一个20x20px的正圆

屏幕截图 2025-12-13 235237

步骤 2:添加第一个数字并定位锚点
用文字工具(T)在轴心右侧画文本框,输入数字100、字号24px、颜色 灰色。
选中文本框,把画布中出现的 旋转锚点拖到轴心正圆的中心。

屏幕截图 2025-12-13 235646

步骤 3:固定角度旋转 + Ctrl+D 复制
保持文本框选中,鼠标移到文本框右下角旋转手柄,按住Shift拖动旋转15°。
松开后按Ctrl+D,重复「旋转 15°+ 复制」,持续按直到数字围绕轴心排成完整环形。
双击每个文本框,依次修改数字为 150、210、264、321、451、468 等。

屏幕截图 2025-12-13 235939

步骤 4:设置叠加模式与通透效果
框选所有数字文本,在右侧属性面板找到叠加模式下拉框(默认显示「正常」),选择 「正片叠底」
选中所有数字,将文本不透明度调到 60%;若效果不够,可在数字图层下方加一个黑色矩形遮罩(不透明度 30%)

屏幕截图 2025-12-14 000126

二、制作转盘滚动动效(原型交互)
步骤 5:将转盘转为组件
选中所有数字图层 + 轴心,按Ctrl+G编组,再右键编组→选择(创建组件),让转盘成为可复用组件。
复制两份一样的出来,然后将数字转盘转换数字

屏幕截图 2025-12-14 000337

屏幕截图 2025-12-14 000841

步骤 6:添加原型滚动动效
点击 Figma 顶部的 「原型」
选中转盘组件,在右侧原型面板中拉圆形连线建关联
从拖拽组件锚点拖线到「滚盘数字组」,实现“拖拽-滚动”关联,多页面联动就复制设备帧后跨页拉连线。
对数字滚盘的交互节点(如数字1/2/3)执行全量双向原型链路搭建,实现节点间的交叉触发关联

屏幕截图 2025-12-14 000926

三、动效参数配置与调试

  1. 绑滚动动效
    选连线,把动作改成导航到,动画类型选智能动画;缓动曲线选「轻巧」,时长设800毫秒。

屏幕截图 2025-12-14 001208

不会上传视频,那就看看照片吧,

屏幕截图 2025-12-14 001639

相关新闻

  • JavaEE进阶——Spring事务与传播机制实战指南
  • 2025年年终中国检验检测机构推荐:整合实验室能力与市场口碑的全面评估,10家优质机构详细清单 - 十大品牌推荐
  • 鸿蒙PC UI控件库 - NumberInput 数字输入框详解

最新新闻

  • 嵌入式Linux开发:CodeWarrior IDE目标设置与GNU工具链配置详解
  • 如何高效管理京东任务:终极自动化脚本完全指南
  • 如何用Ice拯救你的Mac菜单栏?3步打造极致整洁的工作空间
  • 盘点抖店主流上货工具:抖掌柜核心功能全解,商家高频疑问一次性解答(2026最新) - 抖掌柜
  • LPC213x I2C驱动开发:寄存器解析、状态机实战与调试指南
  • 智己LS6和问界M7怎么选?2026款值得买的深度对比与理性选购建议 - 外贸老黄

日新闻

  • 信任的进化:技术实现详解——如何用JavaScript构建博弈论模拟器
  • Terrakube自定义工作流:如何集成OPA、Infracost等工具扩展IaC能力
  • grunt-concurrent快速入门:5分钟学会并行运行Grunt任务

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号