<!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. UVA 11149 Power of Matrix 快速幂

    题目链接: http://acm.hust.edu.cn/vjudge/contest/122094#problem/G Power of Matrix Time Limit:3000MSMemory ...

  2. 母函数入门笔记（施工中…

    定义:对于一个数列,它的母函数(即生成函数)为   为了对这个准确求值,我们设    举一个简单的例子 例1 对于数列 他的生成函数为 ,那么应用一下等比数列求和公式 这里由于 所以当时 那么   例 ...

  3. hibernate4.0中SessionFactory的创建

    创建SessionFactory 首先创建Configuration对象,主要方式是: new Configuration().configure() 默认情况下Hibernate会去classPat ...

  4. [转载]c# OpenFileDialog

    string resultFile = ""; OpenFileDialog openFileDialog1 = new OpenFileDialog();            ...

  5. Unity3D–Texture图片空间和内存占用分析（转载）

    原地址:http://www.unity蛮牛.com/home.php?mod=space&uid=1801&do=blog&id=756 Texture图片空间和内存占用分析 ...

  6. C语言关键字register、extern、static

    C语言中: 一.register变量 关键字regiter请求编译器尽可能的将变量存在CPU的寄存器中.有以下几点注意的地方. register变量必须是能被CPU寄存器所接受的类型,这通常意味着re ...

  7. [Hibernate]dynamic-insert和dynamic-update属性

    这二个属性默认情况均为false,你可以通过以下二种方式进行配置使用: 1.Annotation @Entity @Table(name = "stock_transaction" ...

  8. Android service的开启和绑定，以及调用service的方法

    界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  9. 解决Unable to load R3 module ...VBoxDD.dll (VBoxDD):GetLastError=1790

    解决Unable to load R3 module ...VBoxDD.dll (VBoxDD):GetLastError=1790 参考文章:http://blog.sina.com.cn/s/b ...

  10. Project Euler 84:Monopoly odds 大富翁几率

    Monopoly odds In the game, Monopoly, the standard board is set up in the following way:             ...