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源码解析——Stack类

    在java中,Stack类继承了Vector类.Vector类和我们经常使用的ArrayList是类似的,底层也是使用了数组来实现,只不过Vector是线程安全的.因此可以知道Stack也是线程安全的 ...

  2. Apache proxy中转设置

    参考http://sjsky.iteye.com/blog/1067119 打开http.conf  (macOS中 Apache配置文件在/etc/apache2/中   etc是隐藏的) 确保下面 ...

  3. BootStrap学习2 typeahead

    首先看看这些 http://www.wrapcode.com/bootstrap/typeahead-json-objects/ http://stackoverflow.com/questions/ ...

  4. MVC-03 控制器（5）

    八.动作过滤器 有时在运行Action之前或之后会需要运行一些逻辑运算,以及处理一些运行过程中所生成的异常状况,为了满足这个需求,ASP.NET MVC提供动作过滤器(Action Filter)来处 ...

  5. SQL中采用Newtonsoft.Json处理json字符串

    原文 SQL中采用Newtonsoft.Json处理json字符串 使用环境: SQL Server2005; VS2010; 关于SQL中部署CLR程序集的方法,网上一搜一大把,需要了解的自行查阅, ...

  6. Binary Tree Level Order Traversal II --leetcode C++

    考察点 广度优先遍历--层次遍历 STL内容器的用法 广度优先遍历的时候,首先应该想到的就是借助于队列.还需要在遍历下一层之前保存当前层节点的数量 代码很简单: class Solution { pu ...

  7. 一个异或加密方案--C语言实现

    核心代码: char encrypt( char f , char c) { return f^c; } int OutEncrypt( char *FilePath, char *SecretWor ...

  8. Struts2 学习笔记15 Struts标签 part1

    来说一下Struts标签,之前我们也很多地方用到了,还是来总结一下. 首先是property标签. <li>property:<s:property value="user ...

  9. 【iOS知识学习】_UITableView简介

    UITableView在iOS中估计是用的最多的控件了吧,几乎每个app都会用到. 一.它是一个非常重要的类来在table中展示数据. 1.是一个一维的表: 2.是UIScrollView的一个子类: ...

  10. C#编辑基础笔记

    目录 1.     .NET .NET Framework是一种多语言的平台,一种技术. 而c#是基于其上面的一种语言.    1 2.     Winform 桌面应用程序[从.net平台上面开发的 ...