Raphael入门实例：动画与箭头

最新推荐文章于 2021-07-04 17:05:18 发布
最新推荐文章于 2021-07-04 17:05:18 发布
阅读量84 收藏
点赞数
原文链接：http://www.cnblogs.com/stephenykk/p/3564000.html
版权

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);

转载于:https://www.cnblogs.com/stephenykk/p/3564000.html

dayanwu2842
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
raphael.js做的一个动画效果
07-02
raphael.js做的一个动画效果 有动画特效 可以缩放 、
raphael动画
weixin_30670965的博客
12-24 84
双击时移动：el.dblclick(function() {this.animate({cx: 500, cy: 500,//最终的属性，动画效果将自动根据最终属性生成}, 500,"bounce"); //时间和特效}); 转载于:https://www.cnblogs.com/tuzkee/archive/2012/12/24/2831338.html...
009_Raphael动画
aihiao的专栏
07-04 215
1. Unicode对照表ED00-FFFF 1.1. 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Unicode对照表ED00-FFFF</title> <meta charset="utf-8" /> &
Raphael.js API之 Animation.delay(),Animation.repeat(),Element.animateWith()
Jinx
06-18 1763
/*API-1,2*/ Animation Animation.delay(delay) 复制一个现有的动画对象并为其设置延迟 参数列表： delay      number类型      动画延迟毫秒数 返回值：最新修改的动画对象 示例： var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); circle1.animat
Raphael.js API之Paper.image(),Element.animate()
Jinx
06-17 1887
/*API-6*/ Element.animate() 为给定的元素创建和启动动画 参数列表： 1：参数     Object类型     为最终的元素设置属性[比如在Element.drag()中的onend事件中设置元素属性：         function onend()         {             this.animate({"fill-opacity
raphael-boolean:与Raphaël执行布尔运算
05-05
raphael.boolean.js-使用Raphaël执行布尔运算 该插件为javascript矢量库Raphaël（ ）提供了布尔操作。 您可以使用单个元素（而不是集合）来执行 联合[A + B | A或B] 差异[A-B | A NOT B] 交集[A * B | A和B] ...
Raphael-Transform:使用 raphael.js 的 SVG 转换工具
06-24
使用 raphael.js 的 SVG 转换工具 为了构建项目，请执行以下步骤： npm install （下载项目的依赖项；你需要在本地机器上安装 npm： : ） gulp （构建项目；你需要安装 gulp： : ） 运行“gulp”命令后，查找将...
raphael-test:使用 RaphaelJS 显示的定义高度的随机树
06-23
这个项目对于学习 JavaScript 和图形编程尤其有价值，因为它展示了如何将算法与可视化技术相结合。 首先，让我们深入了解 RaphaelJS。RaphaelJS 支持在所有现代浏览器以及 Internet Explorer 6+ 上运行，提供了一个...
Raphael 开发中国省份地图 加入箭头功能
03-04
该 Demo 是使用 Raphael 制作中国省份地图，结合 jquery 实现一 些动态点击效果，并且使用扩展 Raphael 内核，可以动态调整地图画布的大 小，还实现了点击动态生成箭头数据的开发，在一个画布上勾勒箭头图形，具 ...
dtg.raphael.js:放大缩小拖拽插件
05-21
dtg.raphael.js 放大缩小拖拽插件 使用方法 var options = { //常规设置 width:600, //画布宽度 height:500, //画布高度 zoom:0.5, //放大比例 begin:0.3, // end:0.8, // silder:{ //操作条参数 x: ...
Raphael绘制流程图箭头的方法
前进中的蜗牛
03-12 2101
原项目使用的Raphael绘制流程图，要求能自定义箭头的样式和颜色，结合从网上找到的一些资料进行修改。 1.使用Raphael自带的箭头样式，代码与箭头的样式对应如下：var c = r.path("M10 10L100 10").attr({ 'arrow-end': 'classic-wide-long', stroke: "#0000ff",
Raphael.animation()的巧妙用法
王小森的成长博客
05-15 713
利用Raphael.animation()巧妙的实现多个方向动画的效果的实现
[Shader]一个箭头动画
weixin_30892987的博客
08-17 739
<1>效果图 <2>源码： // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt) Shader "Tang/UIUpDown"{ Properties { [PerRendererData]...
Raphael学习之渐变圆和过度动画（六）
风火一回，一生不毁
04-02 1452
1.渐变圆 效果： 2.过渡效果
Uniapp软件库全新带勋章功能/包含前后端源码
08-14
Uniapp软件库全新带勋章功能，搭建好后台 在前端找到 util 这个文件 把两个js文件上面的填上自己的域名，电脑需要下载：HBuilderX 登录账号 没有账号就注册账号，然后上传文件，打包选择 “发行” 可以打包app h5等等。 后端安装： 1、下载源码到服务器目录 2、设置运行目录为 public 3、配置伪静态 4、修改数据库账号密码config/database.php点击导入， 5、访问域名即可
【独家首发】基于矮猫鼬优化算法DMOA-GMDH的锂电池寿命SOC估计算法研究Matlab实现.rar
最新发布
08-14
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
基于Android五子棋设计与实现.docx
08-14
基于Android五子棋设计与实现.docx
MultiVideoDemo.rar
08-14
MultiVideoDemo.rar 博客地址：https://lw112190.blog.csdn.net/article/details/141200926
精通RaphaelJS：互动2D图形与动画入门
"raphaeljs_starter" 是一个关于 RaphaelJS 的教程，旨在帮助读者快速掌握这个强大的跨浏览器矢量图形库，用于轻松创建交互式的2D图形和动画。这本书由 A. Krishnasagar 撰写，由 Packt Publishing 出版。 Raphael...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值