animation-composition
Version:
Compose Sprite Animation Layers
134 lines (116 loc) • 4.3 kB
HTML
<html>
<head>
<style>
body { background: #666; }
div { margin: 30px 10px; z-index: 1000; }
</style>
</head>
<body>
<canvas id="images"></canvas>
<canvas id="sprite"></canvas>
<canvas id="new"></canvas>
<div>
<label><input type="checkbox" name="debug" onchange="handleCheck(this);" />Debug?</label>
</div>
<div>
<input type="range" oninput="handleRange(this);" />
</div>
<script src="/dist/animation-composition.js"></script>
<script>
const options = {
isDebug: false,
debugOffset: 100,
};
let animationOne;
let animationTwo;
// Example interface
handleCheck = (el) => {
options.isDebug = el.checked;
renderAnimationsWithOptions(options);
};
handleRange = (el) => {
if (!options.isDebug) return;
options.debugOffset = parseInt(el.value) * 2;
animationOne.updateDebugOffset(options.debugOffset);
animationTwo.updateDebugOffset(options.debugOffset);
};
const renderAnimationsWithOptions = opts => {
const { Animation, Layer, MaskLayer, ColorLayer, Utils } = animationComposition.default
const { imageStringIterator } = Utils;
const PATH = '/example/';
const avatarImage = 'https://s.gravatar.com/avatar/71984c1e86b3a6dce833f047d4d000cc?size=50&default=retro';
const makeAnimationOne = () => {
const color = 'fuchsia';
const canvas = document.querySelector('#images');
const border = new Layer({
images: imageStringIterator(`${PATH}ripple-images/border/ripple_border_XX_xhdpi.png`, 0, 29)
});
const colorLayer = new ColorLayer({ color });
const fill = new Layer({
images: imageStringIterator(`${PATH}ripple-images/fill/ripple_fill_XX_xhdpi.png`, 0, 29)
});
const participantLayer = new MaskLayer({ mask: fill, layers: [ colorLayer ]});
const avatarMask = new Layer({ images: imageStringIterator(`${PATH}ripple-images/mask/ripple_mask_XX_xhdpi.png`, 0, 29) });
const avatarImageLayer = new Layer({ images: [ avatarImage ], sizeRef: avatarMask });
const avatarLayer = new MaskLayer({ mask: avatarMask, layers: [ avatarImageLayer ]});
return new Animation({
ticksPerFrame: 1,
canvas,
layers: [ border, participantLayer, avatarLayer ],
debug: opts.isDebug,
debugOffset: opts.debugOffset,
});
};
if (animationOne) animationOne.destroy();
animationOne = makeAnimationOne();
const makeAnimationTwo = () => {
const color = 'steelblue';
const canvas = document.querySelector('#sprite');
const border = new Layer({
sprite: {
sheet: `${PATH}ripple-sprite/ripple_border@2x.png`,
size: 132,
frames: 30,
},
});
const colorLayer = new ColorLayer({ color });
const fill = new Layer({
sprite: {
sheet: `${PATH}ripple-sprite/ripple_fill@2x.png`,
size: 132,
frames: 30,
},
});
const participantLayer = new MaskLayer({ mask: fill, layers: [ colorLayer ]});
const avatarMask = new Layer({
sprite: {
sheet: `${PATH}ripple-sprite/ripple_mask@2x.png`,
size: 132,
frames: 30,
},
});
const avatarImageLayer = new Layer({
images: [ avatarImage ],
size: {
width: 80,
height: 80,
x: 26,
y: 26,
},
});
const avatarLayer = new MaskLayer({ mask: avatarMask, layers: [ avatarImageLayer ]});
return new Animation({
ticksPerFrame: 1,
canvas,
layers: [ participantLayer, avatarLayer, border ],
debug: opts.isDebug,
debugOffset: opts.debugOffset,
});
};
if (animationTwo) animationTwo.destroy();
animationTwo = makeAnimationTwo();
};
renderAnimationsWithOptions(options);
</script>
</body>
</html>