1. 元素变换
1.1. 唯一推荐的元素变换方法是transform()方法。它有4个命令:
- T/t平移
- s缩放
- r按角度旋转
- m变换矩阵
1.2. 旋转和缩放命令的原点坐标为可选参数, 默认的是该元素的中心点。
1.3. 有一点需要注意, transform方法并不改变元素本身的任何状态。无论你平移多少, transform执行后你获得坐标信息仍旧创建元素时的坐标, 但是transform的参数在变化。也就是transform的内容你是可以获得的。无论你执行多少次transform, 它保存着现在状态和创建状态之间的转换内容, 其实transform就是元素本身的一个属性, 而不是去改变元素的其它属性。
1.4. T是绝对平移, 而t是相对平移。绝对, 就是无论其它什么变换我都不管不顾只会去执行我后面紧跟的参数, 所以T执行的是不管你前面转了90度还是没转, 我都x轴平移100px。而相对, 则是我转了90度, 我的头部(假设元素都有一个头部)本来朝右变成了朝下, x轴平移100px, 我们向着x平移100px, 但是实际是去y轴平移了100px, 因为我本来指向x轴的头部变成了y轴方向。
2. 动画效果
2.1. Raphael的图形动画效果可以达到非常平滑的程度, 并且任何属性都可以, 不论是颜色、透明度、宽度、高度还是其它细节。
2.2. Raphael的动画效果方法语法: Element.animate({动画属性的键值对}, 动画时间, 动画类型, 回调函数);
2.3. 动画类型其实就是动画过渡公式, 主要有以下这些类型:
- "linear"(线性)
- "<"或"easeIn"或"ease-in"(由慢到快)
- ">"或"easeOut"或"ease-out"(又快到慢)
- "<>"或"easeInOut"或"ease-in-out"(由慢到快再到慢)
- "backIn"或"back-in"(开始时回弹)
- "backOut"或"back-out"(结束时回弹)
- "elastic"(橡皮筋)
- "bounce"(弹跳)
3. 例子
3.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>Raphael动画</title>
<script type="text/javascript" src="raphael.js"></script>
<style type="text/css">
#sample-1, #sample-2, #sample-3, #sample-4 {
width: 600px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<h1>元素变换-按角度旋转</h1>
<div id="sample-1"></div>
<script type="text/javascript">
var paper1 = Raphael("sample-1", 600, 150);
paper1.rect(20, 20, 60, 40).attr({
"stroke": "red",
"fill": "green"
});
// 以矩形中心点旋转90度
paper1.rect(120, 20, 60, 40).attr({
"stroke": "red"
}).transform("r 90");
// 以220,60的点旋转90度
paper1.rect(220, 20, 60, 40).attr({
"stroke": "red"
}).transform("r 90, 220,60");
</script>
<h1>元素变换-缩放</h1>
<div id="sample-2"></div>
<script type="text/javascript">
var paper2 = Raphael("sample-2", 600, 200);
paper2.rect(20, 20, 60, 40).attr({
"stroke": "red",
"fill": "green"
});
// 矩形缩放1.5倍
paper2.rect(120, 20, 60, 40).attr({
"stroke": "red"
}).transform("s 1.5");
// 矩形缩放1.5倍后, 再缩放1.5倍
paper2.rect(250, 80, 60, 40).attr({
"stroke": "red"
}).transform("s 1.5 s 1.5");
// 以450,110的点, 矩形x边缩放1.5倍, y边缩放2倍
paper2.rect(400, 80, 60, 40).attr({
"stroke": "red"
}).transform("s 1.5,2, 450,110");
</script>
<h1>元素变换-平移</h1>
<div id="sample-3"></div>
<script type="text/javascript">
var paper3 = Raphael("sample-3", 600, 200);
paper3.rect(20, 20, 60, 40).attr({
"stroke": "red",
"fill": "green"
});
var rect31 = paper3.rect(20, 20, 60, 40).attr({
"stroke": "red"
}).transform("r 90 t 100,0");
paper3.text(60, 90, "x: " + rect31.attr('x') + ", y: " + rect31.attr('y') + "\ntransform: " + rect31.transform()).attr({
'font-size': 11,
'fill': 'blue'
});
var rect32 = paper3.rect(20, 20, 60, 40).attr({
"stroke": "red"
}).transform("r 90 T 100,0");
paper3.text(230, 50, "x: " + rect32.attr('x') + ", y: " + rect32.attr('y') + "\ntransform: " + rect32.transform()).attr({
'font-size': 11,
'fill': 'blue'
});
</script>
<h1>动画效果</h1>
<div id="sample-4"></div>
<script type="text/javascript">
var paper4 = Raphael("sample-4", 600, 200);
var rect4 = paper4.rect(20, 20, 60, 40).attr({
"fill": "green"
});
rect4.animate({ transform: "r 90 t 100,0 s 1.5" }, 5000, "bounce", function(){ console.log("finish"); });
</script>
</body>
</html>
3.2. 效果图