Create the state

[jolene-borrelli-sociomantic]

Create da state involves:

• Deciding what will be stored in the state
• Hashing out the data structure of choice

The state may (but is not guaranteed to) include:

• keyframes
• animation names of a set of keyframes
• time markers
• prop/value pairs

[jolene-borrelli-sociomantic]

A suggestion for the state:

currentAnim {arr} : the name of the animation currently being edited keyframes {arr} : holds the keyframe objects keyframe {obj} : holds the keyframe data rules {arr} : holds the animation rule objects rule {obj} : holds the rule data

State -> 
{
    currentAnim : 'I am the anim!',

    keyframes : [ {
         name : 'bouncin-all-around',
         timeMarker : '50%',
         props : [ 
         {
              width   : 'I am the cheeky width',
              opacity : '0'
         } ] 
    },
    {
         name : 'bouncin-all-around',
         timeMarker : '25%',
         props : [ 
         {
             height  : 'I am the cheeky height',
             opacity : '1'
         } ] 
    } ],
    {
         name : 'zoom-in',
         timeMarker : '5%',
         props : [ 
         {
            background-color: 'red'
         } ] 
    } ],

    rules : [
    {
           name : 'bouncin-all-around',
           animation duration : '1s'
    },
    {
           name : 'zoom-in',
           animation duration : '3s'
    } ]
}

[joppe-rhebergen-sociomantic]

Thanks @jolene-borrelli-sociomantic for kicking off!

I think your representation of state makes sense but I'd like to start with a data structure of what we want to support in the engine first. Do we have to support multiple animation rules at a time? It would be nice if we only need to have one animation object in the engine and that is the current animation that's being edited. All the keyframes in the keyframes array are the keyframes being used in that particular animation. Once the user selects another element to be animated, the engine gets the new animation rules or is cleared to start fresh if there was no prior animation.

Personally I like to use key-value to store and query objects, this way it is not needed to repeat the name and it is not possible to add duplicate values.

const animation = {
  keyframes: {
    slideIn: {
      "0%": {
        left: "0"
      },
      "100%": {
        left: "100px"
      }
    },
    slideOut: {
      "0% 50%": {
        left: "100px"
      },
      "100%": {
        left: "0"
      }
    }
  },

  timings: {
    easeBounce: [0, 0.2, 3, 5]
  },

  animation: {
    animationName: "slideIn, slideOut",
    animationDuration: "3s, 2s",
    animationTimingFunction: "easeBounce, easeBounce",
    animationDelay: "0s, 0s",
    animationIterationCount: 1,
    animationDirection: normal,
    animationFillMode: none,
    animationPlayState: running
  }
};

[jolene-borrelli-sociomantic]

We have it now that each keyframe and rule holds its own state and each zoidberg instance contains the keyframe and rules which are stored in arrays.