Search

Search results

  1. 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
  2. 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
  3. In this example we are using WhileEmpty to show a temporary message while there is no content to display. <App Background="#212121"> <JavaScript> var Observable = require("FuseJS/Observable"); var items = exports.items = Observable(); exports.addItem = function() { items.add(Math.random()); } exports.removeItem = function(arg) { items.tryRemove(arg.data); } </JavaScript> <iOS.StatusBarConfig Style="Light" /> ...

    Basics
  4. 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