009_Raphael动画

最新推荐文章于 2024-02-26 17:13:38 发布
最新推荐文章于 2024-02-26 17:13:38 发布
阅读量215 收藏
点赞数
分类专栏： html5游戏 文章标签： javascript ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/118464209
版权

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

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
raphael.js做的一个动画效果
07-02
raphael.js做的一个动画效果 有动画特效 可以缩放 、
raphael动画
weixin_30670965的博客
12-24 84
双击时移动：el.dblclick(function() {this.animate({cx: 500, cy: 500,//最终的属性，动画效果将自动根据最终属性生成}, 500,"bounce"); //时间和特效}); 转载于:https://www.cnblogs.com/tuzkee/archive/2012/12/24/2831338.html...
Raphael.js API之 Animation.delay(),Animation.repeat(),Element.animateWith()
Jinx
06-18 1763
/*API-1,2*/ Animation Animation.delay(delay) 复制一个现有的动画对象并为其设置延迟 参数列表： delay      number类型      动画延迟毫秒数 返回值：最新修改的动画对象 示例： var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); circle1.animat
Raphael.animation()的巧妙用法
王小森的成长博客
05-15 713
利用Raphael.animation()巧妙的实现多个方向动画的效果的实现
Raphael_manual_API.rar
10-25
4. **动画效果**：Raphael提供了强大的动画功能，能够平滑地过渡元素的位置、大小、旋转角度等属性。`Element.animate()`方法可以用于创建自定义动画，而`.fadeIn()`和`.fadeOut()`等预定义方法则简化了常见的动画...
raphaeljs_starter
01-10
《raphaeljs_starter》不仅介绍了RaphaelJS的基本概念，还提供了详尽的代码实践指导，包括如何设置开发环境、如何利用RaphaelJS的API创建图形、如何添加交互性和动画效果，以及如何优化图形性能等内容。此外，书中还...
raphael-min_js_
09-30
通过调用`Raphael(name, width, height)`函数，我们可以指定一个DOM元素ID（name）以及绘图区域的宽度和高度。例如： ```javascript var paper = Raphael('canvas', 640, 480); ``` 在这个绘图区域上，我们可以创建...
Raphael学习之渐变圆和过度动画（六）
风火一回，一生不毁
04-02 1452
1.渐变圆 效果： 2.过渡效果
Raphael入门实例：动画与箭头
dayanwu2842的博客
02-24 84
raphael 实例 动画 隐藏和显示参数说明 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 var c = paper.circle(50, 50, 40); function hide() { c.hide(); setTimeout(show, 1000); } ...
raphael特效示例
01-05
raphael特效示例,使用javaScript也能做出强大的效果
Raphael-Transform:使用 raphael.js 的 SVG 转换工具
06-24
拉斐尔变换 使用 raphael.js 的 SVG 转换工具 为了构建项目，请执行以下步骤： npm install （下载项目的依赖项；你需要在本地机器上安装 npm： : ） gulp （构建项目；你需要安装 gulp： : ） 运行“gulp”命令后，查找将包含应用程序的 /dist 文件夹（index.html）
animate 技术分析 raphael
zha_zi的专栏
07-28 287
svg:使用raphaeljs绘制哆啦A梦并实现动画效果
weixin_30892037的博客
02-05 244
网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画，点击观看演示，兼容性并不好，只有webkit支持动画，ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。 先来看下演示，目前知道的是ie6，7不支持动画，但是绘图还是没有问题的，ie6,7点击观看演示 最近对svg有些研究，先是使用svg代替css3实现qq空间关闭按钮旋转特效，然后是使用svg代替css3绘制op...
Raphael.js API之Paper.image(),Element.animate()
Jinx
06-17 1887
/*API-6*/ Element.animate() 为给定的元素创建和启动动画 参数列表： 1：参数     Object类型     为最终的元素设置属性[比如在Element.drag()中的onend事件中设置元素属性：         function onend()         {             this.animate({"fill-opacity
鼠标移入移出游戏暂停Java_Raphael JS - 在鼠标悬停期间开始/继续制作动画 . 在mouseout上暂停动画...
weixin_40005887的博客
02-26 123
我是一个更优雅的方式来做到这一点，但在我的头顶，你可以尝试这样的事情：http://jsfiddle.net/D6Ps4/2/如果由于某种原因消失，我已经包含下面的代码 . 解决方案只是启动动画，然后检查鼠标光标(注意e.offsetX / e.offsetY)是否在某个设定的时间间隔内在Raphael对象(Element.getBBox())的边界框内 . 如果是，则不执行任何操作并使用setT...
Unicode 15.0 标准已发布，新增鹅、豌豆等 20个emoji
知秋
09-16 1011
Unicode 标准版本 15.0 现已推出，包括核心规范、附件和数据文件。此版本增加了 4，489 个字符，使总数达到 149，186 个字符。这些新增功能包括两个新脚本（共 161 个脚本）、20 个新表情符号字符和 4，193 个 CJK（中文、日文和韩文）表意文字。在流行的符号添加中有20个新的表情符号，包括头发选择，马拉卡斯，水母，khanda和粉红色的心。有关新表情符号字符的完整列表，请参阅。有关 Unicode 标准对表情符号字符支持的详细说明，请参阅。其他符号和符号添加包括：\
快速上手RaphaelJS--RaphaelJS_Starter翻译（三）
kooky博客
09-22 5725
名人名言：美好的思想，没有美好的品德来陪伴，它不过是泡影。——摩索姆达        上篇博文我们讲解到了Raphael的动画、图形变换和鼠标事务的内容，本篇介绍介绍你应用Raphael过程中会高频用到的办法。 那些你必须知道的Raphael办法 Element 办法       这些办法由元素调用。比如我们前面的rect.click（）。 ani
3500个常用汉字及对应的Unicode编码
最新发布
我是jjking`
02-26 2367
今天做测试数据用到了记录下 汉字清单 乙, 一, 乃, 丁, 卜, 刀, 九, 了, 七, 八, 厂, 儿, 二, 几, 力, 人, 入, 十, 又, 久, 丸, 丈, 乞, 乡, 勺, 刃, 亏, 凡, 卫, 亿, 亡, 叉, 川, 寸, 弓, 巾, 女, 尸, 士, 夕, 么, 万, 三, 上, 下, 与, 习, 也, 之, 义, 于, 个, 千, 及, 大, 飞, 干, 工, 广, 己, 已, 口, 马, 门, 山, 才, 土, 小, 子, 丰, 乏, 乌, 丹, 予, 丑, 勾, 勿, 匀, 厅,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值