javascript - Raphael JS Transform 翻译问题

Question

我有两个同心齿轮形状的补丁，我希望它们永远循环旋转，我想通过使用拉斐尔变换方法将小补丁居中，但是当我应用旋转循环时，它会发生变化，就像将路径从之前设置的偏移量到 0,0 坐标 - 左上角 -，如果我删除行 -$gear2.transform('T50,50');- 齿轮旋转得很大，但小一个位置是 0,0 ，因为你可以想象，我怎样才能实现这个+

var janddMainGlobals = {


$aniLoop:Raphael.animation({transform:'r360'},6000).repeat(Infinity),
$aniLoopBack:Raphael.animation({transform:'r360'},4000).repeat(Infinity),


};


var janddMainAppi={


ini:function(){



    var $gears = Raphael(document.getElementById('gears'),205,205);

    var $gear1 = $gears.path("M 149.645 26.622 c -0.766 -0.515 -1.54 -0.989 -2.314 -1.477 c 1.849 -3.512 3.662 -7.043 5.436 -10.599 c -6.362 -4.045 -13.309 -7.263 -20.489 -9.684 c -1.615 3.64 -3.187 7.287 -4.721 10.947 c -5.711 -1.875 -11.54 -3.138 -17.401 -3.812 c 0.137 -3.988 0.236 -7.979 0.287 -11.978 c -7.541 -0.67 -15.154 -0.722 -22.657 0.268 c 0.129 3.977 0.3 7.946 0.513 11.916 c -5.891 0.782 -11.7 2.146 -17.325 4.092 c -1.588 -3.63 -3.215 -7.247 -4.884 -10.848 c -7.169 2.448 -13.921 5.984 -20.381 9.942 c 1.835 3.536 3.722 7.056 5.643 10.557 c -4.922 3.23 -9.553 6.986 -13.825 11.239 c -3.025 -2.584 -6.073 -5.141 -9.153 -7.658 c -5.255 5.462 -10.042 11.363 -13.915 17.847 c 3.175 2.375 6.376 4.712 9.599 7.013 c -3.127 5.193 -5.658 10.59 -7.61 16.112 c -3.83 -1.018 -7.667 -2.001 -11.523 -2.94 C 2.37 74.716 0.918 82.208 0 89.726 c 3.911 0.76 7.84 1.479 11.777 2.152 c -0.544 5.945 -0.47 11.908 0.179 17.799 c -3.902 0.746 -7.8 1.533 -11.696 2.367 c 0.948 7.499 2.573 14.939 5.244 22.029 c 3.852 -1.005 7.684 -2.052 11.499 -3.135 c 2.066 5.547 4.683 10.901 7.853 15.98 c -3.206 2.375 -6.394 4.781 -9.551 7.225 c 4.153 6.347 8.905 12.32 14.35 17.603 c 3.028 -2.587 6.028 -5.201 8.997 -7.847 c 3.577 3.428 7.468 6.609 11.708 9.478 c 0.761 0.515 1.538 0.991 2.309 1.479 c -1.849 3.511 -3.665 7.044 -5.436 10.598 c 6.363 4.049 13.31 7.265 20.489 9.683 c 1.62 -3.638 3.188 -7.289 4.722 -10.944 c 5.711 1.877 11.538 3.141 17.401 3.813 c -0.139 3.982 -0.237 7.976 -0.291 11.973 c 7.547 0.675 15.154 0.721 22.662 -0.263 c -0.129 -3.979 -0.299 -7.949 -0.514 -11.916 c 5.893 -0.788 11.698 -2.146 17.324 -4.094 c 1.59 3.63 3.215 7.245 4.883 10.848 c 7.168 -2.448 13.924 -5.983 20.384 -9.946 c -1.84 -3.534 -3.721 -7.051 -5.64 -10.554 c 4.918 -3.229 9.551 -6.985 13.817 -11.238 c 3.028 2.586 6.081 5.142 9.153 7.657 c 5.26 -5.458 10.043 -11.359 13.918 -17.847 c -3.176 -2.376 -6.377 -4.71 -9.598 -7.019 c 3.121 -5.189 5.659 -10.584 7.609 -16.106 c 3.828 1.021 7.668 2.003 11.525 2.94 c 2.553 -7.152 4.004 -14.645 4.922 -22.161 c -3.916 -0.764 -7.842 -1.479 -11.777 -2.158 c 0.54 -5.945 0.467 -11.905 -0.182 -17.792 c 3.904 -0.752 7.801 -1.539 11.691 -2.375 c -0.945 -7.498 -2.57 -14.937 -5.239 -22.026 c -3.851 1.004 -7.687 2.052 -11.5 3.136 c -2.065 -5.551 -4.685 -10.906 -7.849 -15.982 c 3.205 -2.375 6.391 -4.781 9.547 -7.227 c -4.154 -6.346 -8.902 -12.318 -14.348 -17.596 c -3.032 2.582 -6.029 5.198 -9 7.84 C 157.768 32.675 153.875 29.488 149.645 26.622 Z M 158.914 139.861 c -22.012 32.539 -66.233 41.07 -98.773 19.057 C 27.603 136.905 19.07 92.682 41.082 60.143 c 22.016 -32.54 66.237 -41.072 98.775 -19.059 C 172.398 63.099 180.93 107.32 158.914 139.861 Z");

    var $gear2 = $gears.path("M 74.822 13.311 c -0.383 -0.257 -0.77 -0.494 -1.157 -0.738 c 0.925 -1.756 1.831 -3.521 2.718 -5.299 c -3.182 -2.022 -6.654 -3.631 -10.244 -4.842 c -0.809 1.82 -1.594 3.644 -2.361 5.474 c -2.855 -0.938 -5.77 -1.569 -8.7 -1.906 c 0.068 -1.994 0.118 -3.99 0.144 -5.989 c -3.771 -0.335 -7.577 -0.361 -11.329 0.134 c 0.065 1.988 0.15 3.973 0.256 5.958 c -2.945 0.391 -5.85 1.073 -8.662 2.046 c -0.794 -1.815 -1.607 -3.624 -2.442 -5.424 c -3.584 1.224 -6.96 2.992 -10.19 4.971 c 0.918 1.768 1.861 3.528 2.821 5.278 c -2.461 1.615 -4.776 3.493 -6.912 5.62 c -1.513 -1.292 -3.037 -2.57 -4.577 -3.829 c -2.627 2.731 -5.021 5.681 -6.958 8.923 c 1.588 1.188 3.188 2.356 4.799 3.506 c -1.563 2.597 -2.829 5.295 -3.805 8.056 c -1.915 -0.509 -3.834 -1 -5.762 -1.47 C 1.185 37.357 0.459 41.104 0 44.862 c 1.956 0.38 3.92 0.74 5.889 1.076 c -0.272 2.973 -0.235 5.954 0.09 8.9 c -1.951 0.373 -3.9 0.767 -5.848 1.184 c 0.474 3.749 1.287 7.47 2.622 11.015 c 1.926 -0.503 3.842 -1.026 5.75 -1.567 c 1.033 2.773 2.342 5.45 3.927 7.99 c -1.603 1.188 -3.197 2.391 -4.776 3.612 c 2.077 3.173 4.453 6.16 7.175 8.801 c 1.514 -1.293 3.014 -2.601 4.499 -3.923 c 1.788 1.714 3.733 3.305 5.854 4.738 c 0.38 0.258 0.769 0.496 1.154 0.739 c -0.924 1.756 -1.832 3.522 -2.718 5.299 c 3.182 2.024 6.654 3.633 10.244 4.842 c 0.81 -1.819 1.594 -3.645 2.361 -5.473 c 2.855 0.938 5.769 1.57 8.7 1.907 c -0.069 1.991 -0.119 3.987 -0.146 5.986 c 3.774 0.337 7.577 0.36 11.331 -0.132 c -0.064 -1.989 -0.149 -3.975 -0.257 -5.958 c 2.946 -0.394 5.849 -1.073 8.662 -2.047 c 0.795 1.815 1.607 3.623 2.441 5.424 c 3.584 -1.224 6.962 -2.991 10.192 -4.973 c -0.92 -1.768 -1.861 -3.525 -2.82 -5.277 c 2.459 -1.614 4.775 -3.492 6.908 -5.619 c 1.515 1.293 3.041 2.571 4.577 3.829 c 2.63 -2.729 5.021 -5.68 6.959 -8.924 c -1.588 -1.188 -3.188 -2.354 -4.799 -3.509 c 1.561 -2.595 2.829 -5.292 3.805 -8.054 c 1.914 0.511 3.834 1.002 5.763 1.471 c 1.276 -3.576 2.002 -7.322 2.461 -11.081 c -1.958 -0.382 -3.921 -0.739 -5.889 -1.079 c 0.27 -2.973 0.233 -5.953 -0.091 -8.896 c 1.952 -0.376 3.9 -0.769 5.846 -1.187 c -0.473 -3.749 -1.285 -7.468 -2.62 -11.013 c -1.925 0.502 -3.843 1.026 -5.75 1.568 c -1.032 -2.775 -2.342 -5.453 -3.924 -7.991 c 1.603 -1.187 3.195 -2.39 4.773 -3.613 c -2.077 -3.173 -4.451 -6.159 -7.174 -8.798 c -1.516 1.291 -3.015 2.599 -4.5 3.92 C 78.884 16.337 76.938 14.744 74.822 13.311 Z M 79.457 69.931 C 68.451 86.2 46.34 90.466 30.07 79.459 C 13.801 68.453 9.535 46.341 20.541 30.071 c 11.008 -16.27 33.119 -20.536 49.388 -9.529 C 86.199 31.549 90.465 53.66 79.457 69.931 Z");


    $gear1.attr({stroke:'none', fill:'#0B1518'});
    $gear1.animate(janddMainGlobals.$aniLoop);

    $gear2.attr({stroke:'none',fill:'#082735'})
    $gear2.transform('T50,50');
    $gear2.animate(janddMainGlobals.$aniLoopBack);



},



};

在线示例。 http://www.yourteamwork.com/jandd/

Answer 1

制作动画时，如果已有变换，它将使用它作为变换的引用，因为新变换当前不包含平移偏移。

因此在这种情况下，我们需要包含额外的转换。请注意，您可以构建它们并拥有任意多个，只需记住转换的顺序很重要(因此旋转后平移与平移后旋转不同)。

所以不要有

$aniLoopBack:Raphael.animation({transform:'r360'},4000).repeat(Infinity)

将其更改为

$aniLoopBack:Raphael.animation({transform:'T50,50r360'},4000).repeat(Infinity)

这将在每个动画中包含变换的新翻译部分。