Raphael.js 2.0动画翻译变量不一致?(新手)

Raphael.js 2.0 animate translation with variable inconsistency? (noob)

本文关键字：不一致 新手 变量 翻译 js 动画 Raphael      更新时间：2023-09-26

我试着遵循这个http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/教程，但它并不完全与拉斐尔2.0工作。我在大多数地方都解决了这个问题，但我在第8步迷路了。

我要做的就是用一些变量值来动画一些圆…
我的问题基本上是这样的:

paper.rect(250,250,20,20).animate({transform: "t0,100"}, 2000); //works
paper.circle(250,250,20).animate({transform: "t0,100"}, 2000); //works
paper.rect(250,250,20,20).animate({x:250,y:250+100}, 2000); //works
paper.circle(250,250,20).animate({x:250,y:250+100}, 2000); // doesn't work
paper.circle(250,250,20).animate({x:250,y:350}, 2000);    // doesn't work either
var someTrans = 100;
paper.rect(250,250,20,20).animate({transform: "t0,someTrans"}, 2000); //doesn't work
paper.circle(250,250,20).animate({transform: "t0,someTrans"}, 2000); //doesn't work
paper.rect(250,250,20,20).animate({x:250,y:250+someTrans}, 2000); //works
paper.circle(250,250,20).animate({x:250,y:250+someTrans}, 2000); // doesn't work
谁能给我指一下正确的方向吗?
因为拉斐尔在不同版本之间改变了它的变形行为，所以我很难自己找到它……"——

(我真的不明白为什么circle和rect的行为如此不同…这对我来说没什么意义…=/
我使用的是Opera 11.52，以防有任何不同…?)

变量不会被自动替换。您需要将字符串和数字连接起来，如下所示:

paper.rect(250,250,20,20).animate({transform: "t0," + someTrans}, 2000); //doesn't work
paper.circle(250,250,20).animate({transform: "t0," + someTrans}, 2000); //doesn't work

对于圆圈:你必须指定所有三个属性x, y和r，然后动画工作。试一试:

paper.circle(50,50,40).animate({cx:100,cy:100,r:100},1000)

on RaphaelJs Playground

相关文章：