Fuse

什么是Fuse

Fuse是一款可以實時創(chuàng)建可交互ios/Android原生應用的軟件,它用UX markup語言(一種非常類似于HTML的標記語言)可以快速創(chuàng)建UI和UX交互辰企，用javaScript編寫程序邏輯氏仗，除此之外還可以導出原生的Xcode項目纱兑，在模擬器或者真機上進行操作。
接下來我向大家詳細介紹一下它的安裝過程揭绑，最后帶著大家一步一步創(chuàng)建一個UX動畫的小示例坦报，并熟悉一下UX markup這個新的語言(目前互聯(lián)網(wǎng)上關于它的介紹可以說幾乎沒有)

Fuse的安裝(Mac OSX)

由于下載比較慢(90mb的軟件居然下了1個多小時)上煤，所以我把安裝文件傳到了百度網(wǎng)盤上:
百度網(wǎng)盤地址
下載完畢后休玩，打開文件夾,里面有兩個東西，一個是Fuse的安裝包楼入，還有一個是配套使用的編輯器:

安裝包

1.首先打開安裝包Fuse_0_5_3373.pkg

安裝界面

Trying to start the daemon as a background process.
A daemon background process was successfully started.

并彈出一個對話框:

啟動Fuse

恭喜你!安裝成功嘉熊！

2.打開另一個文件遥赚，把編輯器拖到應用程序文件夾

將Sublime Text打開一下羔飞，再關閉,如果一次都沒有打開,就無法安裝Fuse的插件琴许，為我們提供代碼高亮和自動補齊功能。
打開終端輸入以下命令來安裝Fuse插件:

fuse install sublime-plugin

顯示安裝成功后重啟編輯器,如果Project菜單項中有New Fuse project這一項說明插件安裝成功!

如何創(chuàng)建Fuse項目

打開終端借跪，使用cd命令將當前目錄轉(zhuǎn)到你想要創(chuàng)建Fuse工程的目錄,比如桌面:

cd /Users/<你的用戶名>/Desktop

輸入以下代碼，來創(chuàng)建一個名叫hello的工程:

fuse create app hello

如果顯示出:

Created project hello  at  '<你的Fuse工程目錄>'

說明工程創(chuàng)建成功

編輯和運行項目

打開工程文件愧薛，會看到以下幾個文件

屏幕快照 2015-08-24 上午9.48.01.png

• devices.json 放置一些模擬器的配置信息

• hello.unoproj 工程文件

• MainView.ux 默認生成的UX markup源代碼晨炕，我們主要在這里進行代碼編寫
  用Sublime編輯器打開MainView.ux

  
  
  屏幕快照 2015-08-24 上午9.54.06.png
  
  

  這是自動生成的模板文件，可以直接運行,在終端中輸入命令來運行它:

    fuse preview
  

如果沒有錯誤毫炉，應該會出現(xiàn)以下運行結(jié)果:

屏幕快照 2015-08-24 上午10.05.45.png

屏幕快照 2015-08-24 上午10.56.08.png

當然你也可以導出Xcode工程进陡，并在模擬器上運行:

屏幕快照 2015-08-24 上午10.09.png

點擊Build

屏幕快照 2015-08-24 上午10.09.59.png

點擊Build愿阐，然后等待一段時間編譯好的Xcode項目會自動打開

屏幕快照 2015-08-24 上午10.10.png

Cmd+R運行它，如果沒有問題就會打開模擬器,運行我們的工程

屏幕快照 2015-08-24 上午10.11.png

下面我們來看看文件的結(jié)構,并熟悉一些標簽趾疚，這代碼看起來非常熟悉缨历，因為這個和HTML如出一轍:

屏幕快照 2015-08-24 上午9.54.06.png

• 首先<App Theme="Basic" ClearColor="#eeeeeeff"></App>標簽,是我們應用程序的接入點，是應用程序的根類
  Theme屬性定義整個app的外觀等信息,可以自定義,但是目前還不太會用糙麦。辛孵。以后我會研究一下。
  ClearColor用來定義app的背景色
