0
저는 HTML과 kineticjs에서 완전히 새롭습니다. 특정 지점을 중심으로 특정 각도로 이미지를 회전시키는 애니메이션을 만들고 싶습니다. 그런 다음 멈춰야합니다. 나중에 단추를 클릭하여 각도를 제어하는 방법을 구현하고 싶습니다. 그러나 첫 번째 문제 : 이것은 지금까지 코드는 다음과 같습니다kineticjs : 특정 각도로 이미지 회전 및 정지
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.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 yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118,
//offset: [x:250, y: 100]
});
/*var imageObj2 = new Image();
imageObj.onload = function() {
var background = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118,
}); */
// add the shape to the layer
layer.add(yoda);
//layer.add(background)
// add the layer to the stage
stage.add(layer);
var angularSpeed = 360/4;
var anim = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed/1000;
yoda.rotate(angleDiff);
}, layer);
anim.start();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
//other image source
</script>
</body>
</html>
출처 :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/ 그래서 난 후 애니메이션을 정지 할 수있는 방법 - 말 - 50 °? 도움 주셔서 감사합니다.
좋은, 감사합니다! – user1734984