WorkWithPlus for Native Mobile allows the user to easily add several predefined animated components in any Panel, allowing the user to quickly improve the behavior and user experience of their applications.
Animated elements are set up in a new kind of node in the hierarchical editor named "Animations".
The "Animations" node will hold all the animated elements that will be included in your Panel under it.
To add a new animated element, simply right-click on the "Animations" node, and select "Add -> AnimatedElement"
The "AnimatedElement" node has the following properties:
- Name: The name of the animation will be used to name all generated tables, events and subroutines: e.g. Sub 'HomeRightMenu_Show'
- Type: The type of animated element determines the initial position, and animated effect that will be applied. You can find out which types of animated elements are available below.
- Theme Class: This property can be used to change the theme properties of the outer table of the animation. Please consider that if you override animation related properties, the animated element may not work properly.
- Include Default Actions: This property can be used to turn off automatic behavior (such as the animation hide launched when the content table is tapped), allowing the user to fully control the animation's UI.
Users can choose to animate their elements in one of the following predefined types:
| Top notification |
An animated table will descend from the top of the screen. This kind of animation was designed to be used as a way to show customizable notifications to the user. |
 |
| Center message |
An animated table will be shown at the center. Also designed as a way to show customizable messages to the user. |
 |
| Bottom action sheet |
An animated table will appear from the bottom of the screen. This animated element was designed to show additional actions. |
 |
| Right menu |
Designed as a way of showing more actions, or a secondary menu to the user. This element shows an icon that will remain "always visible", that once the user taps on it, will extend a new table from the right. |
 |
In all the cases above, a dark overlay table will be displayed, that will prevent the user from selecting anything outside the table.
As we evolve this feature, we will continue to add new kinds of animated elements and capabilities.
Every animated element contains a main table, where the user can customize the animation content.
This table accepts any kind of content, text blocks, images, attributes, variables and even more complex components.
The main restriction with the content of the animation, is that the content cannot "auto grow", nor "collapse its space" when hidden. This restriction also applies if you add a 'Grid' inside the animated element. In those cases, the animated element will try to add a scroll to the content.
While the content of the animated element is edited, you will see the result (including the animation effect) in the live preview.
You can hide the animated element preview simply by selection an element outside the element.
|