ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Animate Position, Rotation, Scale and Alpha</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<script>
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT sets canvas and stage to dimensions and scales to fit inside window size
// FILL sets canvas and stage to dimensions and scales to fit outside window size
// FULL sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Animate Position, Rotation, Scale and Alpha (2016 - updated 2022)
// see also https://zimjs.com/animation/
// STEPS
// 1. make an object to move or animate
// 2. use the animate() method of the object
// NOTE: as of ZIM Cat (after version TEN) time is in SECONDS!
// use TIME = "milliseconds"; to go back to milliseconds
// 1. make an object
const circle = new Circle(50, green) // radius, color
.loc(700, 200) // loc places the registration point - pos(700, 200) would position top left corner of object at 700 200
// 2. call animate to animate the object's x and y in a number in seconds
// you can supply a string ease and there are many other parameters (see docs)
.animate({x:200, y:200}, 1, "backOut");
// or animate to where the cursor is when clicking background
// S is the global variable for the ZIM stage and F is the global variable for the ZIM frame
S.on("stagemousedown", function() { // collect event object with mouse position info
circle
.top() // bring to top
.animate({x:F.mouseX, y:F.mouseY}, .5); // default ease is quadInOut
});
// Below we set the from parameter to true so we are animating from the property values provided
// to the default settings above (rotation = 0, scaleX and scaleY = 1);
// this means we do not need to start by setting scale to 0 before we animate
// it also means that when we turn off animations with ANIMATE = false
// then we can "skip" the animation while we are working on the project to save time!
// this may sound trivial, but it is quite handy - we no longer have to comment out animations, etc.
// try it by uncommenting below - note that the circle animation runs before we set ANIMATE
// also, the circle was not set up with the from parameter anyway...
// see https://zimjs.com/ornamate.html for a more complete example
// ANIMATE = false;
// 1. make an object - this time we will scale it into view
new Rectangle(80, 80, blue) // width, height, color
.centerReg() // centers and adds to stage
// 2. delay 2 second, spin the object once and call a function to play a sound
// use the props parameter to specify the properties to animate - this was once an obj parameter but props is the new name as of ZIM 7.1
// here was use the ZIM DUO technique of a configuration object having the property names the same as the parameter names of animate()
.animate({
props:{rotation:-360, scale:0}, // note we are using from - so we animate from rotation -360 to 0 and scale 0 to 1
time:1.5,
ease:"backOut",
call:playSound,
params:"bigSound",
wait:2,
from:true
});
function playSound(s) {
zog(s); // we could preload and play a sound with asset(sound).play();
}
// 1. make a triangle fade in and out five times
// to loop forever, do not include count:5 parameter
new Triangle(100, 100, 100, pink) // side lengths, color
.pos(150, 200, RIGHT, BOTTOM) // 150 from right and 200 from bottom
// 2. animate the alpha of the triangle
// to animate something into view just do these two lines
// .alp(0)
// .animate({alpha:1}, 2)
// below we test out the loop, rewind and count props of the tween
// you can also set loopWait, loopCall, loopParams, rewindWait, rewindCall and rewindParams (see docs)
.animate({
props:{alpha:0},
time:1,
rewind:true,
loop:true,
loopCount:5
});
// EXTRA
// if you do not send any parameters when calling a function after tweening
// then an automatic parameter of the target of the tween is passed
const docItems = "Frame,Circle,Rectangle,Triangle,animate,pos,top,alp,centerReg,zog,ANIMATE,OPTIMIZE,Ticker"
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>