原型\UX 设计软件Fuse的安装及其初探

作者: codeGlider | 来源:发表于2015-08-24 23:27 被阅读3495次

Fuse

什么是Fuse

Fuse是一款可以实时创建可交互ios/Android原生应用的软件,它用UX markup语言(一种非常类似于HTML的标记语言)可以快速创建UI和UX交互，用javaScript编写程序逻辑，除此之外还可以导出原生的Xcode项目，在模拟器或者真机上进行操作。
接下来我向大家详细介绍一下它的安装过程，最后带着大家一步一步创建一个UX动画的小示例，并熟悉一下UX markup这个新的语言(目前互联网上关于它的介绍可以说几乎没有)

Fuse的安装(Mac OSX)

由于下载比较慢(90mb的软件居然下了1个多小时)，所以我把安装文件传到了百度网盘上:
百度网盘地址
下载完毕后，打开文件夹,里面有两个东西，一个是Fuse的安装包，还有一个是配套使用的编辑器:

安装包

1.首先打开安装包Fuse_0_5_3373.pkg

安装界面
这一步很简单，只要一直继续/下一步就可以完成了
打开终端，输入fuse
如果出现以下内容:

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这一项说明插件安装成功!

如何创建Fuse项目

打开终端，使用cd命令将当前目录转到你想要创建Fuse工程的目录,比如桌面:

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

输入以下代码，来创建一个名叫hello的工程:

fuse create app hello

如果显示出:

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

说明工程创建成功

编辑和运行项目

打开工程文件，会看到以下几个文件

屏幕快照 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
```

如果没有错误，应该会出现以下运行结果:

屏幕快照 2015-08-24 上午10.05.45.png
如果这时你改变MainView.ux的代码，然后保存，你会发现你的改变会实时反映出来,不需要重新运行。比如你改变switch标签中的Alignment的值为Center，运行结果会立刻改变，如下所示:

屏幕快照 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

下面我们来看看文件的结构,并熟悉一些标签，这代码看起来非常熟悉，因为这个和HTML如出一辙:

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

首先<App Theme="Basic" ClearColor="#eeeeeeff"></App>标签,是我们应用程序的接入点，是应用程序的根类
Theme属性定义整个app的外观等信息,可以自定义,但是目前还不太会用。。以后我会研究一下。
ClearColor用来定义app的背景色
<DockPanel></DockPanel>标签可以对它之内的各个组件进行排列，将他们锁定到特定方位(Top,Left,Right,Bottom)
<StatusBarBackground DockPanel.Dock="Top" />设定手机状态栏的位置，留出相应地空间。
<ScrollViewer ClipToBounds="true"></ScrollViewer>相当于iOS中的ScrollView的作用，把它内部的元素全部放入一个scrollView中。
<StackPanel></StackPanel>对其内部的元素按一个方向进行排列(水平和竖直排列,在默认情况下是竖直排列,如果要水平排列的话，将它的Orientation属性的值改为"Horizontal",<StackPanel Orientation="Horizontal">)
所有标签的使用说明可以在它的Class Reference中找到:
[UX Class Reference] (https://www.fusetools.com/developers/ux)

创建一个UX动画的示例

创建一个Fuse工程，名为UXAnimation:

新建工程

我们要有4个不同的UX动画效果，所以首先我们要创建含有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和标签以外的内容:

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

创建Panel标签作为我们的画布:

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

在Panel中创建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>

创建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
给第一页(在StaggeredAnimation.ux中的Panel标签内)添加一些代码:

    <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标签内设置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>

当点击任何一个矩形时.两个矩形都会顺时针旋转90度,由于设置了Delay属性，所以rec1先旋转，在0.5的延时后，rec2再旋转,Easing设置的是进入动画的时间曲线,EasingBack设置的是归位动画的时间曲线:

UX动画1

在AnchoredAnimation.ux中(同样是在Panel标签内)添加代码:

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

同样是长按后矩形顺时针旋转90度，但是不一样的是，矩形的旋转中心被设置到了左上角,这样会产生与上一个动画不一样的效果。Easing设置为了BounceOut会使得动画有一个弹回的感觉，效果看起来很不错:

UX动画2

在ClickedEvent.ux中(同样是在Panel标签内)添加代码:

    <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的区别是，它是单击后触发。
<Scale Factor="0.8" Duration="0.3" Easing="QuadraticInOut"/>
设置的是在触发事件后把大小降低到原来的0.8倍
<Move Y="0.3" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
事件触发后将Y坐标增加目标高度的0.3倍,对于这个矩形来说，就是向下移动30个点(如果将它设置为负值那就是向下移动)。RelativeTo属性设置增加值是用相对于目标的高度的倍数或者是具体的点个数,分别对应"Size"和"Point"。
<Rectangle ux:Name="fillRectB" CornerRadius="50">第二个矩形设置圆角半径为50，也就是其边长的一半，也就是一个圆形
<Change fillRectB.CornerRadius="5" Duration="0.5" Easing="QuadraticInOut"/>该动画的结果是将其圆角半径变为5，也就是变回圆角矩形，下面是运行结果:

UX动画3

下面来添加最后一个动画:
在ScrollingBasics.ux文件中，同样是Panel标签内,添加如下代码:

<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实现了一个类似于iOS中tableView的滚动、弹跳效果
<Panel Width="300" Height="300">
限定ScrollViewer的滚动区域
<ScrollViewer ClipToBounds="true">定义一个ScrollViewer用于承载它内部所定义的多个矩形。由于这几个矩形是按竖直方向排列，很显然要高于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
完整工程文件下载:
百度网盘下载
到此为止，我们完成了对这个新软件的小小的探索，其实我们还没有将Javascript结合到工程中，但是仅仅用UX markup我们就已经实现了很多事情，而且它并不是很难: ]当然我才学习了一天而已(准确的说Fuse在8月21日才发布beta版)，这只是我的一点学习分享~

如果本篇文章对你有帮助，请点一下左下角的喜欢，大家的支持是我继续写作的动力！

网友评论

飘在空中的猪:fuse中文社区已经创建了 http://www.fusetools.com.cn
不管是设计者还是开发者，希望更多的fuse的使用者一起来交流
ae627d4a1271:大神，这需要多高的水平啊，不过我还是觉得mockplus适合我，就像傻瓜相机一样简单，可惜就是不能导入GIF
5527ad9df26f:赞
5acaf092ee8a:这个软件有木有支持 EICapitan的版本呀
5acaf092ee8a:@调皮的鼠标我进到官网了
whamwong:牛逼！
Waverr:好文！！！
codeGlider:@LittleWave 谢谢支持！😊
MJGA:必须点赞
codeGlider:@简叔谢谢支持：）

原型\UX 设计软件Fuse的安装及其初探

什么是Fuse

Fuse的安装(Mac OSX)

如何创建Fuse项目

编辑和运行项目

创建一个UX动画的示例

如果本篇文章对你有帮助，请点一下左下角的喜欢，大家的支持是我继续写作的动力！

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

会设计的攻城师

人生不易，我有必杀技

Swift UI 交互动效

设计相关

技术文章

首页投稿（暂停使用，暂停投稿）

iOS

产品大学