# 手術刀
* * * * *
如下圖,點擊“素材庫”添加素材,并調整素材大小、位置等屬性

新建第2頁面,在“素材庫”添加一個手術刀圖像元素,點擊“線條”工具在“舞臺”上繪制一個線條,并修改其線條類型為“點線”

繼續補充繪制線條、添加“殺人”“完美”“及格”文本框,再添加一個文本框,命名為“分數”,輸入內容為“0”,并調整大小、字體顏色等屬性

新建“圖層1”,將“圖層0”上的手術刀剪切粘貼進“圖層1”上,改變手術刀“Z軸旋轉角度”為“-90”,調整其大小位置

新建“圖層2”,在該圖層添加一個手指點擊的圖片素材,同時添加一個文本框,輸入文字內容為“按住屏幕,開始手術”,調整字體大小、顏色等屬性

為方便辨識,我們可修改“圖層0”名稱為“底部”,“圖層1”名稱為“手術刀”,“圖層2”名稱為“提示”

選中“手術刀”以及“底部”兩個圖層的第30幀位置,右鍵→“插入幀”

將“手術刀”圖層的第1關鍵幀拖動至第2幀,同時設置手術刀從下往上移動的動畫

新建“圖層3”,在該圖層第2幀“插入關鍵幀”,將虛線復制粘貼進關鍵幀內,修改線條顏色為紅色,線條類型為“實線”

在“圖層3”關鍵幀之后“插入曲線變形動畫”,使用“節點”工具將第2幀上的曲線縮短至底端,做一個線條由短向上變長的動畫,可點擊“預覽”觀察效果

分別在“手術刀”和“圖層3”的第19幀(手術刀對齊“及格”文字框的時間點)、27幀(手術刀對齊“完美”文字框的時間點)插入關鍵幀


為手術刀素材命名為“刀子”

提前觀察手術刀在最底端、“及格”“完美”“殺人”文字框位置時,其“上”值是多少(此處分別為“467.6”“184.9”“51.9”“2”)

如下圖,選中“分數”文本框,在其“屬性”面板下點擊文字內容右邊的“關聯”按鈕,在下拉的關聯屬性菜單欄下設置
關聯對象:“刀子”
關聯屬性:“上”
關聯方式:“自動關聯”
當主控量=“467.6”(手術刀在最底端位置)時被控量=“0”
當主控量=“184.9”(手術刀在“及格”位置)時被控量=“60”
當主控量=“51.9”(手術刀在“完美”位置)時被控量=“100”
當主控量=“2”(手術刀在“殺人”位置)時被控量=“0”


為手指點擊圖像添加一個出現即暫停行為:“動畫播放控制”→“暫停”→觸發條件:“出現”

新建圖層“控制層”,并將“圖層3”重命名為“紅線”

在“控制層”圖層添加一個矩形,調整大小使其符合“舞臺”大小,并調整其透明度為“0”

為矩形添加兩個編輯行為:
“動畫播放控制”→“播放”→觸發條件:“手指按下”
“動畫播放控制”→“下一頁”→觸發條件:“手指抬起”

可新建第3頁面,添加一張圖片素材作為跳轉后的頁面,之后點擊“預覽”觀察動畫效果

制作第3頁:如下圖,在第3頁添加一個文本框,輸入文字內容為“0”,調整文字大小、顏色、位置等。點擊文字內容右邊的“關聯”按鈕,設置關聯屬性
關聯對象:“分數”
關聯屬性:“文本取值”
關聯方式:“公式關聯”
被控量=“關聯屬性”
即設置了該文本的取值等于第2頁“分數”文本取值

將“舞臺”上的圖片元轉換為元件,雙擊該元件進入元件編輯頁面。在時間軸上第4幀“插入幀”

為圖片元件設置“編輯行為”:“動畫播放控制”→“暫停”→觸發條件:“出現”

同時在時間軸上的2、3、4幀“插入關鍵幀”

分別在第2、3、4幀上點擊“屬性”面板下的“編輯”按鈕,在彈出的“媒體庫”中選擇所需的圖片素材,點擊“添加”,替換原有的圖片

回到“舞臺”,將元件命名為“評判”

在第2頁面,為“控制層”上矩形添加四個“跳轉到幀并停止”行為:“動畫播放控制”→“跳轉到幀并停止”→“觸發條件”:“手指抬起”,修改描述為“100分”“80”“60”“死”


設置“100分”行為的“參數”
幀號:“3”
作用對象:“評判”
執行條件:“檢查元素狀態”
元素名稱:“分數”
考察屬性:“文本取值”
邏輯條件:“小于等于”
參考值:“100”,點擊“確認”

設置“80”行為的“參數”
幀號:“2”
作用對象:“評判”
執行條件:“檢查元素狀態”
元素名稱:“分數”
考察屬性:“文本取值”
邏輯條件:“小于等于”
參考值:“80”,點擊“確認”

設置“60”行為的“參數”
幀號:“1”
作用對象:“評判”
執行條件:“檢查元素狀態”
元素名稱:“分數”
考察屬性:“文本取值”
邏輯條件:“小于等于”
參考值:“60”,點擊“確認”

設置“死”行為的“參數”
幀號:“4”
作用對象:“評判”
執行條件:“檢查元素狀態”
元素名稱:“刀子”
考察屬性:“上”
邏輯條件:“小于等于”
參考值:“51”(手術刀在“完美”左右位置),點擊“確認”

* 注意:Mugeda的行為邏輯是從上往下的順序執行的,我們首先會執行“播放”的行為,然后是“跳轉下一頁”的行為,其次是100分的“跳轉到幀并停止”行為,同理依次執行其他行為。若中間有一個行為條件不滿足,則不會繼續執行下一行為。

