【Axure教程】轮盘滑动控制元件移动

news2024/11/20 9:41:27

轮盘控制元件移动是一种通过轮盘来控制元件位置或参数的方式。轮盘通常是一个圆形或半圆形的旋转控制器,用户可以通过旋转轮盘来实现元件的移动。轮盘滑动控制元件移动广泛应用于各种设备和系统中,例如移动端操作内的游戏,通过旋转轮盘,可以精确地控制元件在水平或垂直方向上的位置,如游戏中的角色移动或窗口的滚动

今天作者就教大家如何在Axure中用制作一个能通过轮盘控制元件移动的原型模板

一、效果展示

  1. 可以拖动轮盘的方式,让指定元件(兔子)朝着对应方向移动
  2. 可以控制移动的边界,让指定元件即使一致超值某一方向移动,也不会移出极限

【原型预览及下载地址】

https://axhub.im/ax9/aa3d5650fa9a67e4/#g=1&p=轮盘滑动控制元件移动案例

二、制作教程

1. 材料准备

这个模板的材料比较简单,包括:

1、背景图片,这个可以根据自身需求设置

2、被移动的元件,案例中是用兔子的图片,你们也可以指定对应的元件

3、轮盘:轮盘我们用Axure原生元件制作即可,其实就是两个圆,顶部是白色的小圆,底部是黑色半透明的中圆。这里我们需要将小圆转为动态面板,因为axure里面只有动态面板有拖动事件,所以我们要将小圆转为动态面板。另外,我们还需要一个和小圆一样大小的圆,放在和小圆一样的中心的,默认隐藏即可,后续会交互计算中会用到。

2. 交互制作

1)轮盘的拖动效果

我们首先要制作白色圆点能在黑色底盘上拖动的效果,我们用移动的时间,设置当前元件跟随鼠标的拖动而移动。移动的话我们也是有距离限制的,我们可以设置边界,让白色小圆不超出黑色底盘的上下左右边界。

在轮盘拖动结束时,我们要让白色小圆回到原来的地方,就是黑色底盘的中心点,这里我们同样用到移动的事件,里面选择回到拖动前的位置,这样他就自动复原了。

2)移动指定元件的效果

轮盘拖动完成之后,我们怎样移动指定元件,根据我们轮盘拖动的方位像指定方向移动呢?这里面其实主要涉及数学的问题,我们可以通过小圆拖动时的位置和原来的位置做比较,相当于通过xy坐标来判断移动的位置,例如原点位置为0,0,拖动后的位置是100,50,那么就是说朝右方移动了100的矩形,朝上方移动了50的距离,我们通过圆点和拖动时的点位,亮点就可以确定一直线方向,这样我们将移动的矩形用指定倍速设置到指定元件即可。那因为拖动时的交互是每时每刻都在变动的,所以案例中是用0.02倍,当然这个你们也可以根据需要,或者移动的速度来设置,可以通过修改倍数值,从而改变移动的快慢

如果需要控制指定元件移动的范围,同样我们我们也可以增加上下左右的边界来限制。

因为拖动时的交互是每时每刻都在变动的,所以我们要写一个循环时间来不断触发这个循环,一般实现循环有很多种方法:

一般是用动态面板来实现的,通过设置面板状态的交互,设置面板状态到下一个,勾选循环,在面板状态改变时,增加需要重复循环的交互,这样就能实现不断的循环对应的交互事件。

我们也可以简单的来事件,通过等待事件和触发事件,例如等待0.01秒,然后触发上面的交互,从而形成循环

这样我们就制作完成了轮盘控制元件移动的原型模板了,下次使用时,只需要在更换移动的素材,修改一下对应的边界,即可自动实现轮盘移动的效果,是不是很方便呢?

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/541194.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

神经网络:Zero2Hero 3 - Gradient calculation

Zero2Hero 4 - Gradient 创建一个Value类,属性包含变量的值和梯度信息,并支持梯度计算。举例说明梯度反向计算过程。基于Value类构建MLP模型、并实现参数的更新。 import numpy as np import matplotlib.pyplot as plt %matplotlib inlineValue类 支持…

麻了呀,现在的00后都这么卷了吗?

在程序员职场上,什么样的人最让人反感呢? 是技术不好的人吗?并不是。技术不好的同事,我们可以帮他。 是技术太强的人吗?也不是。技术很强的同事,可遇不可求,向他学习还来不及呢。 真正让人反感的,是技术平平&…

元宇宙应用领域-工业

元宇宙是指虚拟空间的总称,在这个虚拟空间中,用户可以像在现实世界一样,通过虚拟现实技术进行交互和体验。元宇宙应用领域非常广泛,如工业、游戏、娱乐、教育、医疗、房地产等。 工业领域中,元宇宙可用于在设计阶段帮…

【ThinkPHP6系列学习-1】下载并部署ThinkPHP6

目录 一、下载ThinkPHP6 二、目录结构 三、部署,配置虚拟域名 一、下载ThinkPHP6 在指定目录(www目录)下打开cmd,使用composer下载thinkphp6,命令后面的thinkphp6就是下载的目录名,可以随意修改。 comp…

流媒体传输协议相关小结——NALU、RTP、RTSP、RTMP、SDP等

前言: 本文是博主在学习流媒体时进行的小结,涉及内容较多。 由于流媒体协议说复杂也复杂,说简单也简单,复杂在需要考虑到每一位比特,简单在现成的轮子很多,只是会用往往已经足够。因此此文面向那些希望对流…

