<!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. 【BZOJ】【1022】【SHOI2008】小约翰的游戏John

    博弈论 一看题,哇这不是Nim游戏么= =直接异或起来……啊咧怎么不对? 这道题是[Anti-Nim],普通的Nim是取走最后一个就赢,这题是取走最后一个输…… 做法参见 2009年贾志豪论文< ...

  2. 【娱乐】高端小游戏Manufactoria

    Manufactoria 是一款游戏.游戏中,一家生产机器人的工厂内部出了一 些问题,生产出来的机器人有很多不合格的.一个机器人可以用一个含有红色和 蓝色的颜色串来描述,只有颜色串符合某种规律的机器人 ...

  3. uva 10303

    卡特兰数  但是个高精度 一开始用最普通的递推式 超时了 百度百科了一下 用另类递推式过了 ~~ 这个大数类是做数据结构课程设计的时候写的... #include <cstdio> #in ...

  4. POJ2186 Popular Cows 强连通分量tarjan

    做这题主要是为了学习一下tarjan的强连通分量,因为包括桥,双连通分量,强连通分量很多的求法其实都可以源于tarjan的这种方法,通过一个low,pre数组求出来. 题意:给你许多的A->B ...

  5. PHP中发送邮件的几种方法总结

    1. 使用 mail() 函数 没什么好讲的,就是使用系统自带的smtp系统来发送,一般是使用sendmail来发.这个按照各个系统不同而定.使用参考手册. 2. 使用管道的形式 昨天刚测试成功,使用 ...

  6. Oracle 6 - 锁和闩 - transaction的可串行化

    本文主要内容 1.transaction的可串行化 2.数据库并发带来的问题, dirty read, Nonrepeatable reads, Phantoms幻读 3.隔离级别和2中的问题 4. ...

  7. DP：LCS（最长公共子串、最长公共子序列）

    1. 两者区别 约定:在本文中用 LCStr 表示最长公共子串(Longest Common Substring),LCSeq 表示最长公共子序列(Longest Common Subsequence ...

  8. 只有innoDB才允许使用外键

    1.只有InnoDB引擎才允许使用外键,所以,我们的数据表必须使用InnoDB引擎. 2.注意: 1.必须使用InnoDB引擎: 2.外键必须建立索引(INDEX): 3.外键绑定关系这里使用了“ O ...

  9. Linux基础--分类与合并命令

    1.sortsort命令将许多不同的域按不同的顺序分类,sort命令的一般格式为: sort -cmu -o output_file [other options] +pos1 +pos2 input ...

  10. 如何实现Windows Phone代码与Unity相互通信（直接调用）

    我之前用了两篇文章写了WP与Unity相互通信.调用的办法,一个是事件,一个是插件. 这次来说个更简单的,我觉得这应该是Unity发布到WP或者Win Store上得天独厚的优势.毕竟都是C#. 懒得 ...