Zebble
  • About Zebble
  • Compare
  • Documentation
  • Themes
  • Plug-ins
  • Contact Us

    • What is Zebble?
    • Structure of a Zebble solution
    • Zebble Designer (UWP)
    • Installing - Introduction
    • Change log
    • Introduction
    • ViewModel development
    • VM.EXE
    • View development
    • Dialogs
    • Lists and Collections
    • Tips and shortcuts
    • List views
    • ViewModel testing
    • Automatic Views
    • View development process
    • Hello World - Core Concepts
    • Layout: Sizing & Positioning
    • Event handling
    • Navigation
    • Alerts, Dialog, Prompt and toast
    • View lifecycle
    • Managing Files & Resources
    • Config & Debugging
    • Forms
    • Page templates
    • Device API
    • Animations
    • Web Api - Part 1 (reading data)
    • Web Api - Part 2 (post and delete)
    • Web Api - Part 3 (server vs client domain model)
    • Gesture events
    • View class
    • Zebble Markup (.zbl files)
    • Data Binding and MVVM
    • Stack class
    • Sizing and positioning
    • Layout examples
    • ScrollView class
    • Page class
    • Styling in Zebble
    • CSS property mapping to Zebble
    • Supported selectors
    • Zebble CSS: Under the hood
    • Inline styling
    • CSS real-time updates
    • Dynamic expressions in CSS
    • Gradient background colours
    • CSS Pseudo-classes support
    • Using Bold and Light Fonts in Zebble
    • Rotation in Zebble
    • Using custom fonts in Zebble
    • Flashing on tap using AutoFlash
    • Button
    • Carousel class
    • Checkbox class
    • DatePicker
    • Drawing class
    • FilePicker class
    • Grid class
    • IconButton class
    • ImageView
    • ItemPicker class
    • ListView & Grid classes
    • OptionsList
    • SearchInput class
    • Slider class
    • Switch class
    • Tabs Class
    • TextInput class
    • TextView
    • TimePicker
    • TreeView
    • Waiting Indicator
    • WebView class (displaying html)
    • C# Methods and Properties Of UI Components
    • Nav.Forward() vs Nav.Go()
    • Passing parameters to the destination page
    • Going Back
    • Showing Popup pages
    • Waiting class
    • Hardware Back button (e.g. Android)
    • NavigationBar class
    • Tabs class
    • Caching (pages)
    • Navigation without event handler
    • Use the Windows version
    • Logging messages for Debugging
    • Debugging Zebble/Plugin
    • Exception handling in Zebble
    • Debugging layout and styles
    • Zebble Device API
    • Device.Screen and orientation (landscape | portrait)
    • Code that should run on a specific platform
    • Using Lamp (aka Flash, LED and Torch)
    • Using Compass (Smooth compass)
    • Using Accelerometer (device angle)
    • Using Gyroscope (device motion speed)
    • How to Vibrate the device?
    • Launching the device browser
    • Finding device model and manufacturer
    • Responding to System events
    • Handling device shake event
    • Permissions
    • Permissions declaration (manifest files)
    • Sharing
    • Prompt for rating the app
    • Finding if Internet connection is available
    • Device messaging (Make a phone call, send SMS or Email)
    • Showing a local notification
    • Copying to Clipboard
    • Accessing device contacts
    • Reading and writing into Gallery (albums)
    • Playing & Recording Audio
    • Cache and temp files and folders
    • C# async / await
    • Understanding Zebble Threading
    • Debugging - the StackTrace problem
    • Not awaiting (running in parallel)
    • Timer (interval / scheduled running)
    • Post-render changes to the UI (dynamic)
    • Introduction of Geo location
    • Map & Location Services
    • Launch directions to a location (external)
    • Getting current Location
    • Tracking user location
    • Device.Media: Taking and picking photos
    • Playing an audio file
    • VideoPlayer class
    • Augmented reality
    • Recording audio
    • Virtual Reality
    • Speech Recognition
    • Recording or picking video
    • Playing remote videos in iOS
    • Text to speech
    • Introduction to the importance of Mobile Testing
    • Why and what to test
    • Testing mobile apps on different devices
    • Testing mobile apps
    • Xamarin Profiler
    • Performance optimization
    • Moving a view to another container at run-time
    • Attaching custom data (tag) to objects
    • Saving a view as image
    • Naming best practices
    • Fastest way to update your nuget package
    • Tips for Clean and Brief code
    • Splash screen and icon generation
    • Advice for passing Approval
    • Options for iOS app distribution
    • Test Release (internal and UAT)
    • Application Icons in IOS
    • Submitting to App Store
    • Releasing to App Store
    • Crash reporting
    • Optimized Release Build
    • Android - Generating an APK for manual installation
    • Payment (subscriptions & in-app purchases)
    • Introduction to push notifications
    • Registration process (App)
    • Push notification setup - iOS
    • Push notification setup - Android
    • Push notification setup - Windows
    • Sending a push message from the web app
    • Introduction
    • Connecting Zebble to Web API
    • Installation
    • Creating an API class
    • GET APIs
    • Calling a GET API (in the mobile app)
    • POST, PUT, PATCH and DELETE APIs
    • Domain Model
    • Web API and Authentication
    • Versioning
    • Uniquely identifying installations (token)
    • Settings file: config.xml
    • Standard Zebble settings
    • Login/Register with Facebook
    • Creating a composite component / plugin
    • Creating a Zebble component using Html and Javascript
    • CustomRenderedView: Third-party native components / plugins
    • Mapbox
    • Naming considerations
    • Random problems?
    • Display Keyboard for Visual Studio Android Emulator
    • iOS goes mad?
    • Configuring a Windows phone for ad-hoc testing
    • Fixing Error DEP0001 : Unexpected Error: -2147009287 while deploying Windows UWP app on device
    • Fixing Error DEP0001 : Unexpected Error: -1988945906 while deploying Windows UWP app on device
    • Unable tp Connect to the Mac agent from Visual Studio
    • Can't connect to the Mac agent from Visual Studio?
    • Choosing the CPU architecture
    • Zebble CLI
    • How to add a Device API to Zebble source?
    • About Automated UI testing
    • What should we test in mobile applications?
    • Creating an Automated UI Test in Zebble