微信小程序开发实战课后习题解答————第三章(作业版)

一、填空题 1、微信小程序中用 navigationBar 组件可以实现导航栏 2、 微信小程序中能够实现轮播效果的组件是 swiper 3、 微信小程序中实现滚动条事件的绑定方法是 bindscroll 4、 微信小程序中引入音频的组件是 InnerAudioContext 5、 微信小程序…

ESMM - 完整空间多任务模型(阿里)

文章目录 1、动机2、模型结构 Entire Space Multi-Task Model: An Effective Approach for Estimating Post-Click Conversion RateESMM: Entire Space Multi-Task Model论文发表在SIGIR-2018,作者来自阿里妈妈盖坤团队。ESMM被提出用于解决pcvr建模中存在的两个非常…

ChatGPT + MindShow 制作PPT

🍏🍐🍊🍑🍒🍓🫐🥑🍋🍉🥝 ChatGPT MindShow 制作PPT 文章目录 🍐具体操作🐳结语 🍐具体操作 ChatGP…

异步线程:CompletableFuture、@Async

区别: 1.CompletableFuture是java中提供的一个异步执行类,Async是Spring提供的异步执行方法,当调用方法单独开启一个线程进行调用。 2.Async通常指定一个方法使用的异步方法调用,而CompletableFuture可以一个方法体内对请求体进行排序组合成…

SQL方式对hudi表进行操作

插入数据 查询数据 更新数据 删除数据 覆盖数据 修改表结构 修改分区 插入数据 默认情况下,如果提供了preCombineKey,则insert into的写操作类型为upsert,否则使用insert。 向非分区表插入数据 insert into hudi_cow_nonpcf_tbl sel…

通达信获取行情主站ip地址方法

最近使用通达信的pytdx来获取股票行情,需要通达信的行情站的ip地址与端口,这里做个记录防止忘了 1 测试代码 pip install pytdx from pytdx.hq import TdxHq_API api TdxHq_API() with api.connect(‘121.36.81.195’, 7709):#通达信行情站地址、端口…

摸摸索索总结下项目生命周期经验

业务调研 主要是完全跟技术无关,站在业务的角度去定义系统要干嘛 组织结构图 部门岗位 业务流程图 泳道图,一级业务流程二级业务流程 系统多个模块的整体业务流程 每个模块内部的业务流程 业务需求 需求分析 站在技术的角度,去分析系…

JavaWeb-JSP的学习

JSP 今日目标: 理解 JSP 及 JSP 原理能在 JSP中使用 EL表达式 和 JSTL标签理解 MVC模式 和 三层架构能完成品牌数据的增删改查功能 1、JSP 概述 JSP(全称:Java Server Pages):Java 服务端页面。是一种动态的网页技术…

深拷贝和浅拷贝-M

深拷贝和浅拷贝 数据类型分为:基本数据类型和引用类型 首先基本数据类型分为:number,string,boolean,null,undefined,symbol以及未来ES10新增的BigInt(任意精度整数)七类。 引用类型分为Array,Object,Function,正则等…

Charles 流量配置(弱网测试)、断点调试

一、流量配置 流量配置主要是用来检测软件(APP)在不同的网络环境下的一个表现,例如出现丢包闪退等情况. 流量配置主要有以下四步: 在 Charles 窗口中点击菜单 “Proxy” ,选择 "Throttle Setting" 进行网络…

ChatGPT副业赚钱·Midjourney之logo设计《猪八戒网站接单制作Logo》- 第10篇

历史文章 文心一言 PK ChatGPT,二者究竟谁更胜一筹 - 第7篇 用Midjourney画个美女,AI绘画也太强大了!!! - 第8篇 推荐一款idea神级代码插件【Bito-ChatGPT】而且免费!- 第9篇 ​ 悟纤:师傅&a…

合理利用Optional 来避免NPE

一、什么是Optional 在Java中什么异常最容易出现,那肯定是NullPointerException,空指针就像一个定时炸弹,总给我们带来些麻烦,在开发过程中都会碰到需要判断Null值以防止空指针的情况,以往的方式要么是抛异常&#xf…

(3)---STM32通信

目录 【1】通信的基础知识 【2】USART 【3】串口通信协议 【4】相关寄存器 串口控制寄存器 波特率寄存器 中断和状态寄存器 数据发送寄存器 数据接收寄存器 【5】 USART功能框图 【6】串口发送实验 实验要求 1.观察实物 2.分析原理图 3.STM32CubeMX配置 4、寄存器方式编写…

选择性搜索算法(Selective Search )——SS算法

文章目录 一、前言二、object Detection VS object Recognition(Selective Search的提出)2.1object recognition与object detection的关系2.2滑动窗口方法的局限性2.3Selective search算法的提出 三、Selective Search算法3.1什么是Selective Search&…

ChatGPT工作提效之遇强则强

ChatGPT工作提效之遇强则强 前言一、如何使用ChatGPT二、ChatGPT实战应用三、ChatGPT会叫的小孩有奶吃工具类的交互问答类的交互开发类的交互 前言 读《笑傲江湖》西湖比剑时,对于独孤九剑1的解读印象颇为深刻。令狐冲被任我行这个高手激发出许多精妙的剑招。这独孤…