Re: [csswg-drafts] [css-transitions][css-animations] Complex timing functions

Hi, 

I know there are two different types of animation being discussed in 
this, predetermined animation curves and programmatic animations, like
 Apple's spring.

I've been thinking about the latter and I think I have an idea.

What if we could facilitate scripted animation for transition values.


Here is the proposition I have arrived at..
I think it actually looks similar to how Houdini code will look, but I
 haven't delved deply into that as yes.

Anyway, your css would look something like this

``` css
.my-element {
    /* transition: transform 500ms url('../simple.js'); */
    transition: transform 500ms url('../bounce.js')(1 100 10 0);
    transform: translate(0px, 0px);
}

.my-element.active {
    transform: translate(200px, 200px);
}

```

Simple example of an ease function file

** File: simple.js **
``` javascript
/**
 * The simplest possible easing function, linear
 */
export init function(){
        //in this case init does nothing
}

/**
 * Function that gets called every frame until a done() callback / 
promise.resolve()
 * @param {float} t - Transition current Time, value from 0 to 1
 * @param {Promise} - Promise that gets resolved when animation is 
complete
 * @return {float} A value 0 is not transitioned at all and 1 is fully
 transitioned
 */
export frame function(t, animationComplete){
    if(t === 1){
        animationComplete.resolve('done');
    }    
    return t; // linear, very boring..
}

```


Example of how something more complex, e.g. Apple's bounce transition 
effect could be defined using this method

** File: bounce.js **
``` javascript
/**
 * Simulate a spring using the solving algorithm defined by this 
JavaScript
  function
 * @param {float} The mass of the object attached to the end of the 
spring. Must be greater
  than 0. Defaults to 1.
 * @param {integer} The spring stiffness coefficient. Must be greater 
than 0.
  Defaults to 100.
  * @param {integer} The initial velocity of the object attached to 
the spring.
  Defaults to 0, which represents an unmoving object..
  Defaults to 10.
   * @param {float} initialVelocity  
 */
export init function((mass, stiffness, damping, initialVelocity)){
        // code that need to be run once during initialization
        // -real code 
}

/**
 * Fuction that gets called every frame until a done() callback / 
promise.resolve()
 * @param {float} t - Time, value from 0 to 1
  * @param {Promise} - Promise that gets resolved when animation is 
complete
 * @return {float} A value from 0 to 1+ where 0 is not transitioned at
 all and 1 is fully transitioned, in the case of spring the value 
overshoots 1 initially then eventually settles on 1 
 */
export frame function(t, animationComplete){
        // -real code
    // -real code
    return result;
}

```

The browser would know up front about the function and could, I assume
 be prepared,

Different variations of the spring, for example could be achieved by 
passing different values into the init function, 

the frame function would at maximum be executed every frame, 
But of course the browser could decide to drop/skip frames if it 
needed, 

The browser itself could work out how much rounding would happen.
The only thing the script could do is return a value 0-1 obviously 
overshooting 1 if the ease necessitated

-- 
GitHub Notification of comment by vidhill
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/229#issuecomment-233468454 
using your GitHub account

Received on Monday, 18 July 2016 21:44:19 UTC