009_Raphael动画

原创于 2021-07-04 17:05:18 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ecmascript #前端

html5游戏专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Raphael库中如何使用transform方法进行元素的平移、旋转和缩放，展示了其动画效果的灵活性，通过实例代码演示了动画的创建和不同过渡类型的运用。

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. 效果图