设置元件【Nextbutton】初始状态为:“禁用”。
注意:【Nextbutton】元件的“可用”状态是鲜艳的颜色,需要事先设定好,而且需要在属性中设定“不可用”状态的颜色为灰色。
然后继续回元件【Slider】的“Case 2”中,设置动作“启用”【Nextbutton】。
04
添加动态面板【Slider】“拖动结束时”事件case1。
为case1添加条件判断,判断“元件范围”【Slider】“未接触” “元件范围”【Touchpoint】。(具体图示可参看上文步骤2)
当满足条件时的动作设置为”移动“动态面板【Slider】”到达“ x=171,y=227 (此处坐标视你操作时【Slider】面板的具体位置而定)。
添加动态面板【Slider】“移动时”事件case1。
设置case1动作为“移动”元件【Greenbox】“跟随”当前动态面板移动。
这样,整个拖动滑块解锁的原型就基本完成了,细节的地方如果需要美化的可自行研究,整个过程的难点主要在于对动态面板移动以及条件判断的运用,对于条件判断不熟悉的同学可以多找些案例尝试练习。
另外需要提醒的是,如果尝试模仿别的功能来练习,在开始前一定要弄清楚操作描述并写下来,这对流程的理解和条件判断的设定,以及元件层级的摆放合理性都起到重要的作用,我也会继续分享更多案例给大家一起实操。
作者:杰森,公众号:十八般产品
本文由 @杰森 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议