您當前的位置 : 橡樹攝影網 > 薇拉攝影 > 正文 

Origami Studio 小案例記錄02 卡牌拖拽

2020-01-18 12:23 橡樹攝影網 婚紗攝影工作室

[field:description function="cn_substr(@me,250)"/]

 

案列群里面的小伙伴不點名怕點錯了+_+純屬于娛樂而已小伙伴的靈感與爐石傳說小游戲里面的卡牌動畫交互形式:新人一枚,有說錯的地方請在評論去回復。演示效果制作思路:通過(拖拽模塊)實現拖拽效果,通過判斷拖拽的方向來驅動卡片的旋轉。最后松開卡片回到原點。制作準備:打開軟件可以看見圖層面板有一個背景圖層。我們添加一個矩形和一個圓角矩形。在這里為了多涉及一些知識點我把軟件提供的遮罩功能也涉及進來的(其實這個案列有沒有這個功能并不影響最終的效果)軟件知識點:我們會用到的模塊有:和個模塊,一個拖拽模塊一個交互模塊。,脈沖分離模塊。和模塊,用來分離坐標。模塊,用來判斷拖拽的方向輸出一個正或者負的數值。模塊用來實現數值變化而產生的彈性動畫效果。最后就是乘法模塊()和分流器模塊。以上就是這次會涉及到的全部模塊。創建模塊的方式在模塊窗口點擊回車鍵搜索自己想要的模塊。這里我還會涉及到一個知識點就是軟件提供的功能(感覺和的剪切圖層,還有的圖層蒙版是一樣的)活用此功能可以實現一些遮罩動畫效果,以后會有案列。制作過程:我們把矩形放在最上面,圓角矩形放在中間,最下面的就是我們的背景圖層。選擇圓角矩形執行菜單后面有快捷鍵自己可以看看,實現后的的圖層結構這里圖層結構整理好了我們開始制作交互效果在模塊編輯窗口我們創建一個的交互模塊,在交互模塊的屬性中選擇矩形圖層我們回到圖層面板選擇矩形,然后在圖層的屬性面板雙擊,這時候在模塊編輯窗口出現個模塊一個和一個矩形的模塊這時候我們需要在模塊編輯窗口創建一個模塊來分離交互模塊輸出的我們需要把模塊的輸出端口和的輸入端口連接起來。選擇我們只需要把和相互對應的連接起來就可以了(這里需要注意一點就是模塊好像不能輸出軸的坐標《所以我們不需要連接軸》)這時候我們拖拽矩形試試矩形被拖動但是好像被剪切掉了一部分(這是因為遮罩圖層起作用了這里友情提醒:軟件中是組也是有大小的)這個案列中解決的方案就是:我們只需要讓圓角矩形遮罩層和矩形圖層一起運動就可以了。這我們還可以在和中間加入一個模塊來讓動畫具有彈性。在這里插一句我們這個案列中有個點比較特需(我們用圓角矩形的圓角來控制矩形讓矩形看起來具有圓角的效果但是我們也可以直接使用圓角矩形那么我們就可以不使用軟件提供的遮罩功能。)好了在這里我們已經實現了我們需要的拖拽交互我們發現卡片拖拽之后我們松開鼠標卡片好像沒有回到原來的位置。現在我們就來解決這個問題看圖制作思路就是我們松開鼠標卡片需要回到原來的位置,這里我們可以通過交互模塊提供的端口來實現這一功能。這里我們看見后面有一個小格子,這說明一個問題(那就是這個端口接收脈沖他的價值才能最大化的被體現出來)這里需要謝謝群里的小伙伴在我最開始接觸這個軟件的時候給予我能的幫助和耐心的解釋說明。好了我們來說說怎么制作:我們選擇矩形圖層添加一個交互,這時候在模塊窗口出現一個的模塊(這里我想說一下就是直接在模塊編輯窗口回車查找模塊然后在中選擇你想要的圖層也是可以的)現在我們需要一個模塊來分離我們點擊矩形和松開矩形的時候發送一個脈沖給交互模塊的端口。這里我介紹一個模塊的意思。我們可以理解為當輸入一個我們輸出一個的脈沖當我們輸入的時候我們輸出一個的脈沖這個留個問題那我們輸出大于的數值他輸出什么呢(偷笑)。好吧這里我們已經實現了拖拽和松開的時候卡片的交互。最后一點我們這么實現拖拽的時候卡片的晃動呢?這里我們需要了解一個模塊模塊(好像是速度模塊)個人理解的當一個數字發生變化的時候這個模塊會輸出一個正或者負值,我們只需要利用這個特性來判斷卡片被拖動的方向,然后做相應的旋轉就可以實現拖拽卡片感覺是在晃動的感覺。看圖這里我只需要做一下說明就好了;這里我們只用了一個乘法來改變我們的旋轉的幅度。其實到了這里你只需要安裝上圖的連線這個案列就已經結束了但是我想特別提一下分離器模塊這個模塊看著好像沒有什么用但是個人覺得他可以整理你的線路圖當然這里還有無線接收器和發生器可以用)這里完全可以按照自己的習慣來。最后說一句要是有錯誤或者沒有說明白的地方請在評論區留言總結一句:案列實現方法用交互模塊輸出給到矩形和圓角矩形的上然后用的的端口輸出點擊松開的數值用分解成我們需要的松開脈沖給到的端口實現卡片自動回到原來的位置。最后我們通過模塊來判斷的拖拽方向,實現卡片的旋轉。第一次寫有不好的地方就這樣湊合看吧:有興趣的同學請加群;不多說了群里有大神快上車別怪我沒有提醒你們:再次感謝群里的小伙伴給予的幫助;阿門!

甘肃快三出号统计