Fatal编程技术网
  • javascript/
  • Javascript Raphael.js在动画期间保持变换

Javascript Raphael.js在动画期间保持变换

javascript jquery svg

Javascript Raphael.js在动画期间保持变换,javascript,jquery,svg,raphael,transform,Javascript,Jquery,Svg,Raphael,Transform,我到处寻找，似乎找不到答案。我正在使用Raphael.js，我正在尝试创建一个元素，比如说，在我将鼠标悬停在它上面时进行旋转。问题是，如果我使用transform Raphael函数来平移、旋转或缩放元素，所有这些属性都会消失。 以下是我目前掌握的情况： <body> <script> $(function() { var paper = Raphael(100, 100, $(document).height(), $(d

我到处寻找，似乎找不到答案。我正在使用Raphael.js，我正在尝试创建一个元素，比如说，在我将鼠标悬停在它上面时进行旋转。问题是，如果我使用transform Raphael函数来平移、旋转或缩放元素，所有这些属性都会消失。 以下是我目前掌握的情况：

<body>
    <script>
        $(function() {
            var paper = Raphael(100, 100, $(document).height(), $(document).width());
            var gear1 = paper.path("M57.585,29.421 c-0.52-5.537,6.43-0.361,5.004-5.732 c-1.432-5.379-4.9,2.561-7.197-2.509 c-2.293-5.063,5.971-2.442,2.873-7.062 c-3.092-4.616-3.807,4.025-7.631-0.023 c-3.811-4.046,4.871-4.238,0.438-7.605c-4.428-3.363-2.303,5.041-7.225,2.453c-4.928-2.592,3.225-5.598-2.068-7.344 c-5.277-1.746-0.533,5.511-6.027,4.659c-5.5-0.854,1.217-6.326-4.348-6.257 c-5.564,0.061,1.293,5.379-4.186,6.354 c-5.475,0.98-0.895-6.373-6.137-4.511 c-5.242,1.869,2.955,4.676-1.902,7.373c-4.867,2.704-2.922-5.739-7.277-2.272 c-4.348,3.469,4.322,3.452,0.604,7.584 c-3.721,4.137-4.633-4.477-7.615,0.216 c-2.992,4.687,5.203,1.859,3.025,6.982 c-2.176,5.116-5.836-2.733-7.137,2.675 c-1.303,5.404,5.537,0.076,5.146,5.619 c-0.395,5.547-6.416-0.695-5.893,4.838 c0.523,5.531,5.266-1.727,6.693,3.648s-6.295,1.429-3.996,6.496 c2.289,5.062,4.42-3.341,7.516,1.275 c3.096,4.619-5.488,3.387-1.67,7.433 c3.816,4.05,3.088-4.59,7.516-1.226 c4.428,3.363-4.086,4.98,0.834,7.571 c4.926,2.595,1.432-5.339,6.715-3.595 c5.285,1.746-2.24,6.03,3.26,6.885 c5.492,0.85-0.391-5.52,5.17-5.583 c5.566-0.066-0.158,6.448,5.316,5.468 c5.477-0.975-2.148-5.106,3.094-6.973 c5.242-1.865,1.932,6.15,6.793,3.443 c4.861-2.704-3.691-4.115,0.656-7.586 c4.355-3.465,3.832,5.187,7.553,1.051 c3.721-4.139-4.838-2.697-1.85-7.383 c2.99-4.691,5.309,3.652,7.486-1.461 c2.174-5.12-5.447-0.988-4.146-6.396 c1.307-5.404,6.211,1.74,6.605-3.804 C63.974,28.576,58.108,34.958,57.585,29.421 z M49.186,19.025 l-12.812,7.396 c-0.666-0.577-1.438-1.034-2.289-1.325 v-14.56 C40.254,11.125,45.648,14.333,49.186,19.025 z M31.798,35.296 c-1.979,0-3.582-1.609-3.582-3.585 c0-1.981,1.604-3.585,3.582-3.585 v-0.004c1.979,0,3.586,1.607,3.586,3.589 C35.384,33.687,33.776,35.296,31.798,35.296 z M29.501,10.594 v14.509 c-0.842,0.299-1.617,0.736-2.275,1.312l-12.487-7.204 C18.179,14.538,23.449,11.306,29.501,10.594 z M24.919,33.026l-12.66,7.318 c-1.103-2.587-1.715-5.431-1.715-8.418 c0-3.122,0.681-6.08,1.879-8.758 l12.496,7.223 c-0.084,0.424-0.117,0.869-0.117,1.319 S24.835,32.603,24.919,33.026 z M14.512,44.34 l12.714-7.331 c0.658,0.567,1.434,1.012,2.275,1.307 v14.946 C23.317,52.534,17.945,49.179,14.512,44.34 z M34.085,53.318 V38.329 c0.852-0.299,1.623-0.76,2.289-1.336 l13.038,7.533 C45.883,49.385,40.387,52.719,34.085,53.318 z M51.705,40.555 l-13.028-7.528 c0.086-0.424,0.119-0.865,0.119-1.315 s-0.033-0.896-0.119-1.319l12.864-7.433 c1.26,2.732,1.981,5.764,1.981,8.968 C53.522,34.997,52.867,37.912,51.705,40.555 z").attr({stroke:'#000',fill:'#000'});
            gear1.transform("t100,200 s0.5");
            gear1.node.id = "gear1";
        });
    </script>
</body>
所以，重申一下。我到处都找过了，旋转悬停效果很好，问题是“我的gear1.transform（…）；？为什么它会消失？”

如果有任何帮助，我们将不胜感激。

也许你可以加把小提琴？我建议尝试将Element.hover（）与Element.animate（）结合使用。我猜新的动画会覆盖旧的动画，因此您可能需要以某种方式将原始转换作为动画的一部分（您可以在Raphael中进行相对转换，但不确定CSS是否可以），所以罗德里格斯的建议当然是一条可行的途径。想想看，另一个解决方案可能是通过css转换父元素，问题是Raphael不支持默认的组元素，所以Snap或组插件可能是另一种途径？谢谢大家！我试试看。：） 
/*Rotation functionality for Gear1*/
#gear1{
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;
}  

#gear1:hover  
{
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
} 

/*Rotation keyframes*/
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}