Animations


In this lesson, you will learn:

  • How to animate element properties such as position, size, rotation, opacity, etc.
  • How to animate multiple properties at the same time.
  • How to implement advanced timing using the standard .NET async programming features.
  • How to configure advanced animation settings such as easing algorithm and factor.
  • How to add entry animations declaratively in your markup file without C# code.

Download this video directly

Animation API

You can use the Animate() method of the View class to change any of its attributes as an animation.

Example 1 - Basic use:

The following code will animate the view to move to the right side by 100 pixels. The duration of the animation will be based on the static value of Animation.DefaultDuration which is 300ms.

myView.Animate(x=> x.Margin(left: 100));

 

 

 

 

 

 

 

 

Example 2 - Explicit duration:

The following example is the same as Example A, but it runs the animation in exactly 100ms.

myView.Animate(100.Milliseconds() , x=> x.Margin(left: 100));Example 3 - Multiple properties:

The following example will animate two properties, so you get a diagonal moving effect. 

myView.Animate(100.Milliseconds() , x=> x.Margin(left: 100, top: 100));You can animate the value of as many properties as you want. For example, the following will animate the view and fade it out at the same time.

myView.Animate(100.Milliseconds() , x=> x.Margin(left: 100, top: 100).Opacity(0));

Example 4 - Advanced

You can create an Animation object to specify the full details of the animation and pass that to the Animate() method of a view. In fact, all the examples above are just shortcuts to the following:

myView.Animate(new Animation
{
    Duration = TimeSpan.From....(...),
    Change = v => { /* Modify the view to its target state */ },
    Delay = TimeSpan.From....(...), // Optional
    Easing = AnimationEasing.[EaseIn | EaseInOut | EaseOut | Linear ]
});

One of the optional settings of animation is Easing. Easing is an Enum that determines the velocity of the changes during the course of animation. For example if it set to Linear, the speed of the transition will be fixed during the hole the animation. The default value is EaseOut which means the transition starts fast and then it slows down as the approach end of the animation.       

There is a box which is dyed blue:

<Canvas Id="Box"
    Style="width:50; height:50px; background: blue" />" 
Now we want to animate it.

Sample 1:await Box.Animate(new Animation
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
)};

Sample 2:

await Box.Animate(new Animation
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
Easing = AnimationEasing.Linear
)};

 


Sample 3:

await Box.Animate(new Animation
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
Easing = AnimationEasing.EaseInOut
)};

 


Sample 4:

await Box.Animate(new Animation
{
Duration = 1.Seconds(),
Change = {} => Box.Rotation(90).Margin(left : 100)
Easing = AnimationEasing.EaseInOut
EasingFactor = EasingFactor.Quintic
)};


Advance Timing

Now we want to run multiple animations in parallel. For this, we use Task.WhenAll() function in C#.

video-to-gif output image

<Canvas Id="Box" Style="width:50; height:50px; background: blue" />"   
<TextView Id="Text" Text="Color:black" />
await Task.WhenAll(
    Box.Animate(2.seconds(), x => x.Margin(left: 100)),
    Text.Animate(1.Seconds(), x=> x.TextColor(Color.Red))
    );
    
    // This line runs after 2 seconds


To wait, or not to wait?

The Animate() method returns a Task. You can await it if you want the rest of the calling code to run after the animation is completed. But often this is not the case, and you want to fire the animation to run whilst then doing other things. In that case, you should not await it.

Visual Studio Warning?

If you don't await the task Visual Studio might show you a warning. To get rid of it, you should do something with the Task that doesn't really do anything. For example, just call RunInParallel().

myView.Animate(x=>...).RunInParallel();

 

AddWithAnimation

You can use View.AddWithAnimation() method instead of the Add() method to dynamically add objects on the screen.

Example:

We are setting the "z-animate-to" attribute to specify the final state of the object which is x=100 pixels and opacity is one for visible.

<Canvas Id="Box"
    Style="width:50; height:50px; background: blue; left:-50; opacity:0;"
    z-animate-to="X=100; Opacity=1;"
    z-animate-duration="1000" />

This is telling the rendering engine that my box is initially invisible and out side of screen, but as soon as the page is shown, then it will fly in.

 There is no C# code here and we achieved this with only setting the "z-animate-to" and "z-animate-duration" attributes.

We can implement this sample in C#:

this.AddWithAnimation(new MyView(),
                                       initialState: v=>v.X = -v.ActualWidth, 
                                       change: v => v.X = 0);
The above example, will slide the item into the screen from left side.




‹
Zebble is a product of Geeks Ltd , a software house based in London, UK. All rights are reserved.

Telephone: +44 (0)845 643 6229

Email: hello@zebble.net

Address: 66a London Road, Morden

Greater London, United Kingdom, SM4 5BE

Privacy Statement
Terms & Conditions
Contact Us