Action 已被js触发: v-6ren">
gpt4 book ai didi

svg animateTransform 同时触发多个动画

转载 作者:行者123 更新时间:2023-12-01 08:29:24 38 4
gpt4 key购买 nike

在以下示例中,我需要同时执行所有动画。但只适用于最后一个。

<g>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" values="2 100 100; -1 100 100; 1 100 100; -0.5 100 100 0.5 100 100" begin="indefinite" dur="0.35s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"
type="scale" values="1; 1.2; 1" begin="indefinite" dur="0.35s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"
type="translate" values="0 0; -100 -100; 0; 0" begin="indefinite" dur="0.35s" fill="freeze" />

<image x="0" y="0" width="200" height="200" xlink:href="<?php echo $cck->getValue('project_icon'); ?>" />
</g>

Action 已被js触发:
var animations = $( $this ).find( 'animateTransform' );
animations[0].beginElement();
animations[1].beginElement();
animations[2].beginElement();

最佳答案

您的脚本中几乎没有错误:

begin="indefinite"



应该:

repeatCount="indefinite"



旋转 您忘记分隔最后一个 的值值 带有分号,并且您在 中有一个额外的分号翻译 部分。

为了执行一些转换,您需要通过添加来对结果求和(无需将其添加到第一个转换中)

additive="sum"



所以你的代码应该是这样的:
<g>
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" values="2 100 100;-1 100 100;1 100 100;-0.5 100 100;0.5 100 100" repeatCount="indefinite" dur="0.35s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"
type="scale" values="1;1.2;1" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

<animateTransform attributeName="transform" attributeType="XML"
type="translate" values="0 0;-100 -100;0 0" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

<image x="0" y="0" width="200" height="200" xlink:href="<?php echo $cck->getValue('project_icon'); ?>" />
</g>

顺便说一句,将您的图像旋转 0.5 度是不明显的,所以何必呢?!

在这里你可以阅读更多关于它的信息:
SVG-SMIL animation tutorial

关于svg animateTransform 同时触发多个动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23736938/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com