Skip to content

Instantly share code, notes, and snippets.

@atebitftw
Created December 18, 2012 22:19
Show Gist options
  • Save atebitftw/4332609 to your computer and use it in GitHub Desktop.
Save atebitftw/4332609 to your computer and use it in GitHub Desktop.
Example Buckshot's declarative keyframe animation to CSS3 translation.
<template xmlns='http://buckshotui.org/platforms/html'>
<border name='box1' width='50' height='50' background='Blue'>
<actions>
<!-- declaratively specifying a trigger to play the animation -->
<playanimation event='click' animation='anim1' />
</actions>
</border>
<resourcecollection>
<animationresource key='anim1'>
<keyframes>
<animationkeyframe time='0'>
<states>
<animationstate target='box1' property='translateY' value='0' />
</states>
</animationkeyframe>
<animationkeyframe time='1'>
<states>
<animationstate target='box1' property='translateY' value='20' />
</states>
</animationkeyframe>
<animationkeyframe time='2'>
<states>
<animationstate target='box1' property='translateX' value='300' />
<animationstate target='box1' property='background' value='Orange' />
</states>
</animationkeyframe>
<animationkeyframe time='3'>
<states>
<animationstate target='box1' property='translateY' value='70' />
</states>
</animationkeyframe>
<animationkeyframe time='4'>
<states>
<animationstate target='box1' property='translateX' value='55' />
<animationstate target='box2' property='translateY' value='70' />
<animationstate target='box2' property='rotateZ' value='180' />
</states>
</animationkeyframe>
</keyframes>
</animationresource>
</resourcecollection>
</template>
/*
* CSS3 animation compiler emits...
* (simplified example)
*/
/*
* Percentages are relative transformations of each keyframe's point on the timeline.
* This is the real advantage because in more complex scenarios, the designer can just think in
* terms of keyframes of each element on a timeline and the CSS animation compiler figures out
* all the interpolations of each element in CSS.
*
* In this example, we are only dealing with one element, but the compiler can handle multiple elements
* and would write out keyframe and animation declarations for each of them.
*/
@keyframes anim1 {
0% {translateY(0px);}
25% {translateY(20px);}
50% {translateX(20px); background: Orange}
75% {translateY(70px);}
100% {translateY(35px); translateX(55px); rotateZ(180deg); }
}
/* The framework injects this into the CSS stylesheet when a
* .playAnimation() is called on the 'anim1' resource, or via a
* action declaration in a template as shown above.
*/
#box1{
animation: anim1 4s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment