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);
}
 
function show() {
  c.show();
  setTimeout(hide, 1000);
}
 
setTimeout(hide, 1000);
 

改变属性参数说明

1
2
3
4
5
6
7
8
9
10
var c = paper.circle(50, 50, 40);
 
function change_attr() {
  //改变颜色
  c.attr('stroke', Raphael.hsb(Math.random(), 1, 1));
 
  setTimeout(change_attr, 1000);
}
 
setTimeout(change_attr, 1000);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var c = paper.circle(50, 50, 40);
 
function change_one_attr() {
  //改变一个属性
  c.attr('stroke', '#FFF');
 
  setTimeout(change_muti_attr, 1000);
}
 
function change_muti_attr() {
  //改变多个属性
  c.attr({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
    r: 10 * (Math.random() * 5 + 1),            //半径
    stroke: Raphael.hsb(Math.random(), 1, 1)  //颜色
  });
 
  setTimeout(change_one_attr, 1000);
}
 
setTimeout(change_one_attr, 1000);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 绘制箭头
var c = paper.path("M10 10L100 10").attr({
  'arrow-end':'classic-wide-long',
  stroke: "#fff",
  "stroke-width": 2
});
 
var c = paper.path("M10 30L100 30").attr({
  'arrow-end':'block-wide-long',
  stroke: "#f00",
  "stroke-width": 2
});
 
var c = paper.path("M10 50L100 50").attr({
  'arrow-end':'open-wide-long',
  stroke: "#ff0",
  "stroke-width": 2
});
 
var c = paper.path("M10 70L100 70").attr({
  'arrow-end':'oval-wide-long',
  stroke: "#0f0",
  "stroke-width": 2
});
 
var c = paper.path("M10 90L100 90").attr({
  'arrow-end':'diamond-wide-long',
  stroke: "#0ff",
  "stroke-width": 2
});
 

动画参数说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 1000;       // 播放动画,持续时间1000毫秒
 
  c.animate({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
  }, ms);
 
  setTimeout(animate, 2000);
}
 
setTimeout(animate, 1000);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 效果同上,但是利用了动画结束时的回调函数
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 1000;
 
  c.animate({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
  }, ms, function(){
    setTimeout(animate, 1000);
  });
}
 
setTimeout(animate, 1000);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 效果同上,使用动画对象
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 1000;
  var anim = Raphael.animation({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
  }, ms, function(){
    setTimeout(animate, 1000);
  });
 
  c.animate(anim);
}
 
setTimeout(animate, 1000);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 效果同上,调用动画对象的delay()方法
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 1000;
  var anim = Raphael.animation({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
  }, ms, function(){
    setTimeout(animate, 0);
  });
 
  c.animate(anim.delay(1000));
}
 
setTimeout(animate, 0);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 动画对象的过渡效果及repeat()方法
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 2000;
  var anim = Raphael.animation({
    50: {
      r: 60,
      stroke: '#f00'
    },
    100: {
      r: 40,
      stroke: '#fff'
    }
  }, ms);
 
  c.animate(anim.repeat("Infinity")); //Infinity为无限次
}
 
animate();
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 设置效果的曲线类型
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 1000;
  var easing = 'elastic';
 
  c.animate({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
  }, ms, easing, function(){
    setTimeout(animate, 1000);
  });
}
 
setTimeout(animate, 1000);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 设置随机曲线类型
var c = paper.circle(50, 50, 40);
 
function animate() {
  var ms = 1000;
  var easing = ['elastic', '', 'bounce', 'ease-in-out'][Math.round(Math.random() * 3)];
 
  c.animate({
    cx: 50 + Math.random() * 120,               //圆心x坐标
    cy: 50 + Math.random() * 100,               //圆心y坐标
  }, ms, easing, function(){
    setTimeout(animate, 1000);
  });
}
 
setTimeout(animate, 1000);

Raphael入门实例：动画与箭头的更多相关文章

  1. Raphael入门实例：绘图

    raphael 实例 开始 创建画布参数说明 创建一个画布对象. 下面每个例子都会创建一个320*200大小的画布. ? 1 2 // 1.在视口的 (10,50) 坐标位置上创建画布 var pap ...

  2. let import export React入门实例教程 connect provider combineReducers 箭头函数 30分钟掌握ES6/ES2015核心内容 Rest babel

    let与var的区别 http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html es6 导入导出 http://www.csdn.ne ...

  3. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  4. struts入门实例

    入门实例 1  .下载struts-2.3.16.3-all  .不摆了.看哈就会下载了. 2  . 解压  后 找到 apps 文件夹. 3.    打开后将 struts2-blank.war   ...

  5. Vue.js2.0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

  6. wxPython中文教程入门实例

    这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下     wxPython中文教程入门实例 wx.Window 是一个基类 ...

  7. Omnet++ 4.0 入门实例教程

    http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用. ...

  8. Spring中IoC的入门实例

    Spring中IoC的入门实例 Spring的模块化是很强的,各个功能模块都是独立的,我们可以选择的使用.这一章先从Spring的IoC开始.所谓IoC就是一个用XML来定义生成对象的模式,我们看看如 ...

  9. Node.js入门实例程序

    在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...

随机推荐

  1. django 实现指定文件合并成压缩文件下载

    需求是在一列学生列表中选择指定的学生,然后下载他们上传的报告文档.

  2. oracle，如何查看视图结构，获得视图中的字段名称、字段类型、字段长度等。

    需要获得一个视图中的字段名称.字段类型.字段长度等信息,该如何编写sql语句.通过select * from user_views可以获得给定用户下所有的视图名称了,但是没找到如何获取视图结构的解决方 ...

  3. TMOUT

    设置TMOUT可以踢用户,直接从shell端. 实际上如果ssh或telnet也可以在其配置里面设定.

  4. WINDOWS硬件通知应用程序的常方法

    摘要:在目前流行的Windows操作系统中,设备驱动程序是操纵硬件的最底层软件接口.为了共享在设备驱动程序设计过程中的经验,给出设备驱动程序通知应用程序的5种方法,详细说明每种方法的原理和实现过程,并 ...

  5. (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示

    原文 (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windows She ...

  6. BZOJ 1088 扫雷Mine （递推）

    题解:如果确定了第一排前两个数,那么剩下的数是唯一确定的,所以只要分情况讨论即可. #include <cstdio> #include <cstring> int n,a[1 ...

  7. Android调用系统关机与重启功能

    我是在android源码里编译的package/apps/,因为需要调用的关机接口是不对上层开放的,在eclipse里面不能调用. 我主要是介绍调用android的关机功能,因为在调试过程中,关机的一 ...

  8. C#中foreach语句的迭代器实现机制

    C#中的foreach语句可用于循环遍历某个集合中的元素,而所有的只要支持了IEnumerable或IEnumerable<T>泛型接口的类型都是可以 用foreach遍历的.其具体的遍历 ...

  9. cookie保存分页参数

    <script src="../Public/js/jquery.cookie.js"></script> <script type="te ...

  10. seajs + easyui [转]

    * *content seajs+easyui使用 */ /** * 首先来看看在seajs中jquery和jquery插件如何使用 */ 1.jquery.js define(function(re ...