Skip to content

Commit

Permalink
Ported web-animation-declarative.js to new API and revived
Browse files Browse the repository at this point in the history 
test-iterations-declarative.html in the process. Some more
error message improvement.
  • Loading branch information
@shans
shans committed Nov 21, 2012
1 parent 675deab commit ece7bf8
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 37 deletions.
40 changes: 20 additions & 20 deletions test-iterations-declarative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,35 +69,35 @@
<div class="anim b"></div>
<div class="anim c"></div>
<div class="anim d"></div>
<par startDelay="1" iterationDuration="5" iterationCount="3" speed="2" direction="normal" startTime="1" id="par">
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .a" id="anim"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" speed="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
<par startDelay="1" duration="5" iterationCount="3" playbackRate="2" direction="normal" startTime="1" id="par">
<animation startDelay="1" duration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .a" id="anim"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" playbackRate="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
</par>
</div>
<div class="animContainer" id="cb">
<div class="anim a"></div>
<div class="anim b"></div>
<div class="anim c"></div>
<div class="anim d"></div>
<par startDelay="1" iterationDuration="5" iterationCount="3" speed="2" direction="reverse" startTime="1">
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .a"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" speed="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
<par startDelay="1" duration="5" iterationCount="3" playbackRate="2" direction="reverse" startTime="1">
<animation startDelay="1" duration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .a"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" playbackRate="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
</par>
</div>
<div class="animContainer" id="cc">
<div class="anim a"></div>
<div class="anim b"></div>
<div class="anim c"></div>
<div class="anim d"></div>
<par startDelay="1" iterationDuration="5" iterationCount="3" speed="2" direction="alternate" startTime="1">
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .a"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" speed="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
<par startDelay="1" duration="5" iterationCount="3" playbackRate="2" direction="alternate" startTime="1">
<animation startDelay="1" duration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .a"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" playbackRate="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
</par>
</div>

Expand All @@ -106,11 +106,11 @@
<div class="anim b"></div>
<div class="anim c"></div>
<div class="anim d"></div>
<par startDelay="1" iterationDuration="5" iterationCount="3" speed="2" direction="alternate-reverse" startTime="1">
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .a"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" speed="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" iterationDuration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" speed="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
<par startDelay="1" duration="5" iterationCount="3" playbackRate="2" direction="alternate-reverse" startTime="1">
<animation startDelay="1" duration="1" iterationCount="2" fill="none" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .a"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="backwards" prop="left" from="100px" to="200px" playbackRate="0.8"startTime="1" resolutionStrategy="selector: .b"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="forwards" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .c"></animation>
<animation startDelay="1" duration="1" iterationCount="2" fill="both" prop="left" from="100px" to="200px" playbackRate="0.8" startTime="1" resolutionStrategy="selector: .d"></animation>
</par>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
Expand Down
38 changes: 25 additions & 13 deletions web-animation-declarative.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,41 @@ function attrAsPixelValue(element, attribute, defaultValue) {
return defaultValue;
}

function resolveProperties(elem) {
var startDelay = attrAsNumber(elem, "startDelay");
var iterationDuration = attrAsNumber(elem, "iterationDuration");
var iterationCount = attrAsNumber(elem, "iterationCount");
var fill = attrAsText(elem, "fill");
function resolveAnimProperties(elem) {
var prop = attrAsText(elem, "prop");
var from = attrAsText(elem, "from");
var to = attrAsText(elem, "to");
var speed = attrAsNumber(elem, "speed");
var result = {}
result[prop] = [from, to];
return result;
}

function resolveTimingProperties(elem) {
var startDelay = attrAsNumber(elem, "startDelay");
var duration = attrAsNumber(elem, "duration");
var iterationCount = attrAsNumber(elem, "iterationCount", 1);
var iterationStart = attrAsNumber(elem, "iterationStart", 0);
var fill = attrAsText(elem, "fill");
var playbackRate = attrAsNumber(elem, "playbackRate");
var startTime = attrAsNumber(elem, "startTime");
var direction = attrAsText(elem, "direction");
var resolutionStrategy = attrAsText(elem, "resolutionStrategy");
var name = elem.id;
return {startDelay: startDelay, iterationDuration: iterationDuration, iterationCount: iterationCount,
fill: fill, prop: prop, from: from, to: to, speed: speed, direction: direction, startTime: startTime,
resolutionStrategy: resolutionStrategy, name: name};
return {startDelay: startDelay, duration: duration, iterationCount: iterationCount, iterationStart: iterationStart,
fill: fill, playbackRate: playbackRate, direction: direction, startTime: startTime, resolutionStrategy: resolutionStrategy, name: name};
}

function instantiateElem(elem) {
var properties = resolveProperties(elem);
var instantiator = elem.tagName == "ANIMATION" ? AnimTemplate : (elem.tagName == "PAR" ? ParAnimGroupTemplate : SeqAnimGroupTemplate);
elem.template = new instantiator(properties, properties.resolutionStrategy);
return properties.startTime;
var animFunc = resolveAnimProperties(elem);
var timing = resolveTimingProperties(elem);
if (elem.tagName == "ANIMATION") {
elem.template = new AnimTemplate(animFunc, timing, timing.resolutionStrategy);
} else if (elem.tagName == "PAR") {
elem.template = new ParAnimGroupTemplate([], timing, timing.resolutionStrategy);
} else {
elem.template = new SeqAnimGroupTemplate([], timing, timing.resolutionStrategy);
}
return timing.startTime;
}

var animations = document.querySelectorAll("animation");
Expand Down
6 changes: 2 additions & 4 deletions web-animation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ var Timing = Class.create({
timingFunc: this.timingFunc ? this.timingFunc.clone() : null,
fill: this.fill
});
}
},
})

function ImmutableTimingProxy(timing) {
Expand Down Expand Up @@ -423,9 +423,7 @@ function _interpretTimingParam(timing) {
if (typeof(timing) === "object") {
return new Timing(timing);
}
try {
throw new Error("TypeError");
} catch (e) { console.log(e.stack); throw e; }
throw new TypeError("timing parameters must be undefined, Timing objects, numbers, or timing dictionaries; not \"" + timing + "\"");
}

// -----------
Expand Down

0 comments on commit ece7bf8

Please sign in to comment.