Die folgenden zwei Beispiele zeigen, wie das Tweening und Easing mit KineticJS und mit den CreateJS-Bestandteilen EaselJS und TweenJS funktioniert. Das Beispiel zeigt ein HTML5-Logo in der linken oberen Canvas-Ecke und transformiert dieses Logo beim Anklicken in Richtung Mitte.
CreateJS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CreateJS: EaselJS & TweenJS</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } </style> </head> <body> <canvas id="container" width="800" height="600"></canvas> <script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script> <script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script> <script> // Set-up stage var container = document.getElementById("container"); var stage = new Stage(container); stage.mouseEventsEnabled = true; // Set-up layer var layer = new Container(); // Set-up image var image = new Image(); image.src = "./images/html5-logo.png"; // Append image to object var object = new Bitmap(image); object.x = 0; object.y = 0; // Recognize click on object object.onPress = function(event){ // Tweening & Easing Tween.get(object).to({ x: 222, y: 333 },1000,Ease.bounceInOut); }; // Add object to layer layer.addChild(object); // Add layer to stage stage.addChild(layer); // Render Ticker.setFPS(20); Ticker.addListener(stage, false); </script> </body> </html> |
KineticJS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>KineticJS</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } </style> </head> <body> <div id="container"></div> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.4.js"></script> <script> // Set-up stage var stage = new Kinetic.Stage({ container: "container", width: 800, height: 600 }); // Set-up layer var layer = new Kinetic.Layer(); // Set-up image var image = new Image(); image.onload = function(){ // Append image to object var object = new Kinetic.Image({ x: 0, y: 0, image: this, detectionType: "pixel" }); // Recognize click on object object.on("click touchend", function(){ // Tweening & Easing object.transitionTo({ x: 222, y: 333, duration: 1, easing: "ease-in-out" }); }); // Add object to layer layer.add(object); layer.draw(); object.saveData(); }; image.src = "./images/html5-logo.png"; // Add layer to stage and render stage.add(layer); </script> </body> </html> |
I have chosen KineticJS because the "click touchend" still works if you use it in connection with this code (to prevent iOS bumping and scrolling on mobile devices):
<script> document.ontouchstart = document.ontouchmove = document.ontouchend = function(event){ event.preventDefault(); }; </script> |
The object.onPress function of EaselJS will not work with the code above.