1

我对使用 smil SVG 动画和使用 javascript/jquery otf 更改内容有一些疑问。

这是我已经尝试过的：

HTML/XML：

        <svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;">

            <g id="story_1">
                <path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z">
                    <animate id="story_1_1_1"
                             attributeName="d" 
                             from="M200,100l0,0" to="M200,100l0,380" dur="1s"
                             begin="0s;story_1_1_2.end"
                             end=""
                    />
                    <animate id="story_1_1_2" 
                             attributeName="d" 
                             from="M200,100l0,380" to="M200,100l0,0" dur="1s"
                             begin="story_1_1_1.end"
                             end=""
                    />
                </path>
                <path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z">
                    <animate id="story_1_2_1" 
                             attributeName="d" 
                             from="M200,500l0,0" to="M200,500l0,-380" dur="1s"
                             begin="story_1_1_1.begin+1s;story_1_2_2.end"
                             end=""
                    />
                    <animate id="story_1_2_2" 
                             attributeName="d" 
                             from="M200,500l0,-380" to="M200,500l0,0" dur="1s"
                             begin="story_1_2_1.end"
                             end=""
                    />
                </path>
            <g/>

            <g id="story_2">
                <path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50">
                    <animate id="story_2_1_1" 
                             attributeName="stroke-dashoffset" 
                             from="795.8291015625" to="-795.8291015625" dur="2s"
                             begin=""
                             calcMode="spline"
                             keySplines=".28 .25 .265 .25"
                             keyTimes="0;1"
                             end=""
                    />
                    <animate id="story_2_1_2" 
                             attributeName="stroke-dashoffset" 
                             from="795.8291015625" to="0" dur="1s"
                             begin=""
                             calcMode="spline"
                             keySplines=".28 .25 .265 .25"
                             keyTimes="0;1"
                             end=""
                    />
                </path>
            <g/>

        </svg>

JS/jQuery：

在这种情况下，按键事件执行以下操作：

document.getElementById( 'story_1_1_1' ).attributes[ 5 ].value = '';

document.getElementById( 'story_1_1_1' ).attributes[ 6 ].value ='story_1_1_1.end';

document.getElementById( 'story_1_2_1' ).attributes[ 6 ].value ='story_1_2_1.end';

document.getElementById( 'story_2_1_1' ).attributes[ 5 ].value= 'story_1_1_2.end;story_2_1_1.end';

钦佩的结果：

我想实现：

  • 有一个动画循环不断地运行动画
  • on event trigger (eg click, keypress, ...) 在当前迭代结束时结束当前正在运行的动画
  • 在第一个动画结束时开始第二个动画（-重复更多动画）（-理想情况下反向做同样的事情：从动画 2 到 1）

实际结果：

到目前为止发生了什么：

  • 动画 1 循环工作正常
  • 按键时：
  • 案例1（您在顶线下降时按下）：
    • 有用
  • 案例2（您在顶线上升时按下）：
    • 仍然动画一次迭代然后停止

我对如何做到这一点的不同方法和/或想法持开放态度。SMIL 至少在一开始似乎是一种快速简便的方法，而且在移动设备上的性能方面也很出色。也许在这种情况下css3动画更好？

我怎样才能解决这个问题？

4

1 回答 1

0

这很难……我在这里搞砸了：

$(window).keypress(function(e) {//spacebar trigger
    if (e.keyCode === 0 || e.keyCode === 32) {
        $('#story_1_1_1, #story_1_1_2, #story_1_2_1, #story_1_2_2').attr('end', 'story_2_1_1.begin');
        $('#story_2_1_1').attr('begin', '0s;story_2_1_2.end');
    }
});

https://jsfiddle.net/kt7gax2a/2/

于 2015-08-28T16:16:38.933 回答