如何解决如何为网球设置动画以从水平表面弹起
有必要制作一个动画,使球掉下来,随后从固体表面反弹。
我得到了这种动画,但是看起来不现实:
要开始动画,请单击图像:
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid" >
<image xlink:href="https://i.stack.imgur.com/hXyA5.png" x="82" width="25px" height="25px" >
<animateTransform attributeName="transform" type="translate" dur="1s" begin="svg1.click" values="0,0;0,168;0" repeatCount="3" />
</image>
<polyline points="5,190 190,190" stroke="silver" stroke-width="4" />
</svg>
第一次反弹必须小于落球的高度,第二次反弹要小于第一次反弹的高度,第三次反弹要小于第二次反弹。
您如何实现这一目标?解决方案可能在SMIL SVG,CSS,JS上
首选SMIL SVG解决方案。
解决方法
最现实的方法是使用JS模拟物理学。
类似这样的东西:
let ballElem = document.getElementById("ball");
let GRAVITY = 40; // Acceleration due to gravity (pixels / sec /sec)
let FLOOR_Y = 200 - 25; // Y coord of floor. The 25 here is because ball.y is the top of the ball.
let BOUNCINESS = 0.8; // Velocity retained after a bounce
let LIMIT = 0.1; // Minimum velocity required to keep animation running
let ball = {};
let lastFrameTime = null;
ballElem.addEventListener("click",startAnim);
function startAnim()
{
ball = {x: 82,y: 0,dx: 0,dy: 0};
lastFrameTime = null;
requestAnimationFrame(animStep);
}
function animStep(timestamp)
{
if (lastFrameTime === null)
lastFrameTime = timestamp;
// Milliseconds elapsed since last step
const elapsed = timestamp - lastFrameTime;
lastFrameTime = timestamp;
ball.dy += GRAVITY * elapsed / 1000;
ball.y += ball.dy;
ball.x += ball.dx; // not really used in this example
if (ball.y > FLOOR_Y) {
// Step has taken us below the floor,so we need to rebound the ball.
ball.y -= (ball.y - FLOOR_Y);
ball.dy = -ball.dy * BOUNCINESS;
}
// Update the <image> element x and y
ballElem.x.baseVal.value = ball.x;
ballElem.y.baseVal.value = ball.y;
// Request another animation step
if (Math.abs(ball.y - FLOOR_Y) > LIMIT || // Not on ground
Math.abs(ball.dy) > LIMIT || // or still moving
Math.abs(ball.dx) > LIMIT) {
requestAnimationFrame(animStep);
}
}
<svg id="svg1"
width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid" >
<image id="ball" xlink:href="https://i.stack.imgur.com/hXyA5.png" x="82" width="25px" height="25px"/>
</svg>
,
SVG SMIL解决方案
可以在values = ""
动画命令的animateTransform
属性中设置可变的弹跳量。
可以使用keyTimes
属性的值来控制每个时隙的球速。
restart = "whenNotActive"
-防止重新启动动画直到动画完全完成。
单击后将开始动画
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid" >
<image xlink:href="https://i.stack.imgur.com/hXyA5.png" x="82" width="25px" height="25px" >
<animateTransform id="anT"
attributeName="transform"
type="translate"
dur="3s"
begin="svg1.click+0.5s"
values="
0,0;
0,168;
0,84;
0,126;
0,148;
0,158;
0,163;
0,166;
0,168;"
keyTimes="0;0.066;0.13;0.198;0.264;0.33;0.396;0.462;0.528;0.594;0.66;0.726;0.792;1"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
</image>
<polyline points="5,193 194,193" stroke="silver" stroke-width="4" />
</svg>
循环动画示例
为此,在动画开始条件中写入了以下条件:begin = "svg1.click; anT.end + 1s"
,其中
svg1.click
-单击后动画的第一个开始anT.end + 1s
-在ID =“ anT”的动画结束后的1秒钟内重新启动动画。
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid" >
<image xlink:href="https://i.stack.imgur.com/hXyA5.png" x="82" width="25px" height="25px" >
<animateTransform id="anT"
attributeName="transform"
type="translate"
dur="3s"
begin="svg1.click+0.5s;anT.end+1s"
values="
0,168;
"
keyTimes="0;0.066;0.13;0.198;0.264;0.33;0.396;0.462;0.528;0.594;0.66;0.726;0.792;1"
repeatCount="1"
fill="freeze"
restart="whenNotActive" />
</image>
<polyline points="5,193" stroke="silver" stroke-width="4" />
</svg>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。