当前位置: 首页 > news >正文

figma数字转盘交互动态效果

今天我要做出 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

http://www.rkmt.cn/news/97910.html

相关文章:

  • JavaEE进阶——Spring事务与传播机制实战指南
  • 2025年年终中国检验检测机构推荐:整合实验室能力与市场口碑的全面评估,10家优质机构详细清单 - 十大品牌推荐
  • 鸿蒙PC UI控件库 - NumberInput 数字输入框详解
  • 鸿蒙PC UI控件库 - SearchInput 搜索输入框详解
  • 2025年带钢品牌深度解析:如何挑选耐用打包铁条?,排行前列的带钢销售厂家口碑推荐优选实力品牌 - 品牌推荐师
  • 2025年年终留学中介机构推荐:全维度服务能力横评,涵盖资源、案例与可靠性的10家机构深度解析 - 十大品牌推荐
  • 21、Debian系统管理与网络配置全解析
  • AutoGPT与Google Calendar联动:智能提醒系统构建
  • NVIDIA NIM、Triton推理服务器和TensorRT-LLM使用场景和作用
  • 乐又迪英语 联系方式: 少儿英语培训服务详情与注意事项 - 品牌推荐
  • 乐又迪英语 联系方式: 剑桥英语KETPET课程选择参考建议 - 品牌推荐
  • kakfa文件清理策略方法和种类
  • springboot学生心理咨询评估系统(11484)
  • NVIDIA NeMo和NIM是用于开发和部署大模型
  • 红黑树:比AVL更“聪明”的平衡树,拆解那些反直觉的核心难点
  • Let‘s Encrypt免费证书与HTTPS配置完全指南
  • 2025年年终中国检验检测机构推荐:基于权威资质与多领域服务能力的10家高可靠性机构盘点 - 十大品牌推荐
  • Linux性能监控工具全家桶一文掌握系统状态
  • Wan2.1-I2V图生视频模型完整教程:从零开始掌握动态内容生成
  • 由AI驱动的3D机器人感知与地图构建技术栈
  • deepseek进入死循环了
  • Django 标准缓存cache 模块API
  • NVIDIA Llama Nemotro 推理模型构建企业级 AI 智能体
  • BERT模型训练全流程解析:从数据加载到模型保存
  • OpenFeign 声明式客户端的动态代理与 LoadBalancer 负载均衡策略
  • Tiled地图渲染引擎深度解析:从架构设计到性能优化的完整指南
  • OpenCode正则搜索:让代码大海捞针变得轻而易举
  • 打卡信奥刷题(2535)用C++实现信奥 P2041 分裂游戏
  • canvas基础与乾坤
  • NPM 包发布完整实战方案