如何让我的 SVG SMIL 动画再次正确播放?
How can I make my SVG SMIL animation play back correct again?
我是一名编码经验很少的设计师,前段时间我玩过 SMIL 动画,我记得有些浏览器不支持特定命令。现在我想检查我的动画,不幸的是我注意到我最初成功测试动画的浏览器 (opera) 也停止正确播放我的动画。蓝球曾经在 y 轴上上下移动,现在这个动画不工作了。
你们知道为什么这个动画不能再在 codepen 中正确播放吗?我如何才能像以前一样查看动画?
https://codepen.io/clemse/pen/gOYPNJZ
这是似乎不起作用的部分:
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="
0.1 0.9 1.0 1.0;
1.0 1.0 1.0 1.0;
0.5 1.6 0.1 0.9;
0.1 0.9 1.0 1.6;"
keyTimes="
0;0.20;0.40;0.8;1"
calcMode="spline"
repeatCount="indefinite"
/>
你可以看一下控制台,就知道问题出在哪里了。根据 specs for keySplines
,
The values of x1 y1 x2 y2 must all be in the range 0 to 1.
您的示例有两个值 1.6
。我已将它们更改为 0.6
,它在我的浏览器中有效 (Chrome)。
<svg style="display:block; margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 300 300">
<!-- Background shape-->
<rect x="0" y="0" width="300" height="300" fill="#FCCE01 "/>
<!-- Opening the Group for the Toy-->
<g>
<!-- Animating the balls impact on the toyvertically-->
<animateTransform
attributeName="transform"
type="translate"
values="0,0;0,8;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0"
begin="1.0s"
dur="1.6"
repeatCount="indefinite"
/>
<!-- Positioning the toy-->
<g transform="translate(-65,34)">
<!-- Ball shape-->
<ellipse cx="217" cy="30" rx="15" ry="15"
fill="#65c8d2"
stroke="#4e2561"
stroke-width="3">
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="0.1 0.9 1.0 1.0;1.0 1.0 1.0 1.0;0.5 0.6 0.1 0.9;0.1 0.9 1.0 0.6"
keyTimes="0;0.20;0.40;0.8;1"
calcMode="spline"
repeatCount="indefinite"
/>
<!-- Animating the balls shape (squashing) along the x axis-->
<animate
attributeName="rx"
values="15; 10.5 ; 17 ; 19 ; 15 ; 10.5 ; 17 ; 15 ; 15 ; 15 ; 15"
begin="0.2s"
dur="1.6s"
repeatCount="indefinite"
/>
<!-- Closing the object so only the ball gets animated-->
</ellipse>
<!-- Positioning the trigger-->
<g transform="translate(200,150)">
<!-- Drawing the trigger-->
<path d="M0,0 L-14,0 Q-15,20 3,25 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d">
<!--Animating the triggers rotation-->
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0; -30 0 0; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0 ; 0 0 0 "
begin="0s"
dur="1.6s"
fill="freeze"
repeatCount="indefinite"
/>
</path>
</g>
<!--Positioning the cage-->
<g transform="translate(200,150)">
<!--Drawing the cage-->
<path d="M0,0 L-18,-52 L52,-52 L34,0 L10,0 L2,-52 M30,-52 L24,0 M-5,-17 L40,-17 M45,-34 L-12,-34"
style="stroke:#4e2561;
stroke-width:3;
fill:none"/>
</g>
<!--Positioning the Cone-->
<g transform="translate(200,150)">
<!--Drawing the Cone-->
<path d="M0,0 L10,75 A1,1 0 0,0 24,75 L34,0 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d"/>
</g>
</g>
</svg>
我是一名编码经验很少的设计师,前段时间我玩过 SMIL 动画,我记得有些浏览器不支持特定命令。现在我想检查我的动画,不幸的是我注意到我最初成功测试动画的浏览器 (opera) 也停止正确播放我的动画。蓝球曾经在 y 轴上上下移动,现在这个动画不工作了。
你们知道为什么这个动画不能再在 codepen 中正确播放吗?我如何才能像以前一样查看动画?
https://codepen.io/clemse/pen/gOYPNJZ
这是似乎不起作用的部分:
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="
0.1 0.9 1.0 1.0;
1.0 1.0 1.0 1.0;
0.5 1.6 0.1 0.9;
0.1 0.9 1.0 1.6;"
keyTimes="
0;0.20;0.40;0.8;1"
calcMode="spline"
repeatCount="indefinite"
/>
你可以看一下控制台,就知道问题出在哪里了。根据 specs for keySplines
,
The values of x1 y1 x2 y2 must all be in the range 0 to 1.
您的示例有两个值 1.6
。我已将它们更改为 0.6
,它在我的浏览器中有效 (Chrome)。
<svg style="display:block; margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 300 300">
<!-- Background shape-->
<rect x="0" y="0" width="300" height="300" fill="#FCCE01 "/>
<!-- Opening the Group for the Toy-->
<g>
<!-- Animating the balls impact on the toyvertically-->
<animateTransform
attributeName="transform"
type="translate"
values="0,0;0,8;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0"
begin="1.0s"
dur="1.6"
repeatCount="indefinite"
/>
<!-- Positioning the toy-->
<g transform="translate(-65,34)">
<!-- Ball shape-->
<ellipse cx="217" cy="30" rx="15" ry="15"
fill="#65c8d2"
stroke="#4e2561"
stroke-width="3">
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="0.1 0.9 1.0 1.0;1.0 1.0 1.0 1.0;0.5 0.6 0.1 0.9;0.1 0.9 1.0 0.6"
keyTimes="0;0.20;0.40;0.8;1"
calcMode="spline"
repeatCount="indefinite"
/>
<!-- Animating the balls shape (squashing) along the x axis-->
<animate
attributeName="rx"
values="15; 10.5 ; 17 ; 19 ; 15 ; 10.5 ; 17 ; 15 ; 15 ; 15 ; 15"
begin="0.2s"
dur="1.6s"
repeatCount="indefinite"
/>
<!-- Closing the object so only the ball gets animated-->
</ellipse>
<!-- Positioning the trigger-->
<g transform="translate(200,150)">
<!-- Drawing the trigger-->
<path d="M0,0 L-14,0 Q-15,20 3,25 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d">
<!--Animating the triggers rotation-->
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0; -30 0 0; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0 ; 0 0 0 "
begin="0s"
dur="1.6s"
fill="freeze"
repeatCount="indefinite"
/>
</path>
</g>
<!--Positioning the cage-->
<g transform="translate(200,150)">
<!--Drawing the cage-->
<path d="M0,0 L-18,-52 L52,-52 L34,0 L10,0 L2,-52 M30,-52 L24,0 M-5,-17 L40,-17 M45,-34 L-12,-34"
style="stroke:#4e2561;
stroke-width:3;
fill:none"/>
</g>
<!--Positioning the Cone-->
<g transform="translate(200,150)">
<!--Drawing the Cone-->
<path d="M0,0 L10,75 A1,1 0 0,0 24,75 L34,0 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d"/>
</g>
</g>
</svg>