这里我们综合应用了若干个不同的UX和JavaScript特性，建立了一个有更多�关联的App示例.
这个单屏App将给我们展示:
- 调出和隐藏边栏�菜单�使用了一个
Clicked-event事件和一个EdgeNavigator边缘导航标签； - 当侧边栏�出现时响应式地移动客户端界面的主要区域；
- Animate the side menu icon, turning a familiar "hamburger"-menu icon into a "cross" dismiss-icon using Translation-, Rotation- and Opacity-transforms
- Animate the menu choices in the side bar using the WhileInactive-trigger
- Create a typical circular portrait picture using Circle with ImageFill
- Easily databind news items to JavaScript fetched from the net
- Let's take a look at points of interest from this example:
App.ux文件
本文译自：https://www.fusetools.com/examples/social-media-screen
从网络取得Json数据：
var Observable = require("FuseJS/Observable");
var data = Observable();
fetch('http://az664292.vo.msecnd.net/files/P6FteBeij9A7jTXL-edgenavresponse.json')
.then(function(response) { return response.json(); })
.then(function(responseObject) { data.value = responseObject; });
module.exports = {
data: data
};
我们相要展示一个NewsItem在JSON中的每一个入口的实例，这里是使用Each来做到的，注意responseData是是服务端数据的一部分,并不是什么"魔术般出现"的项; 我们直接地引入JSON数据:
<pre>
<ScrollView>
<StackPanel Alignment="Top">
<Panel Height="7" />
<Each Items="{data.responseData}">
<NewsItem />
</Each>
</StackPanel>
</ScrollView>
</pre>
加入侧边栏菜单到主要的EdgeNavigator，当Sidebar (在Sidebar.ux文件中定义) �被激活时, 移动App的主要区域同时动态地将“汉堡包”图标变成“十字”图标:
<pre>
<Sidebar Width="180" ux:Name="menu" EdgeNavigation.Edge="Left">
<ActivatingAnimation>
<Change mainAppTranslation.X="180" />
<Change topMenuTranslation.Y="0" />
<Change bottomMenuTranslation.Y="0" />
<Change middleRectangle.Opacity="0" Easing="CircularOut" />
<Change topMenuRotation.Degrees="45" Easing="ExponentialIn" />
<Change bottomMenuRotation.Degrees="-45" Easing="ExponentialIn" />
<Change topRectangle.Width="28" />
<Change bottomRectangle.Width="28" />
</ActivatingAnimation>
</Sidebar>
</pre>
直接用命令画出“汉堡包”图标式的菜单�然后请允许并支撑上述�代码的运行, 实现方式如下:
<pre>
<Panel Margin="7,5,5,5" Height="32" Width="32" HitTestMode="LocalBounds">
<Clicked>
<Set EdgeNavigator.Active="menu" />
</Clicked>
<Rectangle ux:Name="topRectangle" Height="2" Width="26" Fill="#000">
<Translation Y="-9" ux:Name="topMenuTranslation" />
<Rotation ux:Name="topMenuRotation" />
</Rectangle>
<Rectangle ux:Name="middleRectangle" Height="2" Width="26" Fill="#000" />
<Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Fill="#000">
<Translation Y="9" ux:Name="bottomMenuTranslation" />
<Rotation ux:Name="bottomMenuRotation" />
</Rectangle>
</Panel>
</pre>
上文这个Panel同时也拥有�控制权，当被点击时，用来激活名为Menu的Sidebar。
Sidebar.ux
Sidebar作为一个普通的StackPanel被定义，他执行一个有趣的�动态淡入效果到菜单项，使用WhileInactive-trigger。这里假定这个普通�布局是牌rest在�面板Panel中, 然后在接下来我们改变他，当处于inactive状态时。在App.ux中，我们使用 ActivatingAnimation做相反的操作，在我们设定“汉堡包”-menu菜单的地方。这是行得通的——�让元素从活跃状态变得没有任何偏移的状态, <del datetime="2016-04-27T22:24:59+00:00">as it makes it easier to tweak the effect or remove it fully</del>.
Using WhileInactive comes with certain caveats, however. Because it describes the state we are animating from as the Sidebar becomes active, the animations will effectively be run backwards when the menu becomes visible.
This makes sense if you push the Sidebar off the screen to its inactive state, you can see the Chat moving first, followed by the Feed, the Browser and so on.
<pre>
<StackPanel ux:Class="Sidebar" Background="#212831">
<WhileInactive Threshold="0.4">
<Move Target="user" X="-180" Duration="0.2" Delay="0.3" Easing="CircularIn" />
<Move Target="stats" X="-180" Duration="0.2" Delay="0.2" Easing="CircularIn" />
<Move Target="browser" X="-180" Duration="0.2" Delay="0.15" Easing="CircularIn" />
<Move Target="feed" X="-180" Duration="0.2" Delay="0.1" Easing="CircularIn" />
<Move Target="chat" X="-180" Duration="0.2" Delay="0.05" Easing="CircularIn" />
</WhileInactive>
...
</StackPanel>
</pre>
As you can see, the WhileInactive-trigger has a Threshold. This Threshold goes from 0 to 1 and decides when the Trigger-actions are to be run. Keep in mind that as this animation runs backwards, the smaller the number, the more visible the panel needs to be for the Trigger-actions to play.
Tag：Fuse, Fuseapp, Fusetools, Fuse教程, Fuse案例, native app
发布时间：2016年04月28日
博客被黑，挪窝简书安家……
