<!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. SQL SERVER字符串函数

    本篇文章还是学习<程序员的SQL金典>内容的记录,此次将讲解的是SQL SERVER的字符串函数. 其实数据库跟程序语言库一样,都会集成很多可以使用的API.这些API,如果你熟悉的话,将 ...

  2. Introduction To Monte Carlo Methods

    Introduction To Monte Carlo Methods I’m going to keep this tutorial light on math, because the goal ...

  3. 11个实用jQuery日历插件

    1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...

  4. POJ 1723

    #include <iostream> #include <algorithm> #define MAXN 10005 using namespace std; struct ...

  5. POJ 1191 棋盘分割（DP）

    题目链接 题意 : 中文题不详述. 思路 : 黑书上116页讲的很详细.不过你需要在之前预处理一下面积,那样的话之后列式子比较方便一些. 先把均方差那个公式变形, 另X表示x的平均值,两边平方得 平均 ...

  6. Android Drawable 关于selector中state_pressed="true"的位置顺序

    界面中有一个按钮使用这样的样式: <?xml version="1.0" encoding="utf-8"?> <selector xmlns ...

  7. Java学习笔记之：Java的数据类型

    一.介绍 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. Java语言提供了八种基本类型 ...

  8. C++工具系列博文合集

    http://www.cnblogs.com/itech/category/240779.html

  9. Android：创建Android工程

    创建Android工程,在Eclipse左栏右键 new->project..   (版本不一样,名字会有所区别) 然后选择Android下的Android application projec ...

  10. NSRange

    int main(int argc, const char * argv[]) {    @autoreleasepool {        // insert code here...       ...