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. This example shows how you can use a ScrollView together with ScrollingAnimation to create advanced visual effects to accompany scrolling. In this example, we have an article with a nice header that animates when you scroll through the article. Design The basic layout is like this: <App Theme="Basic" Background="#eeeeeeff"> <iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/> <Panel> <MultiLayoutPanel ux:Name="headerPanel" HitTestMode="None" Alignment="Top" Height="26...

    Animation Layout
  3. This example shows how we can create sticky headers that hover at the top of the screen as we scroll the content. Pictures for this example are taken from unsplash.com. Design inspiration: Read App Interface by Kun-Li. The desired effect can be implemented with the use of the x() and y() UX expression functions. Since in this case we only need a vertical translation, we will use the y() function, which tells us the value of an elements' vertical position. The main structure of our app is a Scr...

    Animation Cards Gesture Layout
  4. This example app shows how to construct advanced layouts. The markup <App> <Image ux:Class="Icon" Density="2" StretchMode="PointPrecise" /> <Font File="Assets/OpenSans-SemiBold.ttf" ux:Global="SemiBold" /> <Grid ColumnCount="1" Rows="4.5*,100,4*"> <Fuse.iOS.StatusBarConfig Style="Light" /> <Text ux:Class="DefaultText" Color="#fff" Font="SemiBold" /> <Grid Row="1" RowCount="1" Columns="Auto,Auto,1*" Color="#00000088"> <DefaultText Margin="20,0,...

    Layout
  5. We found this excellent concept by Tanya Brassie of inCahoots, and decided to implement the design in Fuse. Slicing and dicing This example is quite heavy on image assets, and each image is sliced from the original vector art in 1x, 2x, and 4x densities. This will result in a lot of clutter throughout our code, since we need a MultiDensityImageSource with three instances of FileImageSource for each image. To clean this up, all images are defined separately in StaticResources.ux, along with fo...

    Layout Navigation Animation Basics
  6. In this example we decided to take on another UpLabs challenge by implementing this very cool signup flow animation. You will learn how to animate layout between completely different app states. Defining some colors We define all our colors in a separate file called Resources.ux, enclosed in a ux:Resources tag: Resources.ux: <ux:Resources> <float4 ux:Global="Green" ux:Value="#14FFB5"/> <float4 ux:Global="Purple" ux:Value="#5E2E91"/> <float4 ux:Global="White" ux:Valu...

    Animation Layout
  7. This example shows how to create an immersive swipeable cards experience. The screen pops with color and you can even interact with the products shown! Inspiration: this good-looking cards animation by Artem Miskevich. All images are taken from unsplash.com. Animated folder and vinyl The products in our application are represented as "cards", so we start out by creating a reusable ux:Class component for them. Although the Card class holds the whole layout for a product, we'll take a look at h...

    Animation Basics Cards Custom control Layout Navigation Transition