blocks|key|3087901|text|您可以使用accessKey，但它只适用于转换为字符的键。例如，更改为此...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3087902|++++<animateMotion+begin="accessKey(1)"+end="accessKey(2)"+dur="6s"+repeatCount="indefinite">
+++++++<mpath+xlink:href="#theMotionPath"/>
++++</animateMotion>|code-block|syntax|javascript|3087903|这意味着你可以按1启动动画，按2停止动画。如果你想向后运行动画，你需要另一个从前面运行的路径和另一个引用该向后路径的animateMotion。animateMotion可以在accessKeys颠倒的情况下启动和停止。我只在Firefox上测试过这一点，但我相信这在Opera上实现了，可能在其他地方也实现了。|3087904|请注意，如果没有脚本，您就不能暂停动画，因此当您按下访问键时，您将看到动画再次从头开始。如果希望暂停，则需要在按下某个键时在父<svg>元素上调用pauseAnimations()。|offset|length|style|CODE|3087905|如果你想要更具交互性的东西，那么SMIL不是最好的解决方案，只需使用javascript将球定位在某个x/y位置即可。您可以使用getPointAtLength来确定它应该在路径上的哪个位置。|3087906|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/SVG/struct.html#__svg__SVGSVGElement__pauseAnimations|1|http://www.w3.org/TR/SVG/paths.html#__svg__SVGPathElement__getPointAtLength^0|0|0|0|1R|5|21|H|0|0|1S|G|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@$K|14|L|15|M|N]]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$K|1A|L|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

You can use accessKey but that only works with keys that translate to a character. For instance changing to this...

<pre><code> &lt;animateMotion begin="accessKey(1)" end="accessKey(2)" dur="6s" repeatCount="indefinite"&gt;
 &lt;mpath xlink:href="#theMotionPath"/&gt;
 &lt;/animateMotion&gt;
</code></pre>

Means that you can start the animation by pressing 1 and stop it by pressing 2. If you wanted to run the animation backwards you'd need another path which runs back to front and another animateMotion which refers to that backwards path. That animateMotion could start and stop with accessKeys reversed. I've only tested this on Firefox but I believe this is implemented on Opera and probably elsewhere too.

Note that without scripting you can't pause an animation so when you press the access keys you'll see the animation restart from the beginning again. If you want pausing you'll need to call <a href="http://www.w3.org/TR/SVG/struct.html#__svg__SVGSVGElement__pauseAnimations" rel="nofollow">pauseAnimations()</a> on the parent <code>&lt;svg&gt;</code> element when a key is pressed.

If you want something more interactive then SMIL is not the best solution, just position the ball at some x/y location using javascript. You can use <a href="http://www.w3.org/TR/SVG/paths.html#__svg__SVGPathElement__getPointAtLength" rel="nofollow">getPointAtLength</a> to figure out where on the path it should go.

blocks|key|962937|text|我能做的最好的事情，就是我添加了这个脚本，这样我就可以暂停和取消暂停动画……但仍然不是我想要的.|type|unstyled|depth|inlineStyleRanges|entityRanges|data|962938|var+pause+=+document.getElementById('draw');
var+unPause+=+document.getElementById('draw');

function+parar(){
++++pause.pauseAnimations();
}
function+voltar(){
++++unPause.unpauseAnimations();
}

++++$(window).keydown(function+(e)+{
++++++++if+(e.keyCode+==+39)+{
++++++++++++setTimeout(voltar,10);
++++++++++++setTimeout(parar,500);
++++++++}
++++});+|code-block|syntax|javascript|962939|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The best thing i can do, is that i've add this script, so i can pause and unpause the animation... but still not what im looking for....

<pre><code>var pause = document.getElementById('draw');
var unPause = document.getElementById('draw');

function parar(){
 pause.pauseAnimations();
}
function voltar(){
 unPause.unpauseAnimations();
}

 $(window).keydown(function (e) {
 if (e.keyCode == 39) {
 setTimeout(voltar,10);
 setTimeout(parar,500);
 }
 }); 
</code></pre>

blocks|key|3087997|text|如果你想要动画尽快元素追加页面，设置'+begin‘为'indefinite’，并开始动画调用其.beginElement()；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3087998|var+animateMotion+=+document.createElementNS(SVG_NS,+'animateMotion');
animateMotion.setAttribute('begin',+'indefinite');
//append+animateMotion+to+the+page
animateMotion.beginElement();|code-block|syntax|javascript|3087999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

if you want the animate as soon as element append page, set 'begin' to 'indefinite' and begin the animate call its .beginElement();

<pre><code>var animateMotion = document.createElementNS(SVG_NS, 'animateMotion');
animateMotion.setAttribute('begin', 'indefinite');
//append animateMotion to the page
animateMotion.beginElement();
</code></pre>

blocks|key|963013|text|您可以使用pauseAnimations()并使用setCurrentTime(time)控制它。这些是svg元素的方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|963014|entityMap^0|5|H|P|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You can use <code>pauseAnimations()</code> and control it using <code>setCurrentTime(time)</code>. Those are methods for the svg element.

i've made a Path with SVG, and i'm making a ball to move along it.

But is there anyway i can control de movement of the ball?

Like, the ball starts stoped, while i press the Right Arrow on the keyboard, the ball moves Clockwise, and when i press the left arrow, the ball moves Counter-Clockwise...

is it possible?

here is the svg code:

<pre><code>&lt;svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

&lt;!-- Draw the outline of the motion path in grey, along
 with 2 small circles at key points --&gt;
&lt;path d="M66,89.32c18,143,154,82,97,118s-187,38-152,102s114,105,163,74
s89-111,89-127s18-128,13-155s-29-67-57-80s-47-14-62-17s-17-8-32,0s-40,23-47,30s-11,20-16,24s-14,29-14,29L66,89.32z" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/&gt;

&lt;!-- Here is a red circle which will be moved along the motion path. --&gt;
&lt;circle cx="" cy="" r="5" fill="red"&gt;

 &lt;!-- Define the motion path animation --&gt;
 &lt;animateMotion dur="6s" repeatCount="indefinite"&gt;
 &lt;mpath xlink:href="#theMotionPath"/&gt;
 &lt;/animateMotion&gt;
&lt;/circle&gt;
</code></pre>



I put my code here: <a href="http://jsfiddle.net/fPQv2/" rel="nofollow">http://jsfiddle.net/fPQv2/</a>

Thanks!!

animateMotion Controlling with script

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经用SVG创建了一条路径，并且我正在制作一个球来沿着它移动。但是有没有什么办法可以控制球的移动呢？例如，球开始停止，当我按键盘上的右箭头时，球沿顺时针方向移动，当我按左箭头时，球逆时针移动……有可能吗？下面是svg代码：<svg width="800" height="800" viewBox="0 0 800 8...

问使用脚本控制animateMotion
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用脚本控制animateMotionEN