童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

音量滑块控件制作

7月11日 夜如影投稿
  音量滑块控件如何制作呢?来看作者多图为你解答。
  首先我们来看下效果:
  在这个音量条中除了常规的滑块操作,还需要根据当前的进度改变左侧音量图标。
  元件绘制
  我们先来看下都得需要画哪些元件:
  左侧的音量图标是一个有4个状态的动态面板,其他的看图片你们应该可以看懂!
  交互逻辑
  让我们明确下交互的逻辑,知道接下来我们要做些什么。交互是在拖动滑块时发生的变化,所以交互需要做在滑块上!除了拖动时,还需要载入时对元件进行初始化显示。
  滑块拖动
  我们先看拖动滑块时的交互,首先我们需要让这个滑块可以拖动,但是只有动态面板才可以拖动,所以我们需要先将滑块转化为动态面板,之后的交互都是做在这个滑块动态面板上的。
  元件移动当前元件移动〔水平拖动〕,只有滑块就可以只左右拖动了,但还需要限制它的左右拖动范围。左边界:〔〔max。x〕〕;右边界:〔〔max。xmax。width〕〕。
  可能有些同学对右边界的设置有些迷糊,这里图解一下
  左侧的x坐标为0,max。x就是左侧到当前x坐标的宽度,也就是红色区域。红色区域加上蓝色区域,就可以得到绿色区域,也就是右边界的x坐标了。
  当前音量进度
  元件设置尺寸now(矩形)将当前音量进度的宽度设置为〔〔This。xmax。x〕〕
  当前音量文本
  元件设置文本volume(矩形)设置当前音量文本的值为〔〔(now。width(max。widthThis。width)100)。toFixed(0)〕〕
  在拖动到最后侧时,实际上是没有拖到max完成宽度的,而是拖到了max宽度滑块宽度的位置。所以实际的音量上限宽度应该是max。widthThis。width。
  当前宽度上限宽度的出的是当前占上限宽度的小数百分比,乘以100之后就是我们需求的0100的数值范围了,可是后面还有很多很多的小数点。
  在这里我们需要学习一个函数:
  〔〔LVAR。toFixed(decimalPoints)〕〕
  用途:将一个数字转为保留指定位数的小数,小数位数超出指定位数时进行四舍五入。
  参数:decimalPoints为保留小数的位数。
  (此处引用小楼老师AxureRP8函数速查表文档内容)
  音量初始化
  音量icon的切换是根据当前音量上的文字进行判断的,注意图中的if与elseif,在ifelseif处右键可以切换。if是挨个进行判断的,elseif是如果没满足上面的条件,就会进入elseif,满足了就跳过elseif。
  最后,将设置当前音量进度和当前音量文本的交互直接粘贴到载入时就完成啦
  icon静音与恢复
  正在我打算保存写完的教程时,突然发现不太完美!还差一个点icon静音恢复的交互。
  点击icon时,如果当前的状态不是音量无,则需要先用全局变量记录下静音之前的面板,然后再静音。如果现在已经是静音了,那就要调用之前记下来的变量,将动态面板的状态恢复至之前的状态。
  嗯,这下是真的大!功!告!成!
投诉 评论 转载

产品原型需求管理系统本文作者将与大家分享产品原型需求管理系统的内容,enjoy为什么要做这个东西?几个原因:现有的worktile、leango等项目管理协作类工具,存放原型文档过于麻……Axure教程:如何让元件绕着某一个点进行旋转!对一个合格产品经理来说Axure技能是必备的,本篇文章主要帮助解决那些苦苦寻找绕一个任意固定点旋转axure教程的伙伴!一、实现的预期效果让矩形元件围绕着某一个点进……音量滑块控件制作音量滑块控件如何制作呢?来看作者多图为你解答。首先我们来看下效果:在这个音量条中除了常规的滑块操作,还需要根据当前的进度改变左侧音量图标。元件绘制我们先……育儿APP伴宝成长产品需求文档(PRD)辞职在家带娃期间,下载过多款手机育儿App,但是没有一款满足我的切身需求。闲来无事,设计了这款伴宝成长,分享出来和大家一起交流。这篇是产品需求文档,关于产品背景,产品介绍,竞品……这可能是关于动态面板最细致的讲解动态面板是Axure中使用频率最高的元件之一,动态面板专门用于设计原型中的动态功能,它可以包含一个或多个状态,每个状态就是一个页面,在这里可以任意编辑,通过控制状态的切换或显示……如何快速搭建系统原型(四):组件分享通过前三篇内容,我们了解了系统的结构框架和内容区域的设计思路,基本上已经可以搭建一个完整的网站原型了。那么接下来的这章就主要是介绍一些组件的设计,以便扩充我们的武器库,让我们搭……APP详情页如何用Axure画出来详情页是App原型中比较复杂的页面类型,熟悉它的常用套路有助于快速画出。之前的文章已经讲解了APP常见功能中的页面模板、下导航、上导航、列表页怎么画出来,请继续关注浪子教……交互设计师应具备的技能树(10)选择适合你的原型工具我花了两个多月的时间,每周末更新一个模块,终于讲完了交互设计师职业技能的前两个部分:思维和眼界。这两个部分的重要程度和工作量是成正比的,总共有九个模块,每个都有七八千字左右,这……Axure教程:实现类网易云音乐APP播放效果文章基于最新版的网易云音乐IOSAPP撰写本教程,本文将详细讲述音乐识别及音乐播放界面的交互效果。话不多说,按惯例先上实现的效果:点击体验最新效果原型效果在5。5英……原型设计从三个方面,系统地画原型在刚进行原型设计的时候,不具备系统的思考框架。往往缺少某步操作流程、页面,控件或者是没思考好用户的需求及页面设计的目的,或是整个页面在用户体验上十分粗糙。那如何从哪些方面……Axure教程:带放大效果的轮播图本文作者将结合一个实际案例,来教大家用Axure如何实现这种轮播图,enjoy提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果几张图片,可以逐……PLUB框架:产品文档结构MDVC框架(升级版)最近在和朋友做另外一个项目的时候,相互之间沟通需求的过程中,在需求文档结构上有了比较深入的探讨。在几轮的探讨过程中,发现自己写过的一篇相关文章MDVC框架:产品文档最优雅的结构……
未来10年,B端产品走向平台化给需求分级,让产品优化不再无从下手以个人公众号为例,解析产品设计业务需求分析模型淘宝双十一活动分析双11“全民合伙人”活动,居然有这么多设计细节?5个要点,细数B端G端监控体系设计界面设计:设计没亮点怎么办?(下)支付系统的基础层面和入门B端OMS系统设计:产品结构与流程互联网医疗:处方流转的平台模式和发展方向关于数据埋点采集,你需要了解这些透过“soul”功能变化,看产品功能的发展史

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界