如何在网页上点击按钮时制作html5动画?

问题描述:

我有一个想交互动画的想法,我想在html5中创建。我想在4-4-2阵型上有一个带有球衣的足球场,并且在侧面有不同的选项来改变阵型,比如说4-5-1,然后点击这个按钮说4 -5-1球衣将在场上重新排列成该形状。 关于我如何做到这一点的任何想法?如何在网页上点击按钮时制作html5动画?

在此先感谢

最简单和最自由的依赖性路这样做将是一个JavaScript函数添加到您的按钮或元素的的onClick属性,然后有JavaScript的通过左右移动播放器编辑他们的职位,属性等等。

但是,我会建议使用jQuery,因为它通常更容易。然后,您将绑定一个动作到按钮的id(id =“...”属性)。例如:

$(document).ready(function() { 
    $("mybuttonid").click(function(event){ 
    ... 
    }); 
}); 
+0

这会创造他们穿过田野移动和重新排列效果或将它只是跳给他们在新地点 – waa1990

+0

它会跳过他们。过渡元素将需要另一个库。有很多工具可以非常轻松地进行平滑过渡,几乎每个工具都可以使用jQuery。但是,我不是他们的专家。 –

+0

你可以使用jquery动画。 http://api.jquery.com/animate/ – rlemon

http://jsfiddle.net/rlemon/3YRzS/

像提到的,jQuery和动画。

也许有可能在与CSS3关键帧动画某些浏览器,就砸杂志的网站上所看到,例如 - http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/