HTML5----kinetic，CSS3(Canvas)--小丑动画

显示效果图：

hover后效果图：

小丑动画CODE-HTML:

<div id="container" style="width:600px; height:400px;"></div>

JS: 需要引入 kinetic.js包

<script type="text/javascript" src="js/kinetic-v5.1.0.min.js"></script>

kinetic1.线性变化

“Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换，也就是从原始的状态线性变换到新的状态，这里的状态是指的尺度上的参数。方法的config参数也就是有关图形尺度的一些参数，比如 x， y， rotation， width， height， radius， strokeWidth， alpha， scale，centerOffset等。除了这些尺度参数，还需要一个duration参数，单位是秒，也就是指定这种线性变换是在多长时间内变换完成”

<script>
shape.transitionTo({
	x : 100,
	alpha : 0,
	duration : 2
});
</script>

kinetic2.变换中的速度

Kinetic的transitionTo(config)方法中的config参数包括一个easing属性，是指的变换是以较均匀的速度到达变换目的点还是在变换过程中在不同位置以不同速度进行变换。Easing可以设定的值包括ease-in、 ease-out、 ease-in-out、 back-ease-in、 back-ease-out、 back-ease-in-out、 elastic-ease-in、 elastic-ease-out、 elastic-ease-in-out、 bounce-ease-in、bounce-ease-out、 bounce-ease-in-out、 strong-ease-in、 strong-ease-out以及strong-ease-in-out。

<script>
shape.transitionTo({
	x: 100,
	duration: 1,
	easing: ‘ease-out’
});
</script>

kinetic3.变换完成后的回调方法

Kinetic的transitionTo(config)方法中的config参数还包括一个回调方法属性，这个方法会在变换完成后被执行。

<script>
shape.transitionTo({
	x: 100,
	duration: 1,
	easing: “bounce-ease-out”,
	callback: function() {
	alert(“transition complete!”);
	}
});
</script>

kinetic4.变换的开始与结束

当执行transitionTo方法的时候可以返回一个对象变量，并用这个对象的 start()、 stop() 和resume()方法来启动、停止和恢复转换的执行

<script>
var trans = shape.transitionTo(config);

// 开始转换
trans.start();

// 停止转换
trans.stop();

// 恢复转换
trans.resume();
</script>

小丑动画CODE--JS:

<script defer="defer">
var sw = 600;
var sh = 400;
var stage = new Kinetic.Stage({
	container : 'container',
	width : 600,
	height : 400
});
var layer = new Kinetic.Layer({
	y : -30
});

// draw left eys
var leftEye = new Kinetic.Line({
	x : 150,
	points : [ 0, 200, 50, 190, 100, 200, 50, 210 ],
	tension : 0.5,
	closed : true,
	stroke : 'green',
	strokeWidth : 10
});

// draw right eys
var rightEye = new Kinetic.Line({
	x : sw - 250,
	points : [ 0, 200, 50, 190, 100, 200, 50, 210 ],
	tension : 0.5,
	closed : true,
	stroke : 'green',
	strokeWidth : 10
});

// draw nose
var nose = new Kinetic.Line({
	points : [ 240, 280, sw / 2, 300, sw - 240, 280 ],
	tension : 0.5,
	closed : true,
	stroke : 'yellow',
	strokeWidth : 10
});

// draw mouth
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);

// left eye 动画
var leftEyeTween = new Kinetic.Tween({
	node : leftEye,
	duration : 1,
	easing : Kinetic.Easings.ElasticEaseOut,
	y : -100,
	points : [ 0, 200, 50, 150, 100, 200, 50, 200 ]
});

// right eye 动画
var rightEyeTween = new Kinetic.Tween({
	node : rightEye,
	duration : 1,
	easing : Kinetic.Easings.ElasticEaseOut,
	y : -100,
	points : [ 0, 200, 50, 150, 100, 200, 50, 200 ]
});

// nose 动画
var noseTween = new Kinetic.Tween({
	node : nose,
	duration : 1,
	easing : Kinetic.Easings.ElasticEaseOut,
	y : -100,
	points : [ 220, 280, sw / 2, 200, sw - 220, 280 ]
});

// mouth 动画
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();
});
</script>