第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何制作網(wǎng)球從水平表面彈起的動畫

如何制作網(wǎng)球從水平表面彈起的動畫

忽然笑 2023-07-20 15:40:21
我有一張網(wǎng)球的圖像：有必要制作一個球下落并隨后從固體表面彈起的動畫。我得到了這種動畫，但它看起來不現(xiàn)實(shí)：要啟動動畫，請單擊圖像：<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>   第一次彈跳必須小于球下落的高度，第二次彈跳小于第一次彈跳的高度，第三次彈跳小于第二次彈跳的高度。你如何實(shí)現(xiàn)這一目標(biāo)？解決方案可能在 SMIL SVG、CSS、JS 上SMIL SVG 解決方案是首選。
查看完整描述

2 回答

?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個贊

最現(xiàn)實(shí)的方法是用 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>


查看完整回答
反對 回復(fù) 2023-07-20
?
吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個贊

SVG SMILE 解決方案


values = ""球彈跳的可變量可以在動畫命令的屬性中設(shè)置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,168;

        0,126;

        0,168;

        0,148;

        0,168;

        0,158;

        0,168;

        0,163;

        0,168;

        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>

循環(huán)動畫示例

為此，在動畫開始條件中寫入以下條件：
begin = "svg1.click; anT.end + 1s"，其中

svg1.click- 單擊后動畫的第一次開始
anT.end + 1s- 在 id = "anT" 的動畫結(jié)束后 1 秒內(nèi)重新啟動動畫

<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,0;

        0,168;

        0,84;

        0,168;

        0,126;

        0,168;

        0,148;

        0,168;

        0,158;

        0,168;

        0,163;

        0,168;

        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>


查看完整回答
反對 回復(fù) 2023-07-20
  • 2 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號