1. 程式人生 > >53.原型2 仿真進度條效果

53.原型2 仿真進度條效果

但是 自增 分享圖片 隨機 矩形 動作 之間 毫秒 10個

技術分享圖片添加一個面板 寬為300 高為5 同時添加背景色

技術分享圖片首先給面板設置載入時的動作 作為第一次改變面板狀態

技術分享圖片然後給面板設置改變大小時的動作 首先等待200毫秒 然後自增10個像素 用this.width

生成達成效果 但是一直在變大,因此我們添加一個條件

技術分享圖片小於300的情況才自增長

生成達成效果

技術分享圖片再進度條下方添加一個同樣寬度的藍色背景 用矩形 取名為biankuang

技術分享圖片然後更改條件 將寬度的限制用變量改為背景的寬度

那麽當背景矩形的寬度也改變怎麽辦,同理用載入時的動作 通過變量設置進度條的高度

技術分享圖片這是高度設置方法

那麽背景矩形移動的話怎麽辦?

技術分享圖片同樣設置載入時 利用變量移動進度條到背景矩形的位置

技術分享圖片同樣設置高度與背景矩形統一

生成之後發現這是勻速的 但是大部分時候都不是勻速的 怎麽實現?之前我們每次增長都是增加10個像素 那麽我們讓它隨機增長即可

技術分享圖片利用函數 讓之前的10乘以一個0~9之間的隨機數

下面做一個百分比:

技術分享圖片新建一個標簽取名為bfb

技術分享圖片然後給這個百分比的框增加一個用例 這是公式 設置文字 用變量

53.原型2 仿真進度條效果