Search

Search results

  1. A few simple examples of how to create animations in response to user input with triggers and animators. [VIDEO media/anchored-preview.mp4] [VIDEO media/click-events-preview.mp4] Staggered animation Here we use the animator's Delay property so that the right rectangle does not begin to rotate until the left one has completed. By setting a Target for each of the two animators we can move separate objects (the two rectangles) with just one trigger. If we didn't set the Target properties the an...

    Basics Animation Navigation
  2. This example, based on the awesome Ecommerce-UX design by Levani Ambokadze, shows the use of SwipeGesture and SwipeNavigate, as well as how you can achieve 3D transformations using Rotate and Viewport. The icons are from Google's Material Icons pack. Swipe navigation Swiping left and right on both detail cards and the preview photos is done using a PageControl, which handles linear navigation between panels using swipes. The following is a simplification of the two PageControls used in the ap...

    3D Navigation Gesture
  3. 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
  4. In this example we show how you can use the PageControl in combination with a Timeline to create an animated on-boarding experience. We got inspired by this design by Sumit Chakraborty. The PageControl We first set up a PageControl with five child panels to represent the five pages. The PageControl considers all direct children to be pages. Each page has some textual content with the same styling. Instead of copying things like Color, FontSize and Margin to all the pages, we create a reusable...

    Navigation Animation
  5. An example showing how to create a slide show using a PageControl. PageControl A PageControl allows the user to navigate between several pages. It's basic structure is: <PageControl ux:Name="slides" ClipToBounds="true"> 4x <Page/> ... </PageControl> Only one page is displayed at a time. A basic swipe navigation is used to move between the pages. The name thePages is used later to refer to this control. You can put whatever content you'd like into the Page elements. In the example one of...

    Navigation
  6. This example illustrates how you can use EdgeNavigator to make a navigation drawer that can be swiped in from the left, or opened using a button. <App> <iOS.StatusBarConfig Style="Light" /> <EdgeNavigator> <Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F"> <Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" /> <ActivatingAnimation> <Change shadow.Color="#0004" /> ...

    Sidebar Navigation Material Design
  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
  8. 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
  9. In this example we are using Entering- and ExitingAnimation together with Keyframe in order to implement this awesome transition animation by Remco Bakker The card class Each page has a Card, which contains the images and their up and down movements. Each page also displays some text, but this part has its own Entering- and ExitingAnimation. <Panel ux:Class="Card" Width="150" Height="150" Opacity="0.4" ux:Name="self"> <ActivatingAnimation> <Change self.Opacity="1" Duration="1" />...

    Animation Navigation
  10. This example uses Router and Navigator to create a list of pages that can be navigated to with corresponding buttons. We create a list of 20 pages by calling the createPage function inside a for-loop and adding each page to an Observable. Each page has a title string and a clicked function. When clicked is called on a page, it pushes a new instance of subPage onto the router's navigation stack, and sends the title of the page as a parameter. var Observable = require("FuseJS/Observable"); func...

    Navigation JavaScript
  11. In this example we are using WhileActive and ActivatingAnimation to create a dynamic tab bar. The design was inspired by this awesome concept by Sergii Ganushchak. Icons are from Google's excellent Material Icons and the font is Roboto. The placeholder graphics is from Sergii's original Form prototype. The tab bar We use a regular PageControl for the navigation and make sure to set its TransitionEasing to BackOut. The tab bar itself is defined as follows: <Panel Dock="Top" Height="60" > ...

    Tabs Navigation Gesture Reusable components
  12. This example shows how you can make your own transitions for pages within a PageControl. The trick is setting Transition="None" on the PageControl, which removes the default page animations. This lets you add your own EnteringAnimation and ExitingAnimation to each page, which controls how they animate in and out. <App Background="#222"> <Page ux:Class="MyPage"> <EnteringAnimation> <Move X="-1" RelativeTo="ParentSize" /> </EnteringAnimation> <ExitingAnima...

    Navigation Custom control
  13. This example shows how you can create a neat parallax effect for pages in a PageControl using EnteringAnimation, ExitingAnimation and ScrollingAnimation. Each page has an EnteringAnimation and ExitingAnimation pair, which is used to move the background image and other parts of the UI in the opposite direction of the page. This results in the background image moving along with the page, but slower than the page itself. We also do the same for the ScrollView inside each page using ScrollingAnimat...

    Navigation
  14. 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