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. Java Web 入门（一）使用 Intellij IDEA 14.1.5 创建 Maven Web项目

    1.基础配置 1.1 安装 JDK1.7,配置系统变量:JAVA_HOME 和 Path 1.2 安装 Tomcat 7.0 1.3 安装  Intellij IDEA 14.1.5 1.4 Mave ...

  2. Matplotlib中文乱码

    想要分析一批数据,画出图形会比较直观.所以就搜索了一下各种软件,最终选择使用python的matplotlib.原因也是因为python使用起来比较方便,虽然R才是分析数据的首选,不过,没有R的基础, ...

  3. 推荐一些socket工具，TCP、UDP调试、抓包工具 推荐一些socket工具，TCP、UDP调试、抓包工具

    还记得我在很久很久以前和大家推荐的Fiddler和Charles debugger么?他们都是HTTP的神器级调试工具,非常非常的好用.好工具能让你事半功倍,基本上,我是属于彻头彻尾的工具控. 假如有 ...

  4. Adobe Flash Player已经终止一项可能不安全的操作，解决方案

    http://www.macromedia.com/support/documentation/cn/flashplayer/help/settings_manager04.html

  5. 大数据时代之hadoop(五)：hadoop 分布式计算框架（MapReduce）

    大数据时代之hadoop(一):hadoop安装 大数据时代之hadoop(二):hadoop脚本解析 大数据时代之hadoop(三):hadoop数据流(生命周期) 大数据时代之hadoop(四): ...

  6. 【监控】使用probe对tomcat服务进行监控

    1.运行环境(博主本地) JDK:jdk1.6 Tomcat:tomcat7 OS:Windows10 2.下载 点击下载 3.安装运行 1.解压,将probe文件夹复制放进tomcat里面的weba ...

  7. Null指针

    C++ Null 指针 C++ 指针 C++ 指针 在变量声明的时候,如果没有确切的地址可以赋值,为指针变量赋一个 NULL 值是一个良好的编程习惯.赋为 NULL 值的指针被称为空指针. NULL ...

  8. JavaSE学习总结第04天_Java基础语法3

      04.01 选择结构switch语句的格式及其解释 switch语句的格式: switch(表达式) {    case 值1:语句体1;break;    case 值2:语句体2;break; ...

  9. struts2 convention-plugin

    导入这个插件,该插件的作用是替换掉struts.xml 原则是没有配置,全是约定 基本步骤 1.新建HomeAction,里面有个execute方法return success,请求home.acti ...

  10. frame和bounds的区别

    frame:根据父视图坐标系来确定自己的位置 bounds:该视图在自己坐标系的位置和大小 修改bounds并不会引起视图位置的变化,会影响自身子视图的位置:修改frame会引起视图位置的变化 UIV ...