连续 30 天 玩玩看 ProtoPie - Day 24

先把原本的内容跟完。

现在不管转多少都还是 0% ,要怎麽让数值显示出来呢?

https://ithelp.ithome.com.tw/upload/images/20211009/20141941Cdzo3fT9eR.png

使用 Variable 来显示数值

我们先在左下角创造一个新的 Variable 并命名为 value 。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941026Rzjg9yP.png

Chain 上的两个 Rotate 後面接上一个 Assign 的 Response 。

https://ithelp.ithome.com.tw/upload/images/20211009/201419417tHQBR4RSi.png

右手边设定为 Value 并且让旋转钮的 0 到 360 映射到 Value 的 0 到100 。
(所以两边会等比例的增减)

https://ithelp.ithome.com.tw/upload/images/20211009/20141941A8lm5iyWfj.png

我们开 Preview 之前,可以先在 Value 上面点一下那只虫,就是 Debugger 。
(滑鼠移动到上方就会出现)
(然後刚刚才意识到可以把 Debugger 出现的地方移动到中间)

https://ithelp.ithome.com.tw/upload/images/20211009/201419410lPc3QOwkE.png

用 Preview 一看,转到任何地方就会显示那个地方在 0 到 100 里的位置。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941rp0SqklrHs.png

接着我们加上一个 Detect 的 Trigger 来侦测 Value 的值。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941Yzm7HDStFD.png

我们加上一个 Text 的 Response,会看到很多要设定的地方变黄色,先把最上面的 Layer 选 Value 。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941hB8DGEMbuT.png

接着把 Content 设定为 Formula。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941HyXFSiBJgS.png

Formula 我们使用 round(value)+”%” ,就是字面上的意义,把 Value 四舍五入成整数,加上一个 % 的符号。

https://ithelp.ithome.com.tw/upload/images/20211009/20141941sfCjuEDtyD.png

然後在找一些资料的过程中,无意间发现 Soda Design 的一些教学。

满喜欢他的风格,而且刚好他也有在讲旋转钮,他叫做 Donut Ring Controller ,很可爱。

https://www.youtube.com/watch?v=yMavG8NQGsk

有机会可以参考一下!


<<:  [DAY24] Boxenn Use Case 的 error handle

>>:  Day 24. VR菜单2

Vue.js介绍及开发环境准备(DAY24)

Vue.js是什麽? Vue.js是近年来蛮流行的前端框架,也是一个包装好的语言,使用上会比较便利。...

Day10-React Hook 篇-打造自己的 Hook:Custom Hook

经过前面几天的介绍,我们认识了许多常使用的 hooks,不过除了那些 hooks 之外,我们也可以将...

硬体安全模组 (HSM) 的身份验证最不相关-职责分离(SOD)

如今,“秘密”(secret)是认证的基础。我们通常使用密码(您知道的东西)、令牌中的加密密钥(您拥...

【Day 15】反向传播(Backpropagation)

比Gradient Descent更有效率的演算法 连锁律(Chain Rule) 反向传播(Ba...

JS 物件属性:属性的特徵 DAY68

Object.defineProperty 定义物件属性,调整属性特徵(请牢记!!) // 定义物件...