Home > Developer > Web Develop
Animation is a frame of the screen according to the time interval display,kinetic provides us with a stage object Onframe method, with this method can bind an animation method, we want to display each frame of the animation is done in this method to complete the drawing.
Where this method takes an object frame as a parameter, this parameter object contains two properties, one is frame.time, which indicates thatthe current frame is the number of milliseconds after the start of the animation, and the other property is Frame.timediff, Represents the millisecond difference in time between the current frame and the previous frame. The current frame is judged by what form it is based on these two events. After drawing the current frame, be careful to call draw on the layer where the animation is located , and display the current frame image to the screen.
<script>
stage.onframe (function(frame) {
Update Position
Draw LayeR
});
</script>
The following code shows a circle that swings left and right
<! DOCTYPE html>
<html>
<head>
<meta charset="Utf-8″>
<title>kineticjs</title>
<script src=".. /kinetic.js "></script>
</head>
<body>
<script>
window.onload = function() {
var stage = new kinetic.stage ({
Container: "container",
width:600,
height:400
});
var layer = new kinetic.layer ();
var config = {
x:300,
y:200,
radius:30,
fill: "Red",
Stroke: "Black",
Strokewidth:5
};
var circle = new kinetic.circle (config);
Layer.add (circle);
stage.add (layer);
var amplitude =.
var period = +;
var CenterX = Stage.getwidth ()/2;
Animation Frame definition method
stage.onframe (function(frame) {
Circle
. SetX (Amplitude
* Math.sin (frame.time * 2 * math.pi/period)
+ CenterX);
Layer.draw ();
});
Animation start
Stage.start ();
Animation Stop
Stage.stop ();
};
</Script>
<div id="container"></div>
</body>
</html>
The start and stop of an animation is implemented using the start and stop methods of the stage object .
<script>
var stage = new kinetic.stage ({
});
Animation start
Stage.start ();
Animation Stop
stage.stop ();
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
