Question

我正在使用GSAP / TweenLite开发SVG动画。目前它适用于Chrome，但让它适用于Firefox和Edge ......这是一个噩梦......

这是我的动画的一个非常简化的版本（首先使用chrome进行测试）：

CODEPEN

https://codepen.io/marlburrow/pen/OmyBqq

HTML

<g class="circle-group circle2" transform="rotate(60, 270, 270) translate(0, -210)">
    <circle class="circle" cx="50%" cy="50%" r="9"></circle>
    <circle class="circle-point" cx="50%" cy="50%" r="2"></circle>
</g>

<g class="circle-group circle3 " transform="rotate(120, 270, 270) translate(0, -210)">
    <circle class="circle" cx="50%" cy="50%" r="9"></circle>
    <circle class="circle-point" cx="50%" cy="50%" r="2"></circle>
</g>

<g class="circle-group circle4 " transform="rotate(180, 270, 270) translate(0, -210) ">
    <circle class="circle" cx="50%" cy="50%" r="9"></circle>
    <circle class="circle-point" cx="50%" cy="50%" r="2"></circle>
</g>

<g class="circle-group circle5 " transform="rotate(240, 270, 270) translate(0, -210)">
    <circle class="circle" cx="50%" cy="50%" r="9"></circle>
    <circle class="circle-point" cx="50%" cy="50%" r="2"></circle>
</g>

<g class="circle-group circle6 " transform="rotate(300, 270, 270) translate(0, -210)">
    <circle class="circle" cx="50%" cy="50%" r="9"></circle>
    <circle class="circle-point" cx="50%" cy="50%" r="2"></circle>
</g>

CSS

.header-animation-base{
  width:400px;
  height:400px;
  margin:auto;
  display:block;
}  

.circle-point {
  fill: black;
}

.circle {
  stroke:red;
  fill:transparent;
  stroke-width:2;
}

JS

// Get elements
var circle1 = document.querySelector('.circle1');
var circle2 = document.querySelector('.circle2');
var circle3 = document.querySelector('.circle3');
var circle4 = document.querySelector('.circle4');
var circle5 = document.querySelector('.circle5');
var circle6 = document.querySelector('.circle6');
var circleGroups = document.querySelectorAll('.circle-group');

// Place all points at the top of the main circle
TweenLite.set(circleGroups,{rotation: 0, transformOrigin: "center 220"})

// Play circle's rotations
TweenLite.to(circle1, 2, {rotation: 360, transformOrigin: "center 220"});
TweenLite.to(circle2, 2, {rotation: 420, transformOrigin: "center 220"});
TweenLite.to(circle3, 2, {rotation: 480, transformOrigin: "center 220"});
TweenLite.to(circle4, 2, {rotation: 540, transformOrigin: "center 220"});
TweenLite.to(circle5, 2, {rotation: 600, transformOrigin: "center 220"});
TweenLite.to(circle6, 2, {rotation: 660, transformOrigin: "center 220"});

注意：每个小圆圈最初定位为一次旋转和一次平移。我需要在HTML中内联初始位置，因为即使禁用了javascript，我也希望所有圈子都定位好。

正如你所看到的，动画是FF和Edge的灾难，我可能做错了。

我希望你能帮助我:)。

由于

使用GSAP的SVG动画，需要帮助才能使我的动画与Firefox / Edge一起使用

0 个答案: