Re: Another attempt at conveying an add on to the animation object

> On Aug 8, 2014, at 1:52 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
> Once again, is this just a restatement of your previous emails? If
> not, what's different?
> 
> In an earlier thread, I boiled down your emails to a simple set of
> requests.  Here they are again:
> 
> For the AnimationTiming dictionary, make it more like the
> corresponding CSS syntax:
> 
> * add 'animation-duration'/etc as aliases of the existing 'duration'/etc members
> * add an 'animation' member with the same syntax as CSS's 'animation'
> property except without <'animation-name'>, and sets all the values
> accordingly
> * for all the properties, support "initial" and "inherit" (and
> presumably "unset" and any other global keywords?)
> 
> Is this all that you're asking for?  If not, what else are you asking for?
> 
> Note that the above list is the kind of thing I've been asking for
> when I ask for a simple explanation of what you're trying to do.  Tons
> of verbose examples *obscure* your point, rather than helping it.
> 
> ~TJ

... My apologize. Yes . I chose to show the syntax instead, cause I felt a visualization with description, would better convey my proposal, instead of me just typing only a description of it. But they wasn't the same copy and paste, each one I edit to what I felt better help with explaining. And the last one I felt truly convey what I was trying to proposal... I'm attempted to put it in this email too.... It really does convey my ideal in the shortest way possible I feel.... Just take one more look at it, and note that this is different --edited-- too:

Syntax:

var anim = new Animation(
ELEMENT_NODE, 
[{CSS PRESENTATION PROPERTIES}], 
[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
TIMING VALUE);

Explanation:

var anim = new Animation(
//a element node
ELEMENT_NODE, 
//CSS static properties
[{CSS PRESENTATION PROPERTIES}], 
//CSS motion properties
[{CSS ANIMATION/TRANSITION/TRANSFORM PROPERTIES}],
//timing value
TIMING VALUE);

Example:

This example utilize animation-timing-function ease-in and ease-out effect:
 As it start with right:"25px", it start as an "ease-in" motion. And as it start with left:"25px", it end it with an "ease-out" motion all in 3 second:

CSS/ECMAScript syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
// short hand
[{animation: "none 0 ease-in 0 0 normal none running"}, 
// short hand
{animation: "none 0 ease-out 0 0 normal none running"}], 
3000);

/******
note that I could have omitted:
animation-name : none
animation-duration: 0
animation-delay: 0
animation-iteration-count: 0
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
Since these are default values. But I chosen to put them in, out of demonstration means.
******/

ECMAScript syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
[{animationTimingFunction: "ease-in"},
{animationTimingFunction: "ease-out"}],
3000);

CSS syntax:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
[{"animation-timing-function": "ease-in"}, // short hand
{"animation-timing-function": "ease-out"}], //short hand 
3000);

Timing value set in CSS:

var anim = new Animation(
element_node, 
[{ right: "25px"},
{left: "25px"}], 
// short hand
[{animation: "none 3s ease-in 0 0 normal none running"}, 
// short hand
{animation: "none 3s ease-out 0 0 normal none running"}]);

Style attribute syntax style:

 var anim = new Animation(
element_node, 
[{ style: "right: 25px"},
{style: "left: 25px"}], 
// short hand
[{style: "animation: none 0 ease-in 0 0 normal none running"}, 
// short hand
{style: "animation: none 0 ease-out 0 0 normal none running"}]);

Thank you for comprehending.  

N-S4L

Received on Friday, 8 August 2014 18:32:12 UTC