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. 通过读取excel数据和mysql数据库数据做对比（二）-代码编写测试

    通过上一步,环境已搭建好了. 下面开始实战, 首先,编写链接mysql的函数conn_sql.py import pymysql def sql_conn(u,pwd,h,db): conn=pymy ...

  2. android LayoutInflater的使用

    看其继承关系: public abstract class LayoutInflater extends Object java.lang.Object ↳ android.view.LayoutIn ...

  3. JAVA堆与栈

    数据类型: Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身 ...

  4. 查看Xcode所使用Swift的版本

    查看Swift版本 $ xcrun swift -version 查看Xcode位置 $ xcrun --find swift 参考链接:http://stackoverflow.com/questi ...

  5. 使用 Media Center 遥控器（Windows Vista Premium）

    本文适用于安装了 Windows Vista Premium 并附带遥控器的 HP 和 Compaq 台式电脑. 本文简要介绍了三种Windows Media Center 遥控器上每个按钮的功能. ...

  6. Qt5位置相关函数异同详解（附源码）

    Qt5中提供了丰富的位置和区域大小相关函数.下面讲一讲他们的区别. 主要函数: 1.x(),y(),pos():获取整个窗体左上角的坐标位置. 2.frameGeometry():获取整个窗体左上角的 ...

  7. Ubuntu系统下在Eclipse中使用真实手机运行调试Android应用

    本文是在Ubuntu下已搭建好JRE+Eclipse+AndroidSDK的环境中进行的. 如果从未进行过如下的操作的话,在运行Android应用时,在设备选择器那里你的手机会显示为一大串" ...

  8. Android开发之旅：android架构

    本篇将站在顶级的高度——架构,来看android.我开篇就说了,这个系列适合0基础的人且我也是从0开始按照这个步骤来 学的,谈架构是不是有点螳臂挡车,自不量力呢?我觉得其实不然,如果一开始就对整个an ...

  9. hadoop权威指南 chapter1 Meet Hadoop

    Meet Hadoop 1.1 Data!(数据) Most of the data is locked up in the largest web properties (like search e ...

  10. JavaSE学习总结第08天_面向对象3

      08.01 工具类中使用静态 例: class ArrayTool { //将构造方法私有,外界不能创建该类的对象 private ArrayTool(){} //遍历数组 public stat ...