利用HTML5 Canvas制作键盘及鼠标动画的实例分享(2/2)
来源：互联网 时间：2016/6/18 20:16:42
JavaScript Code复制内容到剪贴板
-
-
-
-
-
-
- <>"container">
<>"/js/lib/kinetic-v5.0.1.min.js"> <>"defer"> var sw = 578; var sh = 400; var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 400 }); var layer = new Kinetic.Layer({ y: -30 }); var leftEye = new Kinetic.Line({ x: 150, points: [0, 200, 50, 190, 100, 200, 50, 210], tension: 0.5, closed: true, stroke: 'white', strokeWidth: 10 }); var rightEye = new Kinetic.Line({ x: sw - 250, points: [0, 200, 50, 190, 100, 200, 50, 210], tension: 0.5, closed: true, stroke: 'white', strokeWidth: 10 }); var nose = new Kinetic.Line({ points: [240, 280, sw/2, 300, sw-240,280], tension: 0.5, closed: true, stroke: 'white', strokeWidth: 10 }); var mouth = new Kinetic.Line({ points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh], tension: 0.5, closed: true, stroke: 'red', strokeWidth: 10 }); layer.add(leftEye) .add(rightEye) .add(nose) .add(mouth); stage.add(layer); // tweens var leftEyeTween = new Kinetic.Tween({ node: leftEye, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, y: -100, points: [0, 200, 50, 150, 100, 200, 50, 200] }); var rightEyeTween = new Kinetic.Tween({ node: rightEye, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, y: -100, points: [0, 200, 50, 150, 100, 200, 50, 200] }); var noseTween = new Kinetic.Tween({ node: nose, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, y: -100, points: [220, 280, sw/2, 200, sw-220,280] }); var mouthTween = new Kinetic.Tween({ node: mouth, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20] }); stage.getContainer().addEventListener('mouseover', function() { leftEyeTween.play(); rightEyeTween.play(); noseTween.play(); mouthTween.play(); }); stage.getContainer().addEventListener('mouseout', function() { leftEyeTween.reverse(); rightEyeTween.reverse(); noseTween.reverse(); mouthTween.reverse(); }); 
