Aria Templates Forums
Animations for sections - Printable Version

+- Aria Templates Forums (http://ariatemplates.com/forum)
+-- Forum: Public forums (/forumdisplay.php?fid=3)
+--- Forum: Specifications (/forumdisplay.php?fid=13)
+--- Thread: Animations for sections (/showthread.php?tid=171)



Animations for sections - flongo - 24 January 2014 14:07

A new version of the specs is available later in this thread.

The purpose of this specification is to describe the suggested API for allowing to animate sections across refreshes.

The reason to implement such a feature is that, although Aria Templates now comes with an API to animate elements, it would be much simpler for developers to configure transitions at section configuration level, as it is done today with pages in the page engine.

Here is the proposed API.

{section {
    ...
    animation : {
        animateIn : "slide left",
        animateOut : "slide right"
    },
    bind : {
        animation : {
            to : "something",
            inside : container
        }
    },
    bindRefreshTo : [{
        to : "variableOne",
        inside : container,
       animate : false
    }, {
        to : "variableTwo",
        inside : container
    }]
    ...
}/}
  • animation is of type http://www.ariatemplates.com/aria/guide/apps/apidocs/#aria.pageEngine.CfgBeans:PageAnimation and specifies how the section has to be animated across refresh operations.
  • bind.animation is a standard binding. This allows to change the animation of the section all along its lifecycle.
  • bindRefreshTo[n].animate is a boolean specifying whether the animation should be activated when a refresh occurs due to a change in the data described in that refresh binding. It defaults to true. Anyway, even if it is equal to true, when no animation property is configured (either herd-coded or through bindings) for the section, no animation will be performed. When the RefreshManager is stopped, and data changes occur in different portions of the data model to which the refresh is bound, the animate setting to apply once the RefreshManager is resumed will be the one specified for the last data change.

So far, we have only examined the case of automatic refresh. For manual refresh, the proposal is to add a parameter in the $refresh method:

this.$refresh({
    section : "mySection",
    animate : false
});

It will be hence possible to animate a section upon manual refresh or not. Similar considerations apply here:
  • The animate value defaults to true.
  • If multiple $refresh calls occur while the RefreshManager is stopped, the animate value that will be deemed valid will be the one of the last call.



RE: Animations for sections - Olaf - 24 January 2014 16:10

Looks good to me!


RE: Animations for sections - jakub-g - 27 January 2014 10:20

Fine for me too.


RE: Animations for sections - Marc Laval - 30 January 2014 10:18

Great, I've added an item in our backlog.


RE: Animations for sections - benoit.charbonnier - 30 January 2014 14:22

For consistency, i would just rename the extra parameter that can be used from $refresh and form bindRefreshTo config.

From
'animate': false
to
'animation': false



RE: Animations for sections - jakub-g - 30 January 2014 14:33

(30 January 2014 14:22)benoit.charbonnier Wrote:  For consistency, i would just rename the extra parameter that can be used from $refresh and form bindRefreshTo config.

From
'animate': false
to
'animation': false

Hmm not sure if I agree, "animation" is the cfg object while "animate" is a boolean.
To be voted Smile


RE: Animations for sections - flongo - 30 January 2014 14:38

I chose a different name on purpose because they represent two different things.

"animate" means whether we should animate or not, independently on the the animation
"animation" is the actual animation configuration we have selected. If the section will be animated, it will be don using that configuration


RE: Animations for sections - benoit.charbonnier - 30 January 2014 14:46

@flongo, i know, but to me it is somehow related.

this new boolean is activating or not the usage of the section property named 'animation'. So to me, it makes more sense to have same using the same name !


RE: Animations for sections - flongo - 21 February 2014 17:50

1. Requirements

It should be possible to animate sections across refreshes


2. Technical solution

The purpose of this specification is to describe the suggested API for allowing to animate sections across refreshes.

The reason to implement such a feature is that, although Aria Templates now comes with an API to animate elements, it would be much simpler for developers to configure transitions at section configuration level, as it is done today with pages in the page engine.

Here is the proposed API.

2.1 Section configuration and automatic refresh

{section {
    ...
    animation : {
        animateIn : "slide left",
        animateOut : "slide right"
    },
    bind : {
        animation : {
            to : "something",
            inside : container
        }
    },
    bindRefreshTo : [{
        to : "variableOne",
        inside : container,
       animate : false
    }, {
        to : "variableTwo",
        inside : container
    }]
    ...
}/}
  • animation is of type http://www.ariatemplates.com/aria/guide/apps/apidocs/#aria.pageEngine.CfgBeans:PageAnimation and specifies how the section has to be animated across refresh operations.
  • bind.animation is a standard binding. This allows to change the animation of the section all along its lifecycle.
  • bindRefreshTo[n].animate is a boolean specifying whether the animation should be activated when a refresh occurs due to a change in the data described in that refresh binding. It defaults to true. Anyway, even if it is equal to true, when no animation property is configured (either herd-coded or through bindings) for the section, no animation will be performed. When the RefreshManager is stopped, and data changes occur in different portions of the data model to which the refresh is bound, once the RefreshManager is resumed, an animation will be performed if at least one of the data change demanded it.


2.2 Manual refresh

So far, we have only examined the case of automatic refresh. For manual refresh, the proposal is to add a parameter in the $refresh method:

this.$refresh({
    section : "mySection",
    animate : false
});

It will be hence possible to animate a section upon manual refresh or not. Similar considerations apply here:
  • The animate value defaults to true.
  • If multiple $refresh calls occur while the RefreshManager is stopped, the animation will take place if at least one of the calls to the $refresh method came with the animate property set to true.


2.3 Asynchronous behaviour

One of the risks of this change is the fact that a refresh operation becomes asynchronous. this is the suggested behaviour:
  • While the transition occurs, the refresh manager should not be stopped. It is just important to be aware of the section new container, so that further refreshes of sections inside of it are reflected in the correct part of the DOM.
  • The $afterRefresh method should be called in a synchronous way, namely after producing the new markup and before performing the transition. A new hook should be added in the template context ($onRefreshAnimationEnd) which should be called after the transition ends.

2.4 Wrapper to animate

How is the transition actually performed? A solution is to have a further wrapper inside the section. This wrapper is duplicated when the transition needs to be perfomed. This would have a big impact on the markup generated for sections and still requires clarification. For example, for DOM backward compatibility we could disable animations for sections through an environment variable.