Raphael.js绘制循环动画

来源：互联网发布：软件功能ppt介绍编辑：程序博客网时间：2024/06/16 16:46

今天有人叫我帮看了一个程序；

需要实现的是点击按钮，椭圆线段的一段移动到另外一端；椭圆所关联的另一条线段路径也随之改变；再次点击按钮，效果反之；

不多说了两种代码；

第一种是我做的；

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Raphael</title><script src="../js/jquery.js"></script><script src="../js/raphael.js"></script><script>var paper;var state = false;var e;$(function(){paper = new Raphael("holder",640,480);var path = paper.path("M 10,10 L 10,300");var over = paper.path("M 10 10 L 316 248").attr("stroke","red");var circle = paper.circle(316, 248, 5).attr({stroke : "none",fill : "red"});e = paper.ellipse(10, 10, 7, 3).attr({stroke : "none",fill : "red"});e.onAnimation(function() {console.log(this)var x = this.attr("cx");var y = this.attr("cy");over.attr({path : "M 316,248L" +x+ "," +y+ "",stroke : "red"});});})function start(){if(state){e.animate({"cx":10,"cy":10},3000);state = false;}else{e.animate({"cx":10,"cy":300},3000);state = true;}}  </script></head><body><div id="holder"></div><input type="button"  value="click"  onclick="start()" ></body></html>

第二种是他修改的

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Raphael</title><script src="../js/raphael.js"></script><script>Raphael("holder", 640, 480, function() {var r = this, p = r.path("M10,10L10,300"), flag = 0, over = r.path().attr({stroke : "#fff"}), len = p.getTotalLength(), e = r.ellipse(0, 0, 7, 3).attr({stroke : "none",fill : "red"}).onAnimation(function() {var t = this.attr("transform");over.attr({path : "M316,248L" + t[0][1] + "," + t[0][2] + "z",stroke : "red"});});r.circle(316, 248, 5).attr({stroke : "none",fill : "red"});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});pathButton = r.image("按钮图片地址", 510, 288, 50, 43).attr({cursor : "pointer",title : "xxx"}).click(function() {if (flag == 0) {e.animate({along : 1}, 2e4, function() {e.attr({along : 1});});flag = 1;} else {e.animate({along : 0}, 2e4, function() {e.attr({along : 0});});flag = 0;}});});</script></head><body><div id="holder"></div></body></html>

两种都能实现

效果图基本如下：

0 0