什么是Fuse
Fuse是一款可以實(shí)時(shí)創(chuàng)建可交互ios/Android原生應(yīng)用的軟件,它用UX markup語言(一種非常類似于HTML的標(biāo)記語言)可以快速創(chuàng)建UI和UX交互，用javaScript編寫程序邏輯，除此之外還可以導(dǎo)出原生的Xcode項(xiàng)目，在模擬器或者真機(jī)上進(jìn)行操作。
接下來我向大家詳細(xì)介紹一下它的安裝過程，最后帶著大家一步一步創(chuàng)建一個(gè)UX動(dòng)畫的小示例，并熟悉一下UX markup這個(gè)新的語言(目前互聯(lián)網(wǎng)上關(guān)于它的介紹可以說幾乎沒有)
Fuse的安裝(Mac OSX)
由于下載比較慢(90mb的軟件居然下了1個(gè)多小時(shí))，所以我把安裝文件傳到了百度網(wǎng)盤上:
百度網(wǎng)盤地址
下載完畢后，打開文件夾,里面有兩個(gè)東西，一個(gè)是Fuse的安裝包，還有一個(gè)是配套使用的編輯器:
1.首先打開安裝包Fuse_0_5_3373.pkg
這一步很簡(jiǎn)單，只要一直繼續(xù)/下一步就可以完成了
打開終端，輸入
fuse如果出現(xiàn)以下內(nèi)容:
Trying to start the daemon as a background process.
A daemon background process was successfully started.
并彈出一個(gè)對(duì)話框:
恭喜你!安裝成功！
2.打開另一個(gè)文件，把編輯器拖到應(yīng)用程序文件夾
將Sublime Text打開一下，再關(guān)閉,如果一次都沒有打開,就無法安裝Fuse的插件，為我們提供代碼高亮和自動(dòng)補(bǔ)齊功能。
打開終端輸入以下命令來安裝Fuse插件:
fuse install sublime-plugin
顯示安裝成功后重啟編輯器,如果Project菜單項(xiàng)中有New Fuse project這一項(xiàng)說明插件安裝成功!
如何創(chuàng)建Fuse項(xiàng)目
打開終端，使用cd命令將當(dāng)前目錄轉(zhuǎn)到你想要?jiǎng)?chuàng)建Fuse工程的目錄,比如桌面:
cd /Users/<你的用戶名>/Desktop
輸入以下代碼，來創(chuàng)建一個(gè)名叫hello的工程:
fuse create app hello
如果顯示出:
Created project hello at '<你的Fuse工程目錄>'
說明工程創(chuàng)建成功
編輯和運(yùn)行項(xiàng)目
打開工程文件，會(huì)看到以下幾個(gè)文件
devices.json 放置一些模擬器的配置信息
hello.unoproj 工程文件
-
MainView.ux 默認(rèn)生成的UX markup源代碼，我們主要在這里進(jìn)行代碼編寫
用Sublime編輯器打開MainView.ux
屏幕快照 2015-08-24 上午9.54.06.png
這是自動(dòng)生成的模板文件，可以直接運(yùn)行,在終端中輸入命令來運(yùn)行它:
fuse preview
如果沒有錯(cuò)誤，應(yīng)該會(huì)出現(xiàn)以下運(yùn)行結(jié)果:
如果這時(shí)你改變MainView.ux的代碼，然后保存，你會(huì)發(fā)現(xiàn)你的改變會(huì)實(shí)時(shí)反映出來,不需要重新運(yùn)行。比如你改變switch標(biāo)簽中的Alignment的值為Center，運(yùn)行結(jié)果會(huì)立刻改變，如下所示:
當(dāng)然你也可以導(dǎo)出Xcode工程，并在模擬器上運(yùn)行:
點(diǎn)擊Build
點(diǎn)擊Build，然后等待一段時(shí)間編譯好的Xcode項(xiàng)目會(huì)自動(dòng)打開
Cmd+R運(yùn)行它，如果沒有問題就會(huì)打開模擬器,運(yùn)行我們的工程
下面我們來看看文件的結(jié)構(gòu),并熟悉一些標(biāo)簽，這代碼看起來非常熟悉，因?yàn)檫@個(gè)和HTML如出一轍:
- 首先
<App Theme="Basic" ClearColor="#eeeeeeff"></App>標(biāo)簽,是我們應(yīng)用程序的接入點(diǎn)，是應(yīng)用程序的根類
Theme屬性定義整個(gè)app的外觀等信息,可以自定義,但是目前還不太會(huì)用。。以后我會(huì)研究一下。
ClearColor用來定義app的背景色 -
<DockPanel></DockPanel>標(biāo)簽可以對(duì)它之內(nèi)的各個(gè)組件進(jìn)行排列，將他們鎖定到特定方位(Top,Left,Right,Bottom) -
<StatusBarBackground DockPanel.Dock="Top" />設(shè)定手機(jī)狀態(tài)欄的位置，留出相應(yīng)地空間。 -
<ScrollViewer ClipToBounds="true"></ScrollViewer>相當(dāng)于iOS中的ScrollView的作用，把它內(nèi)部的元素全部放入一個(gè)scrollView中。 -
<StackPanel></StackPanel>對(duì)其內(nèi)部的元素按一個(gè)方向進(jìn)行排列(水平和豎直排列,在默認(rèn)情況下是豎直排列,如果要水平排列的話，將它的Orientation屬性的值改為"Horizontal",<StackPanel Orientation="Horizontal">)
所有標(biāo)簽的使用說明可以在它的Class Reference中找到:
[UX Class Reference] (https://www.fusetools.com/developers/ux)
創(chuàng)建一個(gè)UX動(dòng)畫的示例
創(chuàng)建一個(gè)Fuse工程，名為UXAnimation:
我們要有4個(gè)不同的UX動(dòng)畫效果，所以首先我們要?jiǎng)?chuàng)建含有4頁的PageControl元素,首先新建4個(gè)新的UX文件,分別代表4個(gè)頁：
StaggeredAnimation.ux
AnchoredAnimation.ux
ClickEvents.ux
ScrollingBasics.ux
然后我們初始化每一頁:
StaggeredAnimation.ux:
<Panel Background="#FF5C3A">
</Panel>
AnchoredAnimation.ux:
<Panel Background="#FFC05A">
</Panel>
ClickEvents.ux:
<Panel Background="#FF8EB4">
</Panel>
ScrollingBasics.ux:
<Panel Background="#5AB2FF">
</Panel>
打開MainView.ux:
刪除除了App和標(biāo)簽以外的內(nèi)容:
<App Theme="Basic" ClearColor="#eeeeeeff">
<StatusBarBackground DockPanel.Dock="Top" />
</App>
創(chuàng)建Panel標(biāo)簽作為我們的畫布:
<App Theme="Basic" ClearColor="#eeeeeeff">
<StatusBarBackground DockPanel.Dock="Top" />
<Panel>
</Panel>
</App>
在Panel中創(chuàng)建PageControl,并設(shè)置它的頁面屬性ClipToBounds="True",通過Style標(biāo)簽來設(shè)置:
<App Theme="Basic" ClearColor="#eeeeeeff">
<StatusBarBackground DockPanel.Dock="Top" />
<Panel>
<PageControl ux:Name="myPages" HitTestMode="LocalBoundsAndChildren">
<Style>
<Page ClipToBounds="True" />
</Style>
</PageContol>
</Panel>
</App>
創(chuàng)建4個(gè)空白頁:
<App Theme="Basic" ClearColor="#eeeeeeff">
<StatusBarBackground DockPanel.Dock="Top" />
<Panel>
<PageControl ux:Name="myPages" HitTestMode="LocalBoundsAndChildren">
<Style>
<Page ClipToBounds="True" />
</Style>
<Page></Page>
<Page></Page>
<Page></Page>
<Page></Page>
</PageContol>
</Panel>
</App>
設(shè)置第一頁:
<Page>
<StackPanel Alignment="Top">
<StatusBarBackground />
<Text TextAlignment="Center" TextColor="#fff">staggered animation</Text>
</StackPanel>
<StaggeredAnimation/>
</Page>
設(shè)置第二頁:
<Page>
<StackPanel Alignment="Top">
<StatusBarBackground />
<Text TextAlignment="Center" TextColor="#fff">anchored animation</Text>
</StackPanel>
<AnchoredAnimation/>
</Page>
設(shè)置第三頁:
<Page>
<StackPanel Alignment="Top">
<StatusBarBackground />
<Text TextAlignment="Center" TextColor="#fff">event based animation</Text>
<Text TextAlignment="Center" TextColor="#fff" Margin="0,12,0,0">tap and press</Text>
</StackPanel>
<ClickEvents/>
</Page>
設(shè)置第四頁:
<Page>
<StackPanel Alignment="Top">
<StatusBarBackground />
<Text TextAlignment="Center" TextColor="#fff">basic scrolling</Text>
</StackPanel>
<ScrollingBasics/>
</Page>
最后文件應(yīng)該會(huì)是這樣:
保存，運(yùn)行一下,你的app應(yīng)該像這樣:
給第一頁(在StaggeredAnimation.ux中的Panel標(biāo)簽內(nèi))添加一些代碼:
<StackPanel Alignment="Center" Orientation="Horizontal">
<Style>
<Rectangle Width="100" Height="100" CornerRadius="5" Margin="10" Fill="White" />
</Style>
<Rectangle ux:Name="rec1"/>
<Rectangle ux:Name="rec2" />
<WhilePressed>
<Rotate Target="rec1" Degrees="90" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
<Rotate Target="rec2" Degrees="90" Delay="0.5" Duration="0.5" EasingBack="QuadraticIn" Easing="QuadraticOut" />
</WhilePressed>
</StackPanel>
在style標(biāo)簽內(nèi)設(shè)置Rectangle的大小、圓角半徑、間距、填充顏色:<Rectangle Width="100" Height="100" CornerRadius="5" Margin="10" Fill="White" />
畫出兩個(gè)矩形，rec1和rec2:
<Rectangle ux:Name="rec1"/>
<Rectangle ux:Name="rec2" />
添加長按點(diǎn)擊事件響應(yīng):
<WhilePressed>
<Rotate Target="rec1" Degrees="90" Duration="0.5" Easing="QuadraticOut" EasingBack="QuadraticIn" />
<Rotate Target="rec2" Degrees="90" Delay="0.5" Duration="0.5" EasingBack="QuadraticIn" Easing="QuadraticOut" />
</WhilePressed>
當(dāng)點(diǎn)擊任何一個(gè)矩形時(shí).兩個(gè)矩形都會(huì)順時(shí)針旋轉(zhuǎn)90度,由于設(shè)置了Delay屬性，所以rec1先旋轉(zhuǎn)，在0.5的延時(shí)后，rec2再旋轉(zhuǎn),Easing設(shè)置的是進(jìn)入動(dòng)畫的時(shí)間曲線,EasingBack設(shè)置的是歸位動(dòng)畫的時(shí)間曲線:
在AnchoredAnimation.ux中(同樣是在Panel標(biāo)簽內(nèi))添加代碼:
<Rectangle Alignment="Center" Width="100" Height="100"
CornerRadius="5" TransformOrigin="TopLeft" Fill="#fff">
<WhilePressed>
<Rotate Degrees="90" Duration="1" Easing="BounceOut" EasingBack="BounceIn" EasingBack="BounceIn"/>
</WhilePressed>
</Rectangle>
同樣是長按后矩形順時(shí)針旋轉(zhuǎn)90度，但是不一樣的是，矩形的旋轉(zhuǎn)中心被設(shè)置到了左上角,這樣會(huì)產(chǎn)生與上一個(gè)動(dòng)畫不一樣的效果。Easing設(shè)置為了BounceOut會(huì)使得動(dòng)畫有一個(gè)彈回的感覺，效果看起來很不錯(cuò):
在ClickedEvent.ux中(同樣是在Panel標(biāo)簽內(nèi))添加代碼:
<StackPanel Orientation="Horizontal" Alignment="Center">
<Style>
<Rectangle Width="100" Height="100" Margin="10" Fill="White" />
</Style>
<Rectangle CornerRadius="5">
<Tapped>
<Scale Factor="0.8" Duration="0.3" Easing="QuadraticInOut"/>
<Move Y="0.3" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
</Tapped>
</Rectangle>
<Rectangle ux:Name="fillRectB" CornerRadius="50">
<WhilePressed>
<Rotate Degrees="180" Duration="0.5" Easing="QuadraticInOut"/>
<Change fillRectB.CornerRadius="5" Duration="0.5" Easing="QuadraticInOut"/>
</WhilePressed>
</Rectangle>
</StackPanel>
注意這里有一個(gè)新的事件Tapped，它和WhilePressed的區(qū)別是，它是單擊后觸發(fā)。
<Scale Factor="0.8" Duration="0.3" Easing="QuadraticInOut"/>
設(shè)置的是在觸發(fā)事件后把大小降低到原來的0.8倍
<Move Y="0.3" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
事件觸發(fā)后將Y坐標(biāo)增加目標(biāo)高度的0.3倍,對(duì)于這個(gè)矩形來說，就是向下移動(dòng)30個(gè)點(diǎn)(如果將它設(shè)置為負(fù)值那就是向下移動(dòng))。RelativeTo屬性設(shè)置增加值是用相對(duì)于目標(biāo)的高度的倍數(shù)或者是具體的點(diǎn)個(gè)數(shù),分別對(duì)應(yīng)"Size"和"Point"。
<Rectangle ux:Name="fillRectB" CornerRadius="50">第二個(gè)矩形設(shè)置圓角半徑為50，也就是其邊長的一半，也就是一個(gè)圓形
<Change fillRectB.CornerRadius="5" Duration="0.5" Easing="QuadraticInOut"/>該動(dòng)畫的結(jié)果是將其圓角半徑變?yōu)?，也就是變回圓角矩形，下面是運(yùn)行結(jié)果:
下面來添加最后一個(gè)動(dòng)畫:
在ScrollingBasics.ux文件中，同樣是Panel標(biāo)簽內(nèi),添加如下代碼:
<Panel Width="300" Height="400">
<Rectangle Width="300" Height="400" HitTestMode="None" Margin="0" CornerRadius="5">
<Stroke Width="5" Alignment="Outside" Brush="#FAB2FD" />
</Rectangle>
<ScrollViewer ClipToBounds="true">
<StackPanel ux:Name="stackPanel">
<Style>
<Rectangle Height="75" CornerRadius="5" Margin="0, 5, 0, 5" Width="100%" ux:InheritStyle="false" Fill="White" />
</Style>
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle />
</StackPanel>
</ScrollViewer>
</Panel>
該動(dòng)畫用ScrollViewer實(shí)現(xiàn)了一個(gè)類似于iOS中tableView的滾動(dòng)、彈跳效果
<Panel Width="300" Height="300">
限定ScrollViewer的滾動(dòng)區(qū)域
<ScrollViewer ClipToBounds="true">定義一個(gè)ScrollViewer用于承載它內(nèi)部所定義的多個(gè)矩形。由于這幾個(gè)矩形是按豎直方向排列，很顯然要高于ScrollViewer的高度，所以超過的部分會(huì)截?cái)?，由于是圓角矩形所以上邊或下邊被截?cái)嘀?，圓角就會(huì)消失:
看起來不太好,所以我們要在限制區(qū)域上加一個(gè)圓角矩形的框:
<Rectangle Width="300" Height="400" HitTestMode="None" Margin="0" CornerRadius="5">
<Stroke Width="5" Alignment="Outside" Brush="#FAB2FD" />
</Rectangle>
就像這樣，當(dāng)然顏色只是為了看得明顯，我們要讓它的顏色和背景融為一體,所以將Brush值改為#5AB2FF,這樣就完成了代碼的編寫，來看看效果:
完整運(yùn)行一下app:
完整工程文件下載:
百度網(wǎng)盤下載
到此為止，我們完成了對(duì)這個(gè)新軟件的小小的探索，其實(shí)我們還沒有將Javascript結(jié)合到工程中，但是僅僅用UX markup我們就已經(jīng)實(shí)現(xiàn)了很多事情，而且它并不是很難: ]當(dāng)然我才學(xué)習(xí)了一天而已(準(zhǔn)確的說Fuse在8月21日才發(fā)布beta版)，這只是我的一點(diǎn)學(xué)習(xí)分享~
如果本篇文章對(duì)你有幫助，請(qǐng)點(diǎn)一下左下角的喜歡，大家的支持是我繼續(xù)寫作的動(dòng)力！
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
- 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
- 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
- 最近遇到了密鑰保存的問題：由于本人有熱愛折騰操作系統(tǒng)的習(xí)慣，所以我的筆記本一般不超過兩個(gè)月就要重裝系統(tǒng)。重裝系統(tǒng)前...
- 兒子一天的節(jié)目實(shí)在太多了 老公在外地出差時(shí):媽媽你給我生個(gè)小妹妹陪我玩吧！我:等爸爸回來商量一下 媽媽別等了 快生...
