<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël · Gear</title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="scripts/raphael.js"></script>
<script>
Raphael("holder", 640, 480, function () {
var r = this,
//p = r.path("M295.186,122.908c12.434,18.149,32.781,18.149,45.215,0l12.152-17.736c12.434-18.149,22.109-15.005,21.5,6.986l-0.596,21.49c-0.609,21.992,15.852,33.952,36.579,26.578l20.257-7.207c20.728-7.375,26.707,0.856,13.288,18.29l-13.113,17.037c-13.419,17.434-7.132,36.784,13.971,43.001l20.624,6.076c21.103,6.217,21.103,16.391,0,22.608l-20.624,6.076c-21.103,6.217-27.39,25.567-13.971,43.001l13.113,17.037c13.419,17.434,7.439,25.664-13.287,18.289l-20.259-7.207c-20.727-7.375-37.188,4.585-36.578,26.576l0.596,21.492c0.609,21.991-9.066,25.135-21.5,6.986L340.4,374.543c-12.434-18.148-32.781-18.148-45.215,0.001l-12.152,17.736c-12.434,18.149-22.109,15.006-21.5-6.985l0.595-21.492c0.609-21.991-15.851-33.951-36.578-26.576l-20.257,7.207c-20.727,7.375-26.707-0.855-13.288-18.29l13.112-17.035c13.419-17.435,7.132-36.785-13.972-43.002l-20.623-6.076c-21.104-6.217-21.104-16.391,0-22.608l20.623-6.076c21.104-6.217,27.391-25.568,13.972-43.002l-13.112-17.036c-13.419-17.434-7.439-25.664,13.288-18.29l20.256,7.207c20.728,7.374,37.188-4.585,36.579-26.577l-0.595-21.49c-0.609-21.992,9.066-25.136,21.5-6.986L295.186,122.908z").attr({stroke: "#666", opacity: .3, "stroke-width": 10}),
p = r.path('M 20,170 c130,40,180,150,260,190 z').attr({stroke: "#666", opacity: .3, "stroke-width": 10});
over = r.path().attr({stroke: "#fff"}),
len = p.getTotalLength(),

//移动的小点
e = r.ellipse(0, 0, 7, 3).attr({stroke: "none", fill: "#a34e37"}).onAnimation(function () {
//var t = this.attr("transform");
//over.attr({path: "M316,248L" + t[0][1] + "," + t[0][2] + "z"});
});
//r.circle(316, 248, 5).attr({stroke: "none", fill: "#fff"});
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
e.attr({along: 0});

var rotateAlongThePath = true;
function run() {
e.animate({along: 1}, 2e3, function () {
e.attr({along: 0});
setTimeout(run);
});
}
run();

// logo

});
</script>
</head>
<body>
<div id="holder" style="background-color: #f0f0f0;"></div>
</body>
</html>

Raphael 目标点沿路径不断移动的更多相关文章

  1. [LeetCode] All Paths From Source to Target 从起点到目标点到所有路径

    Given a directed, acyclic graph of N nodes.  Find all possible paths from node 0 to node N-1, and re ...

  2. Algorithm-多目标优化-博文路径

    参考博文: 多目标进化算法(MOEA)概述: https://blog.csdn.net/qithon/article/details/72885053 多目标优化问题的算法及其求解: https:/ ...

  3. 利用 make_plan 规划起点到目标点的路径，并且发布出去

    geometry_msgs::PoseStamped Start; Start.header.seq = ; Start.header.stamp = Time(); Start.header.fra ...

  4. 路径查找算法应用之A*算法

    环境:Visual Studio 2017 + .Net Framework 4.5 应用场景:在画板上查找起始点和目标点之间的最短最直路径,最后画出连接两个点之间的折线. 算法简介:A*算法是一种性 ...

  5. 用GL画出人物的移动路径

    注意:用Debug画的线会存在穿透问题 没啥好解释的,直接看代码: using UnityEngine; using System.Collections; using System.Collecti ...

  6. Raphael Js矢量库API简介：

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  7. idea编译器中maven项目获取路径的方法

    资源文件放在哪里? 上 图中的 resources 目录叫资源目录 (main下,与java如果没有请自行创建), 在项目编译后文件会被放到红色的 classes 目录下, 注意如果你的 resour ...

  8. 访问servlet的路径问题

    一.url-pattern的三种配置 在web.xml配置文件中配置有关Servlet的时候,<url-pattern>标签是用于配置当前Servlet拦截的路径,也就是说,客户端浏览器访 ...

  9. [Swift]LeetCode113. 路径总和 II | Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

随机推荐

  1. python 行转列

    #encoding=utf- print '中国' #二维阵列变换 行转化成列,列转化成行 lista=[[,,],[,,],[,,],[,,]] #使用列表推导 listb=[[r[col] ])) ...

  2. [转载]点评阿里云、盛大云等国内IaaS产业

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:刘黎明      原文地址:http://www.chinacloud.org ...

  3. EXT4.2--Ext Designer 使用

    前言: “画EXT”是一个美好的想法,如果有一款可视化工具能够只需进行拖拽而设计EXT,生成代码--那真是一件美丽的事.然而现实是,即使是为Eclipse装上EXT插件,用上idea,手写代码的提示也 ...

  4. Java多线程——<二>将任务交给线程，线程声明及启动

    一.任务和线程 <thinking in java>中专门有一小节中对线程和任务两个概念进行了具体的区分,这也恰好说明任务和线程是有区别的. 正如前文所提到的,任务只是一段代码,一段要达成 ...

  5. 关于navicat连接oracle 报 ORA-12737 set CHS16GBK错误的解决方案

    [转]关于navicat连接oracle 报 ORA-12737 set CHS16GBK错误的解决方案 昨天下载安装了navicat 9.0 Premium(高级英文版),连接mysql正常,看到他 ...

  6. javascript分享到的源码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 李洪强iOS开发之【Objective-C】08-self关键字

    一.Java中的this只能用在动态方法中,不能用在静态方法中 1.在动态方法中使用this关键字 1 public class Student { 2 private int age; 3 publ ...

  8. 李洪强iOS开发之上传照片时英文改中文

    今天在做项目的时候,有一个功能是上传照片选择系统相册的照片,或者拍照上传照片,但是页面上的文字是英文的, 需求想改成中文的,解决方法是在 info.plist里面添加 Localized resour ...

  9. Project Euler 80：Square root digital expansion 平方根数字展开

    Square root digital expansion It is well known that if the square root of a natural number is not an ...

  10. *[topcoder]LongWordsDiv2

    http://community.topcoder.com/stat?c=problem_statement&pm=13147 此题关键在于发现ABAB的组合最多有26*26种,可以穷举,然后 ...