Search

Search results

  1. This example shows how one can achieve a tabview with an animated indicator showing which tab is selected. The example achieves this by changing the LayoutMaster of an element along with a LayoutAnimation trigger, which allows one to animate elements between different layouts. <App Background="#eee"> <Font ux:Global="RobotoMedium" File="Roboto-Medium.ttf" /> <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7"> <string ux:Property="Text" /> ...

    Layout Tabs Menu
  2. Here is another awesome design we found by Anton Aheichanka that we felt obligated to implement with Fuse. We used the free UI kit from InVision for the assets. The animations This example implements two separate animations: 1. Clicking the pink plus-button makes it expand, revealing more options. 2. Clicking the avatar in the top right corner triggers the calendar page to animate. In this example we handle them separately. Defining the resources We start by defining some resources. We ar...

    Menu Animation
  3. This example shows how to use Keyframe with Scaling and Translation to make a set of wobbly buttons. The example was inspired by this awesome piece by Radek Skrzypczak, which is a design for a task list app. The skull icon was created by Vincent Le Moign. The arrow icon is from Google's Material Icons pack. This example has two main parts: the background task page and the animated overlay menu. The overlay menu is probably the most interesting part, so we'll start with that. Animating the me...

    Menu
  4. In this example we have implemented an awesome menu design by Gal Shir! The cards Each card is defined as follows. A translational offset is calculated in JavaScript based on the cards index. Name, background color and text color are also data-bound values. <Panel Offset="{offset}" ux:Name="unselected"> <Panel ux:Name="self" LayoutMaster="unselected"> <Grid ux:Name="hamburger" RowCount="3" Height="30" Width="30" Alignment="TopLeft" Margin="20" Opacity="0"> <Each Count=...

    Cards Menu Tabs
  5. This time we've implemented an awesome interactive infographic concept by Yaroslav Zubko. The pie chart This example displays a pie chart where each piece has a corresponding page in a PageControl. The chart rotates with the navigation in the PageControl, but since each piece has a different size, each page must affect the rotation relative to its size (and as it turns out, the size of the previous piece). For this reason, we need to do use JavaScript to create a view-model from the raw values...

    Tabs Menu
  6. This examples shows how to make a cool weather app with animated weather icons. Structuring the app The app is structured using a LinearNavigation with a SwipeNavigate behavior. By setting the SwipeDirection property of SwipeNavigate to Down, we make the gesture a downward swipe instead of horizontal. Each page of the app actually contains the same elements, but with different settings. Some elements, like the rain and snow, are turned on or off using data-bound WhileTrue triggers. We use dat...

    Menu Navigation Animation
  7. In this example we implement a cool reveal animation from the Stripe Dashboard The animated menu We define a class called MenuButton. This allows for a nicer split up of code, but in this case we do not make it a reusable component. The menu icon consists of three circles. We want to animate their size and position so that they morph into one larger circle when clicked. We use the Scale animator for this. One thing to notice is that we define the circles at their maximum size, and scale them ...

    Menu Animation
  8. Cube transition This example illustrates how you can create a neat 3D transition effect between two screens. The viewport To get proper 3D perspective projection, we place everything inside a Viewport at the root of the app. Note that we set CullFace="Back". This makes it so that only the front face of any element is visible. The Perspective property controls the distance (in points) between the camera and the Z = 0 plane (where graphics are drawn by default). The field of view is then calcu...

    3D Menu Transition
  9. This example shows how to implement tab bar navigation using PageControl, PageIndicator and GridLayout. The markup <App Background="#333"> <JavaScript> var pages = [ {"name":"page1", "highlight":"#34495e", "icon":"Assets/icon-hexagon.png"}, {"name":"page2", "highlight":"#3498db", "icon":"Assets/icon-star.png"}, {"name":"page3", "highlight":"#aa3377", "icon":"Assets/icon-square.png"}, {"name":"page4", "highlight":"#88cc22", "icon":"Ass...

    Tabs Menu Navigation JavaScript