[英]How to create an scaling animation in Kinetic.js?
I have the following code that is supposed to scale up a shape on mouseover and then scale it back to its original size on mouseout. 我有以下代码,应该在鼠标悬停时放大形状,然后在鼠标悬停时将其缩放回其原始大小。 I have a few problems:
我有几个问题:
All I need is a shape that get's bigger slowly when it is moused over, and then returns to its original size when mouse is out. 我需要的是一个形状,当将鼠标悬停在其上时会慢慢变大,然后在鼠标移出时返回其原始大小。
<div id="container"></div>
<script src="js/kinetic.min.js" charset="utf-8"></script>
<script defer="defer" type="text/javascript">
function zoomHex() {
}
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var shapesLayer = new Kinetic.Layer();
var hex = new Kinetic.RegularPolygon({
x: 250,
y: 250,
sides: 6,
radius: 80,
fill: '#00D2FF',
stroke: '#00D2FF',
strokeWidth: 30,
lineJoin: 'round'
});
var zoomIn = new Kinetic.Animation(function(frame) {
var period = 1000;
var duration = 1000;
zoomAmount = 1;
var scale =frame.time / period;
hex.setScale(frame.time / period + zoomAmount);
if(frame.time > duration) {
zoomIn.stop();
this.frame.time = 0;
}
}, shapesLayer);
var zoomOut = new Kinetic.Animation(function(frame) {
var period = 1000;
var duration = 1000;
zoomAmount = 2;
hex.setScale(frame.time / period - zoomAmount);
if(frame.time > duration) {
zoomOut.stop();
this.frame.time = 0;
}
}, shapesLayer);
hex.on('mouseover', function() {
zoomIn.start();
//zoomIn.stop();
});
hex.on('mouseleave', function() {
zoomOut.start();
//zoomOut.stop();
});
shapesLayer.add(hex);
stage.add(shapesLayer);
</script>
For this purpose, I would suggest using a Kinetic.Tween
instead of a Kinetic.Animation
为此,我建议使用
Kinetic.Tween
而不是Kinetic.Animation
See this tutorial for basic tween usage: http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/ 有关补间的基本用法,请参见本教程: http : //www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/
var tween = new Kinetic.Tween({
node: hex,
duration: 1, // <--2) How do I end the animation in a certain time?
scaleX: 1.5 // <-- 1) How do I change the scale amount?
scaleY: 1.5 // <-- 1) How do I change the scale amount?
});
//3) How do I do 1 and 2 without causing a glitch.
//4) When the mouse pointer passes over the shape fast, some frames jump suddenly.
hex.on('mouseover', function() {
tween.play();
});
hex.on('mouseleave', function() {
tween.reverse();
});
So when you mouseover
the hex shape, the tween will play forward and tween the scale to 1.5 (from 1.0 which is the default scale). 因此,当您将
mouseover
在十六进制形状上时,补间将向前播放,并将补间缩放到1.5 (默认值是1.0)。 When you mouseleave
the tween will reverse back to the original state of the hex shape. 当您
mouseleave
,补间将恢复为十六进制形状的原始状态。
NOTE: Technically, you should be able to use the scale
property instead of scaleX
and scaleY
like this: 注意:从技术上讲,您应该能够使用
scale
属性来代替scaleX
和scaleY
如下所示:
var tween = new Kinetic.Tween({
node: hex,
duration: 1, //time in seconds
scale: 1.5 //should scale both x and y
});
But for some reason, it didn't work for me. 但是由于某种原因,它对我不起作用。 You can give it a shot though if you'd like.
您也可以尝试一下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.