KineticJS: How can I use an SVG Sprite with KineticJS Sprites?
Question
I have a SVG sprite with looks like the following schema:
Image Image Image
Image Image Image
Image Image Image
Where Image is an image and all nine images are the sprite. They are all on one layer.
There is a tutorial for sprites with PNG files here but I could not find how to make SVG files work.
How do I set the coordinates for the frames when I use an SVG sprite? How do I use an SVG sprite?
Edit: Here is the code for the tutorial.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-color: #222;
display: inline-block;
width: 580px;
height: 202px;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<input type="button" id="punch" value="Punch">
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var blob = new Kinetic.Sprite({
x: 250,
y: 40,
image: imageObj,
animation: 'idle',
animations: {
idle: [
// x, y, width, height (4 frames)
2,2,70,119,
71,2,74,119,
146,2,81,119,
226,2,76,119
],
punch: [
// x, y, width, height (3 frames)
2,138,74,122,
76,138,84,122,
346,138,120,122
]
},
frameRate: 7,
frameIndex: 0
});
// add the shape to the layer
layer.add(blob);
// add the layer to the stage
stage.add(layer);
// start sprite animation
blob.start();
var frameCount = 0;
blob.on('frameIndexChange', function(evt) {
if (blob.animation() === 'punch' && ++frameCount > 3) {
blob.animation('idle');
frameCount = 0;
}
});
document.getElementById('punch').addEventListener('click', function() {
blob.animation('punch');
}, false);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';
</script>
</body>
</html>
1 answers
solution1
1 2014-07-15 14:31:10
As you provided no code, click here to get the idea and have some nice tutorial regarding the frame by frame animation of SVGs. I'd never recommend it though, simply because you'll have a vector based element on each frame whose anchor points, curves etc behave independently from each other. So for just a small part to animate, it will have to load all of the points, colors over and over again. You can create a SVG that animates instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.