ClutterScript 2.0

The current ClutterScript format has a bunch of kludges for the 1.0 API; when we break API we should also clean up the ClutterScript syntax, and add new syntax to make it a better description format.

Ideas

Event-based state transitions

All animations should be implicit when a property changes; this means that the animations should not be described through objects, like ClutterState or ClutterAnimator (which will be deprecated 1.12 and removed in 2.0 anyway).

How do we describe animations on signal emission? We can use a state description, e.g.:

 {
  "background-color" : "rgba(0, 0, 255, 0.5)",
  "text" : "Press me!",

  "events" : {
    "button-press" : {
      "background-color" : "rgba(255, 0, 0, 1.0)",
      "text" : "Button Pressed!"
    },
    "enter" : {
      "background-color" : "rgba(0, 255, 0, 0.8)"
    },
    "leave" : {
      "background-color" : "rgba(0, 0, 255, 0.5)"
    }
  }
 }

The example above describes an actor with a "text" property and a background color of blue, half opacity; on ClutterActor::enter-event, the color will be animated to green, with 80% opacity, while on ClutterActor::leave-event it will be restored to the original blue, half opacity. on ClutterActor::button-press-event, the color will be set to red, fully opaque.

Easing states

If the animation is implicit on property change, then we should be able to also have control on the easing mode and duration, e.g.:

 {
   "opacity" : { "duration" : 2000, "mode" : "linear", "value" : 0 }
 }

Alternatively, we can define keyframes:

 {
   "x" : {
     "duration" : 2000,
     "keyframes" : [
       [ "from", 0 ],
       [ "10%", 100, "linear" ],
       [ "80%", 250, "easeOutCubic" ],
       [ "to", 500 ]
     ]
   }
 }

We can also define named animations using a syntax similar to CSS3 Animations:

  {
    "animations" : {
      "diagonal-slide" : {
        "duration" : 5000,
        "repeat-count" : 10,
        "keyframes" : {
          "from" : { "x" : 0, "y" : 0 },
          "80%" : { "x" : 0, "y" : 80 },
          "to" : { "x" : 100, "y", 100 }
        }
      }
    }
  }

Property binding

We can use g_object_bind_property() to tie two objects together:

 {
   "opacity" : "@bind('adjustment', 'value')"
 }

Template state definitions

Being able to define "template" states allows us to have a single place to modify instead of hunting down the same definition in various places or files.

 {
   "states" : [
     {
       "defaultState" : {
         "background-color" : "rgba(0, 0, 255, 0.5)"
       },
       "hoverState" : {
         "background-color" : "rgba(0, 255, 0, 0.8)"
       }
     }
   ],
   ...
   "events" : {
     "enter" : { "state" : "hoverState" }
     "leave" : { "state" : "defaultState" }
   }
 }

Projects/Clutter/Roadmap/ClutterScriptTwoPointOh (last edited 2013-11-22 18:46:19 by WilliamJonMcCann)