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. Array.Add () and += in PowerShell

    $newArray = @() $newArray.Add("Hello") If I create a new array, and using the method Add() ...

  2. 在Linux中创建静态库和动态库 （转）

    我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态 库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库在程序编译时并不会被连接到目标代码中,而 ...

  3. Qt的目录依赖问题----怎样生成一个绿色的Qt软件包

    Qt的目录依赖问题----怎样生成一个绿色的Qt软件包 一.核心问题: 如果将编译好的Qt文件拷贝到任何目录下,作为一个绿色软件库来使用? 二.原理讨论 由于Qt在编译的时候将安装路径硬编码到了库文件 ...

  4. DataTabe对象的例子

    前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTable对象 ...

  5. mysql读写分离

    严格意义上讲,MySQL 读.写分离确实存在上述情况,这是由Master-Slave 异步复制存在延迟所导致的,且Master binlog的写入为多线程,而Slave同步的sql_thread为单线 ...

  6. 【浏览器那些基础】Android平台有那些CPU类型

    在编译Android应用的时候,需要配置支持的CPU类型,而目前Android支持的CPU类型包含了ARM和X86,所以在编译前需要指定CPU类型(不同的cpu的特性不一样): X86系列的 expo ...

  7. Network of Schools(强连通分量+缩点） （问添加几个点最少点是所有点连接+添加最少边使图强连通)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 13801   Accepted: 55 ...

  8. Linux下启用Chrome/Firefox的Java插件

    JDK 已经安装好,可是浏览器执行 Java Applet 时提示需安装 Java 插件. 这时,在浏览器安装文件夹中 plugins 文件夹下创建2个重要的符号链接就可以. libnpjp2.so ...

  9. openstack安装配置

    openstack:1.控制节点安装所有,计算节点只有nova-compute:2.网络选择: nova-network还是neutron: nova-network比较简单, neutron功能强大 ...

  10. EF使用时异常：对一个或多个实体的验证失败。有关详细信息

    //最顶级异常中是不提示具体哪个字段验证失败,必须到详细异常类型中查看 try { //EF操作 } catch (System.Data.Entity.Validation.DbEntityVali ...