• <DockPanel></DockPanel>標簽可以對它之內(nèi)的各個組件進行排列喳资，將他們鎖定到特定方位(Top,Left,Right,Bottom)
• <StatusBarBackground DockPanel.Dock="Top" />設定手機狀態(tài)欄的位置觉吭，留出相應地空間腾供。
• <ScrollViewer ClipToBounds="true"></ScrollViewer>相當于iOS中的ScrollView的作用仆邓，把它內(nèi)部的元素全部放入一個scrollView中。
• <StackPanel></StackPanel>對其內(nèi)部的元素按一個方向進行排列(水平和豎直排列,在默認情況下是豎直排列,如果要水平排列的話伴鳖，將它的Orientation屬性的值改為"Horizontal",<StackPanel Orientation="Horizontal">)
  所有標簽的使用說明可以在它的Class Reference中找到:
  [UX Class Reference] (https://www.fusetools.com/developers/ux)

創(chuàng)建一個UX動畫的示例

創(chuàng)建一個Fuse工程节值，名為UXAnimation:

新建工程

我們要有4個不同的UX動畫效果，所以首先我們要創(chuàng)建含有4頁的PageControl元素,首先新建4個新的UX文件,分別代表4個頁：
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和標簽以外的內(nèi)容:

<App Theme="Basic" ClearColor="#eeeeeeff">
    <StatusBarBackground DockPanel.Dock="Top" />
</App>

創(chuàng)建Panel標簽作為我們的畫布:

<App Theme="Basic" ClearColor="#eeeeeeff">
    <StatusBarBackground DockPanel.Dock="Top" />
        <Panel>
    
        </Panel>
</App>

在Panel中創(chuàng)建PageControl,并設置它的頁面屬性ClipToBounds="True",通過Style標簽來設置:

<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個空白頁:

<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>

設置第一頁:

           <Page>
               <StackPanel Alignment="Top">

           <StatusBarBackground />
           <Text TextAlignment="Center" TextColor="#fff">staggered animation</Text>
                    
                </StackPanel>
                <StaggeredAnimation/>
           </Page>

設置第二頁:

           <Page>
               <StackPanel Alignment="Top">

           <StatusBarBackground />
           <Text TextAlignment="Center" TextColor="#fff">anchored animation</Text>
                    
                </StackPanel>
                <AnchoredAnimation/>        
           </Page>

設置第三頁:

           <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>

設置第四頁:

           <Page>
               <StackPanel Alignment="Top">

           <StatusBarBackground />
                <Text TextAlignment="Center" TextColor="#fff">basic scrolling</Text>
                    
                </StackPanel>  
                <ScrollingBasics/>           
           </Page>

最后文件應該會是這樣:

MainView.ux

保存榜聂，運行一下,你的app應該像這樣:

app

    <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標簽內(nèi)設置Rectangle的大小搞疗、圓角半徑、間距须肆、填充顏色:<Rectangle Width="100" Height="100" CornerRadius="5" Margin="10" Fill="White" />
畫出兩個矩形匿乃，rec1和rec2:

    <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>

當點擊任何一個矩形時.兩個矩形都會順時針旋轉(zhuǎn)90度,由于設置了Delay屬性，所以rec1先旋轉(zhuǎn)豌汇，在0.5的延時后幢炸，rec2再旋轉(zhuǎn),Easing設置的是進入動畫的時間曲線,EasingBack設置的是歸位動畫的時間曲線:

UX動畫1

在AnchoredAnimation.ux中(同樣是在Panel標簽內(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>

同樣是長按后矩形順時針旋轉(zhuǎn)90度，但是不一樣的是拒贱，矩形的旋轉(zhuǎn)中心被設置到了左上角,這樣會產(chǎn)生與上一個動畫不一樣的效果宛徊。Easing設置為了BounceOut會使得動畫有一個彈回的感覺佛嬉，效果看起來很不錯:

UX動畫2

在ClickedEvent.ux中(同樣是在Panel標簽內(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>

注意這里有一個新的事件Tapped，它和WhilePressed的區(qū)別是闸天，它是單擊后觸發(fā)暖呕。
<Scale Factor="0.8" Duration="0.3" Easing="QuadraticInOut"/>
設置的是在觸發(fā)事件后把大小降低到原來的0.8倍
<Move Y="0.3" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
事件觸發(fā)后將Y坐標增加目標高度的0.3倍,對于這個矩形來說，就是向下移動30個點(如果將它設置為負值那就是向下移動)苞氮。RelativeTo屬性設置增加值是用相對于目標的高度的倍數(shù)或者是具體的點個數(shù),分別對應"Size"和"Point"湾揽。
<Rectangle ux:Name="fillRectB" CornerRadius="50">第二個矩形設置圓角半徑為50，也就是其邊長的一半笼吟，也就是一個圓形
<Change fillRectB.CornerRadius="5" Duration="0.5" Easing="QuadraticInOut"/>該動畫的結(jié)果是將其圓角半徑變?yōu)?钝腺，也就是變回圓角矩形，下面是運行結(jié)果:

UX動畫3

下面來添加最后一個動畫:
在ScrollingBasics.ux文件中赞厕，同樣是Panel標簽內(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>

該動畫用ScrollViewer實現(xiàn)了一個類似于iOS中tableView的滾動艳狐、彈跳效果
<Panel Width="300" Height="300">
限定ScrollViewer的滾動區(qū)域
<ScrollViewer ClipToBounds="true">定義一個ScrollViewer用于承載它內(nèi)部所定義的多個矩形。由于這幾個矩形是按豎直方向排列皿桑，很顯然要高于ScrollViewer的高度毫目，所以超過的部分會截斷，由于是圓角矩形所以上邊或下邊被截斷之后诲侮，圓角就會消失:

矩形被截斷

    <Rectangle Width="300" Height="400" HitTestMode="None" Margin="0" CornerRadius="5">
        <Stroke Width="5" Alignment="Outside" Brush="#FAB2FD" />
    </Rectangle>

圓角矩形框

就像這樣镀虐，當然顏色只是為了看得明顯，我們要讓它的顏色和背景融為一體,所以將Brush值改為#5AB2FF,這樣就完成了代碼的編寫沟绪，來看看效果:

UX動畫4

完整運行一下app:

完整app

如果本篇文章對你有幫助坝疼，請點一下左下角的喜歡搜贤，大家的支持是我繼續(xù)寫作的動力！