制作“再來一次”按鈕:在第3頁面添加“再來一次”按鈕素材

添加“再來一次”按鈕編輯行為:
“動畫播放控制”→“跳轉到頁”→觸發條件:“點擊”,跳轉幀號為“1”
“屬性控制”→“改變元素屬性”→觸發條件:“點擊”,設置“參數”
元素名稱:“分數”
元素屬性:“文本取值”
賦值方式:“用設置的值替換現有值”
取值:“0”
點擊“確認”
即設置重來一次時將原先的分數值清零行為


設置第1頁“開始游戲”按鈕編輯行為
“跳轉下一頁”行為:“動畫播放控制”→“下一頁”→觸發條件:“點擊”
“禁止翻頁”行為:“動畫播放控制”→“禁止翻頁”→觸發條件:“出現”

可點擊“預覽”動畫效果

觀看本節視頻教程:
http://cdn1.mugeda.com/course/4/4.3/4.3.2.mp4
- 閱讀須知
- Mugeda平臺介紹
- 新手必看
- Mugeda是什么?
- 快速入門
- 快速制作炫酷動畫
- 無代碼添加交互
- 學會使用Mugeda模板
- 如何快速修改木疙瘩模板
- 作品創建前必讀
- 手機屏幕適配方法
- 圖片處理
- 聲音及視頻處理
- 屏幕適配設置
- 發布和預覽鏈接的區別
- H5作品相關設置
- 如何發布作品
- 功能詳解
- 界面與舞臺
- 簡介
- 縮放層數據
- 翻頁的相關設置
- 關鍵幀和頁面的命名
- 加載的相關設置
- 物體屬性設置
- 元件界面介紹
- 濾鏡效果
- 屏幕適配范圍與安全框
- 輔助線功能
- 首頁加載的靜態導出
- 素材與媒體
- 圖片上傳/素材庫
- 文本/文本段落
- 網頁
- 幻燈片
- 視頻
- 聲音
- 聲音的控制
- 繪制素材
- 云字體
- 曲線圖表
- 拖動動畫
- 虛擬現實
- 粘貼第三方文字和圖片
- 常用編輯操作
- 鎖定物體
- 節點工具
- 路徑工具
- 排列、對齊、變形、組合、合并功能
- 轉換為元件
- 導入PSD及注意事項
- 聲音和視頻的壓縮
- 聲音和視頻的交互控制
- 動畫
- 時間軸及圖層
- 選擇工具
- 關鍵幀動畫
- 路徑動畫
- 進度動畫
- 曲線變形動畫
- 預置動畫
- 元件動畫
- 分頁/加載頁
- 遮罩動畫
- 動畫運動
- 標尺和輔助線的使用
- 復制幀/圖層
- 如何實現動畫控制
- 文字變形動畫
- 運動曲線編輯
- 行為
- 行為添加以及觸發事件
- 幀的行為
- 頁的行為
- 播放元件片段
- 改變元素屬性
- 改變圖片
- 設置定時器
- 手機功能
- 跳轉鏈接
- 拖動的多種邏輯關系
- 舞臺截圖
- 改變行為屬性增加方框顏色
- 控件
- 陀螺儀
- 定時器
- 隨機數
- 擦玻璃
- 點贊
- 繪畫板
- 投票
- 抽獎
- 連線
- 拖動容器
- 投票、抽獎實時數據管理
- 計數器組件
- 排行榜
- 微信功能
- 微信頭像/微信昵稱
- 定制圖片
- 錄制聲音
- 分享信息
- 表單
- 自定義表單
- 系統默認表單
- 定制文字
- 定制賀卡文字
- 關聯綁定
- 舞臺動畫關聯
- 元件動畫關聯
- 屬性關聯
- 自動關聯
- 公式關聯
- 條件判斷
- 邏輯表達式判斷
- 多種表達式的寫法
- Mugeda API
- MugedaAPI整體結構
- 在動畫中插入腳本
- 使用自定義回調函數
- 通過API定義微信轉發
- 獲取Mugeda后臺數據
- 部署第三方服務器
- 案例講解
- 展示動畫
- 邀請函
- 招聘
- 個人簡歷
- 可定制賀卡
- 手機廣告
- 長按手指控制動畫播放
- 2016網易娛樂圈畫傳
- 一只挖空心思的行禮箱
- 科幻風格H5的制作
- 拖動長圖類H5制作
- 小爺吳亦凡案例
- UI原型
- 小圖標動畫
- 用Mugeda巧做GIF
- 小游戲
- 拍宇航員
- 手術刀
- 測試題
- 拖動選擇
- 概率抽獎
- 聲音測試題
- 真假朋友大質檢
- 圖片合成類H5的制作
- 60秒幫你擺脫朋友圈
- H5錄音機
- 制作接力型H5
- 微信/定制
- 和寶寶聊天
- 和奧運冠軍合影
- 熱門案例(試看)
- 什么才是福
- 教你玩轉密室逃脫類H5制作
- 星巴克咖啡
- 小爺吳亦凡
- 誰是足球明星
- 拷問拍拍618機密
- 用HTML5做交互課件
- CEO邀你群聊
- 里約大冒險
- 天貓宇宙邀請函
- 快閃
- H5換裝小游戲
- 視差類型H5制作
- H5版flappy bird
- 連連看小游戲
- 用遮罩做鏡頭特效
- 網易5筆畫愛
- 剪刀石頭布小游戲
- 交互動畫類H5制作
- 最新功能(1213)
- 如何使用排行榜
- 小功能更新
- 鎖定邊距
- 其他教程
- Mugeda簡約版介紹
- 如何自定義綁定微信公眾號
- 教師版賬號詳情介紹及使用方法