Skip to content

Commit a28eb1a

Browse files
rjwrightrjwright
committed
Merge pull request #310 from rjwright/KeyframeTerminology
Fix Keyframe terminology & rename some files
2 parents c374bb7 + 77b05d1 commit a28eb1a

9 files changed

+67
-67
lines changed

‎src/keyframe-effect.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,19 @@
3030

3131
scope.KeyframeEffect = function(target, effectInput, timingInput) {
3232
var effectTime = EffectTime(shared.normalizeTimingInput(timingInput));
33-
var keyframes = scope.convertEffectInput(effectInput);
33+
var interpolations = scope.convertEffectInput(effectInput);
3434
var timeFraction;
3535
var keyframeEffect = function() {
3636
WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined');
37-
keyframes(target, timeFraction);
37+
interpolations(target, timeFraction);
3838
};
3939
// Returns whether the keyframeEffect is in effect or not after the timing update.
4040
keyframeEffect._update = function(localTime) {
4141
timeFraction = effectTime(localTime);
4242
return timeFraction !== null;
4343
};
4444
keyframeEffect._clear = function() {
45-
keyframes(target, null);
45+
interpolations(target, null);
4646
};
4747
keyframeEffect._hasSameTarget = function(otherTarget) {
4848
return target === otherTarget;

‎src/effect.js‎ renamed to ‎src/keyframe-interpolations.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
(function(shared, scope, testing) {
1616

1717
scope.convertEffectInput = function(effectInput) {
18-
var keyframeEffect = shared.normalizeKeyframes(effectInput);
19-
var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframeEffect);
18+
var keyframes = shared.normalizeKeyframes(effectInput);
19+
var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframes);
2020
var interpolations = makeInterpolations(propertySpecificKeyframeGroups);
2121
return function(target, fraction) {
2222
if (fraction != null) {
@@ -39,16 +39,16 @@
3939
};
4040

4141

42-
function makePropertySpecificKeyframeGroups(keyframeEffect) {
42+
function makePropertySpecificKeyframeGroups(keyframes) {
4343
var propertySpecificKeyframeGroups = {};
4444

45-
for (var i = 0; i < keyframeEffect.length; i++) {
46-
for (var member in keyframeEffect[i]) {
45+
for (var i = 0; i < keyframes.length; i++) {
46+
for (var member in keyframes[i]) {
4747
if (member != 'offset' && member != 'easing' && member != 'composite') {
4848
var propertySpecificKeyframe = {
49-
offset: keyframeEffect[i].offset,
50-
easing: keyframeEffect[i].easing,
51-
value: keyframeEffect[i][member]
49+
offset: keyframes[i].offset,
50+
easing: keyframes[i].easing,
51+
value: keyframes[i][member]
5252
};
5353
propertySpecificKeyframeGroups[member] = propertySpecificKeyframeGroups[member] || [];
5454
propertySpecificKeyframeGroups[member].push(propertySpecificKeyframe);

‎src/normalize-keyframes.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -167,12 +167,12 @@
167167

168168
function normalizeKeyframes(effectInput) {
169169
if (!Array.isArray(effectInput) && effectInput !== null)
170-
throw new TypeError('Keyframe effect must be null or an array of keyframes');
170+
throw new TypeError('Keyframes must be null or an array of keyframes');
171171

172172
if (effectInput == null)
173173
return [];
174174

175-
var keyframeEffect = effectInput.map(function(originalKeyframe) {
175+
var keyframes = effectInput.map(function(originalKeyframe) {
176176
var keyframe = {};
177177
for (var member in originalKeyframe) {
178178
var memberValue = originalKeyframe[member];
@@ -205,8 +205,8 @@
205205
var everyFrameHasOffset = true;
206206
var looselySortedByOffset = true;
207207
var previousOffset = -Infinity;
208-
for (var i = 0; i < keyframeEffect.length; i++) {
209-
var offset = keyframeEffect[i].offset;
208+
for (var i = 0; i < keyframes.length; i++) {
209+
var offset = keyframes[i].offset;
210210
if (offset != null) {
211211
if (offset < previousOffset) {
212212
throw {
@@ -221,24 +221,24 @@
221221
}
222222
}
223223

224-
keyframeEffect = keyframeEffect.filter(function(keyframe) {
224+
keyframes = keyframes.filter(function(keyframe) {
225225
return keyframe.offset >= 0 && keyframe.offset <= 1;
226226
});
227227

228228
function spaceKeyframes() {
229-
var length = keyframeEffect.length;
230-
if (keyframeEffect[length - 1].offset == null)
231-
keyframeEffect[length - 1].offset = 1;
232-
if (length > 1 && keyframeEffect[0].offset == null)
233-
keyframeEffect[0].offset = 0;
229+
var length = keyframes.length;
230+
if (keyframes[length - 1].offset == null)
231+
keyframes[length - 1].offset = 1;
232+
if (length > 1 && keyframes[0].offset == null)
233+
keyframes[0].offset = 0;
234234

235235
var previousIndex = 0;
236-
var previousOffset = keyframeEffect[0].offset;
236+
var previousOffset = keyframes[0].offset;
237237
for (var i = 1; i < length; i++) {
238-
var offset = keyframeEffect[i].offset;
238+
var offset = keyframes[i].offset;
239239
if (offset != null) {
240240
for (var j = 1; j < i - previousIndex; j++)
241-
keyframeEffect[previousIndex + j].offset = previousOffset + (offset - previousOffset) * j / (i - previousIndex);
241+
keyframes[previousIndex + j].offset = previousOffset + (offset - previousOffset) * j / (i - previousIndex);
242242
previousIndex = i;
243243
previousOffset = offset;
244244
}
@@ -247,7 +247,7 @@
247247
if (!everyFrameHasOffset)
248248
spaceKeyframes();
249249

250-
return keyframeEffect;
250+
return keyframes;
251251
}
252252

253253
shared.normalizeKeyframes = normalizeKeyframes;

‎target-config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
'src/scope.js'];
1919

2020
var webAnimations1Src = [
21-
'src/effect.js',
21+
'src/keyframe-interpolations.js',
2222
'src/property-interpolation.js',
2323
'src/keyframe-effect.js',
2424
'src/apply-preserving-inline-style.js',
@@ -43,7 +43,7 @@
4343
];
4444

4545
var liteWebAnimations1Src = [
46-
'src/effect.js',
46+
'src/keyframe-interpolations.js',
4747
'src/property-interpolation.js',
4848
'src/keyframe-effect.js',
4949
'src/apply.js',
@@ -83,8 +83,8 @@
8383
'test/js/box-handler.js',
8484
'test/js/color-handler.js',
8585
'test/js/dimension-handler.js',
86-
'test/js/effect.js',
8786
'test/js/interpolation.js',
87+
'test/js/keyframes.js',
8888
'test/js/matrix-interpolation.js',
8989
'test/js/number-handler.js',
9090
'test/js/property-interpolation.js',

‎test/js/group-animation.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ suite('group-animation', function() {
427427

428428
test('redundant effect node wrapping', function() {
429429
tick(100);
430-
var keyframeEffect = new SequenceEffect([
430+
var sequenceEffect = new SequenceEffect([
431431
this.staticEffect(this.target, '0px', 1),
432432
new GroupEffect([
433433
new SequenceEffect([
@@ -436,7 +436,7 @@ suite('group-animation', function() {
436436
]),
437437
]),
438438
]);
439-
var animation = document.timeline.play(keyframeEffect);
439+
var animation = document.timeline.play(sequenceEffect);
440440
assert.equal(getComputedStyle(this.target).marginLeft, '0px');
441441
checkTimes(animation, [100, 0], [
442442
[100, 0, 0, 0], [[ // 0
@@ -649,11 +649,11 @@ suite('group-animation', function() {
649649

650650
test('Setting the playbackRate on sequence animations updates child timing. ' +
651651
'Any children who are not finished go into effect.', function() {
652-
var sequence = new SequenceEffect([
652+
var sequenceEffect = new SequenceEffect([
653653
new KeyframeEffect(null, [], 1000),
654654
new KeyframeEffect(null, [], 1000),
655655
]);
656-
var a = document.timeline.play(sequence);
656+
var a = document.timeline.play(sequenceEffect);
657657
tick(0);
658658

659659
a.playbackRate = 2;
@@ -759,11 +759,11 @@ suite('group-animation', function() {
759759
);
760760

761761
test('Reversing a sequence animation updates child timing correctly', function() {
762-
var sequence = new SequenceEffect([
762+
var sequenceEffect = new SequenceEffect([
763763
new KeyframeEffect(null, [], 1000),
764764
new KeyframeEffect(null, [], 1000),
765765
]);
766-
var a = document.timeline.play(sequence);
766+
var a = document.timeline.play(sequenceEffect);
767767
tick(0);
768768

769769
a.playbackRate = 2;
@@ -851,7 +851,7 @@ suite('group-animation', function() {
851851
// 0
852852
// 33
853853
// 2
854-
var keyframeEffect = new GroupEffect([
854+
var groupEffect = new GroupEffect([
855855
new GroupEffect([
856856
this.staticEffect(this.target, '4px', {duration: 3, delay: 1}),
857857
this.staticEffect(this.target, '1px', {duration: 1, delay: 0}),
@@ -862,7 +862,7 @@ suite('group-animation', function() {
862862
this.staticEffect(this.target, '2px', {duration: 1, delay: -2}),
863863
]),
864864
]);
865-
var animation = document.timeline.play(keyframeEffect);
865+
var animation = document.timeline.play(groupEffect);
866866
tick(100);
867867
checkTimes(animation, [100, 0], [
868868
[
@@ -893,7 +893,7 @@ suite('group-animation', function() {
893893
// 0
894894
// 33
895895
// 2
896-
var keyframeEffect = new SequenceEffect([
896+
var sequenceEffect = new SequenceEffect([
897897
new SequenceEffect([
898898
this.staticEffect(this.target, '1px', {duration: 2, endDelay: 2}),
899899
this.staticEffect(this.target, '4px', {duration: 1, endDelay: 1}),
@@ -904,7 +904,7 @@ suite('group-animation', function() {
904904
this.staticEffect(this.target, '2px', {duration: 1, endDelay: 2}),
905905
]),
906906
]);
907-
var animation = document.timeline.play(keyframeEffect);
907+
var animation = document.timeline.play(sequenceEffect);
908908
tick(100);
909909
checkTimes(animation, [100, 0], [
910910
[
@@ -1397,8 +1397,8 @@ suite('group-animation', function() {
13971397
test('playState works for groups', function() {
13981398
var target = document.createElement('div');
13991399
document.body.appendChild(target);
1400-
var keyframeEffect = new SequenceEffect([new KeyframeEffect(target, [], 100), new KeyframeEffect(target, [], 100)]);
1401-
var a = document.timeline.play(keyframeEffect);
1400+
var sequenceEffect = new SequenceEffect([new KeyframeEffect(target, [], 100), new KeyframeEffect(target, [], 100)]);
1401+
var a = document.timeline.play(sequenceEffect);
14021402
assert.equal(a.playState, 'pending');
14031403
tick(1);
14041404
assert.equal(a.playState, 'running');
@@ -1433,8 +1433,8 @@ suite('group-animation', function() {
14331433
test('pausing then seeking out of range then seeking into range works', function() {
14341434
var target = document.createElement('div');
14351435
var keyframeEffect = new KeyframeEffect(target, [], {duration: 2000, fill: 'both'});
1436-
var group = new GroupEffect([keyframeEffect], {fill: 'none'});
1437-
var animation = document.timeline.play(group);
1436+
var groupEffect = new GroupEffect([keyframeEffect], {fill: 'none'});
1437+
var animation = document.timeline.play(groupEffect);
14381438

14391439
animation.pause();
14401440
animation.currentTime = 3000;
@@ -1450,8 +1450,8 @@ suite('group-animation', function() {
14501450
test('reversing then seeking out of range then seeking into range works', function() {
14511451
var target = document.createElement('div');
14521452
var keyframeEffect = new KeyframeEffect(target, [], {duration: 2000, fill: 'both'});
1453-
var group = new GroupEffect([keyframeEffect], {fill: 'none'});
1454-
var animation = document.timeline.play(group);
1453+
var groupEffect = new GroupEffect([keyframeEffect], {fill: 'none'});
1454+
var animation = document.timeline.play(groupEffect);
14551455

14561456
animation.currentTime = 1000;
14571457
tick(100);
@@ -1474,8 +1474,8 @@ suite('group-animation', function() {
14741474
this.target,
14751475
[{marginLeft: '0px'}, {marginLeft: '100px'}],
14761476
{duration: 500, fill: 'none'});
1477-
var group = new GroupEffect([keyframeEffect], {fill: 'none'});
1478-
var animation = document.timeline.play(group);
1477+
var groupEffect = new GroupEffect([keyframeEffect], {fill: 'none'});
1478+
var animation = document.timeline.play(groupEffect);
14791479

14801480
tick(0);
14811481
assert.equal(getComputedStyle(this.target).marginLeft, '0px');

‎test/js/effect.js‎ renamed to ‎test/js/keyframes.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function leftAsNumber(target) {
44
return Number(left.substring(0, left.length - 2));
55
}
66

7-
suite('effect', function() {
7+
suite('keyframes', function() {
88
// Test normalize.
99
test('Normalize keyframes with all offsets specified but not sorted by offset. Some offsets are out of [0, 1] range.', function() {
1010
var normalizedKeyframes;
@@ -430,7 +430,7 @@ suite('effect', function() {
430430
});
431431
});
432432

433-
suite('effect-convertEffectInput', function() {
433+
suite('keyframe-interpolations - convertEffectInput', function() {
434434
setup(function() {
435435
this.target = document.createElement('div');
436436
this.target.style.position = 'absolute';
@@ -442,57 +442,57 @@ suite('effect-convertEffectInput', function() {
442442
});
443443

444444
test('Convert effect input for a simple keyframe list with one property.', function() {
445-
var effectInputFunction;
445+
var keyframeInterpolations;
446446
assert.doesNotThrow(function() {
447-
effectInputFunction = webAnimations1.convertEffectInput([
447+
keyframeInterpolations = webAnimations1.convertEffectInput([
448448
{left: '0px'},
449449
{left: '200px', offset: 0.3},
450450
{left: '100px'}
451451
]);
452452
});
453453

454-
effectInputFunction(this.target, 0);
454+
keyframeInterpolations(this.target, 0);
455455
assert.closeTo(leftAsNumber(this.target), 0, 0.001);
456-
effectInputFunction(this.target, 0.075);
456+
keyframeInterpolations(this.target, 0.075);
457457
assert.closeTo(leftAsNumber(this.target), 50, 0.001);
458-
effectInputFunction(this.target, 0.15);
458+
keyframeInterpolations(this.target, 0.15);
459459
assert.closeTo(leftAsNumber(this.target), 100, 0.001);
460-
effectInputFunction(this.target, 0.65);
460+
keyframeInterpolations(this.target, 0.65);
461461
assert.closeTo(leftAsNumber(this.target), 150, 0.001);
462-
effectInputFunction(this.target, 1);
462+
keyframeInterpolations(this.target, 1);
463463
assert.closeTo(leftAsNumber(this.target), 100, 0.001);
464-
effectInputFunction(this.target, 2);
464+
keyframeInterpolations(this.target, 2);
465465
assert.closeTo(leftAsNumber(this.target), -42.856, 0.01);
466466
});
467467

468468
test('Convert effect input where one property is animated and the property has two keyframes at offset 1.', function() {
469-
var effectInputFunction;
469+
var keyframeInterpolations;
470470
assert.doesNotThrow(function() {
471-
effectInputFunction = webAnimations1.convertEffectInput([
471+
keyframeInterpolations = webAnimations1.convertEffectInput([
472472
{left: '0px', offset: 0},
473473
{left: '20px', offset: 1},
474474
{left: '30px'}
475475
]);
476476
});
477-
effectInputFunction(this.target, 1);
477+
keyframeInterpolations(this.target, 1);
478478
assert.equal(getComputedStyle(this.target).left, '30px');
479-
effectInputFunction(this.target, 2);
479+
keyframeInterpolations(this.target, 2);
480480
assert.equal(getComputedStyle(this.target).left, '30px');
481481
});
482482

483483
test('Convert effect input and apply result at fraction null.', function() {
484-
var effectInputFunction;
484+
var keyframeInterpolations;
485485
var underlying = getComputedStyle(this.target).left;
486486
assert.doesNotThrow(function() {
487-
effectInputFunction = webAnimations1.convertEffectInput([
487+
keyframeInterpolations = webAnimations1.convertEffectInput([
488488
{left: '0px'},
489489
{left: '100px'}
490490
]);
491491
});
492492

493-
effectInputFunction(this.target, 1);
493+
keyframeInterpolations(this.target, 1);
494494
assert.equal(getComputedStyle(this.target).left, '100px');
495-
effectInputFunction(this.target, null);
495+
keyframeInterpolations(this.target, null);
496496
assert.equal(getComputedStyle(this.target).left, underlying);
497497
});
498498
});

‎web-animations-next-lite.dev.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<script src="src/timing-utilities.js"></script>
1919
<script src="src/normalize-keyframes.js"></script>
2020
<script src="src/deprecation.js"></script>
21-
<script src="src/effect.js"></script>
21+
<script src="src/keyframe-interpolations.js"></script>
2222
<script src="src/property-interpolation.js"></script>
2323
<script src="src/keyframe-effect.js"></script>
2424
<script src="src/apply.js"></script>

‎web-animations-next.dev.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<script src="src/timing-utilities.js"></script>
1919
<script src="src/normalize-keyframes.js"></script>
2020
<script src="src/deprecation.js"></script>
21-
<script src="src/effect.js"></script>
21+
<script src="src/keyframe-interpolations.js"></script>
2222
<script src="src/property-interpolation.js"></script>
2323
<script src="src/keyframe-effect.js"></script>
2424
<script src="src/apply-preserving-inline-style.js"></script>

‎web-animations.dev.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<script src="src/timing-utilities.js"></script>
1919
<script src="src/normalize-keyframes.js"></script>
2020
<script src="src/deprecation.js"></script>
21-
<script src="src/effect.js"></script>
21+
<script src="src/keyframe-interpolations.js"></script>
2222
<script src="src/property-interpolation.js"></script>
2323
<script src="src/keyframe-effect.js"></script>
2424
<script src="src/apply-preserving-inline-style.js"></script>

0 commit comments

Comments
 (0)