无法弄清楚如何正确使用缓动函数。

huangapple go评论66阅读模式
英文:

Can't figure out how to properly use easing function

问题

I really need help to figure out on how to use these easing functions I found on this helpful website: https://spicyyoghurt.com/tools/easing-functions

I know what the values that the function needs means, I created a function in one of my classes that helps me get the current time (t) to pass it to the function afterwards:

getEaseTimeVar()
{
    var timeStamp = performance.now();
    this.#secondsPassed = (timeStamp - this.#oldTimeStamp) / 1000;
    this.#oldTimeStamp = timeStamp;

    return timeStamp;
}

(EXPLANATION)
This function works, but only if it is called at the beginning of the code execution. For example, if I want to fade something in (value from 0 to 1) using a linear easing function and call it at the beginning of code execution, it would increase and even go beyond 1, which is fine, that's normal. However, if I want to do the same thing, but I want it to start say 5 seconds after code execution, it will not start at 0, but jump to a larger value.

(PROBLEM)
This is because I think I am not getting the time at which the animation starts, but from the start of all code execution, and I am struggling to understand how to do this while still maintaining a simple function to use the easing animation.

Thank you in advance for your help.

英文:

I really need help to figure out on how to use these easing functions I found on this helpful website: https://spicyyoghurt.com/tools/easing-functions

I know what the values that the function needs means, I created a function in one of my classes that helps me get the current time (t) to pass it to the function afterwards:

getEaseTimeVar()
{
    var timeStamp = performance.now();
    this.#secondsPassed = (timeStamp - this.#oldTimeStamp) / 1000;
    this.#oldTimeStamp = timeStamp;

    return timeStamp;
}

(EXPLANATION)
This function works, but only if it is called at the beginning of the code execution. For example, if I want to fade something in (value from 0 to 1) using a linear easing function and call it at the beginning of code execution, it would increase and even go beyond 1, which is fine, that's normal. However, if I want to do the same thing, but I want it to start say 5 seconds after code execution, it will not start at 0, but jump to a larger value.

(PROBLEM)
This is because I think I am not getting the time at which the animation starts, but from the start of all code execution, and I am struggling to understand how to do this while still maintaining a simple function to use the easing animation.

Thank you in advance for your help.

答案1

得分: 1

动画开始时间

您需要跟踪动画的开始时间。

然后使用当前时间与开始时间之间的差异(animTime)。

只有在 animTime 在 0 到动画持续时间之间时才进行动画。

示例

// 来自 https://spicyyoghurt.com/tools/easing-functions
const easeLinear = (t, b, c, d) => c * t / d + b;
const easeInOutQuad = (t, b, c, d) => (t /= d * 0.5) < 1 ? c * 0.5 * t * t + b : -c * 0.5 * ((t - 1) * (t - 3) - 1) + b;

var animating = false;
var startTime;
const animDuration = 2000; // 毫秒
const ctx = canvas.getContext("2d");

canvas.addEventListener("click",() => {
    startTime = performance.now(); 
    !animating && requestAnimationFrame(mainLoop); 
});

function mainLoop(time) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     if (startTime) {
         var animTime = time - startTime;
         // 或者 var animTime = performance.now() - startTime

         const x = easeLinear(animTime, -20, canvas.width + 40, animDuration);
         const y = easeInOutQuad(animTime, 20, canvas.height - 40, animDuration);         
         ctx.beginPath();
         ctx.arc(x, y, 20, 0, Math.PI * 2);
         ctx.fill();
         if (animTime < animDuration) {
             requestAnimationFrame(mainLoop);
             animating = true;
         } else {
             animating = false;
         }
     }
}
canvas { border: 1px solid black; }
点击画布以开始/重新启动动画。<br>
<canvas id="canvas" width="500" height="200"></canvas>

请注意,我已经省略了代码部分的翻译,只翻译了注释和示例的文本部分。

英文:

Animation start time

You need to keep track of the animation start time.

Then use the difference between current time from start time (animTime).

Only animate while the animTime is between 0 and animation duration.

Example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// From https://spicyyoghurt.com/tools/easing-functions
const easeLinear = (t, b, c, d) =&gt; c * t / d + b;
const easeInOutQuad = (t, b, c, d) =&gt; (t /= d * 0.5) &lt; 1 ? c * 0.5 * t * t + b : -c * 0.5 * ((t - 1) * (t - 3) - 1) + b;
var animating = false;
var startTime;
const animDuration = 2000; // ms
const ctx = canvas.getContext(&quot;2d&quot;);
canvas.addEventListener(&quot;click&quot;,() =&gt; {
startTime = performance.now(); 
!animating &amp;&amp; requestAnimationFrame(mainLoop); 
});
function mainLoop(time) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (startTime) {
var animTime = time - startTime;
// or var animTime = performance.now() - startTime
const x = easeLinear(animTime, -20, canvas.width + 40, animDuration);
const y = easeInOutQuad(animTime, 20, canvas.height - 40, animDuration);         
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
if (animTime &lt; animDuration) {
requestAnimationFrame(mainLoop);
animating = true;
} else {
animating = false;
}
}
}

<!-- language: lang-css -->

canvas { border: 1px solid black; }

<!-- language: lang-html -->

Click canvas to start / restart animation.&lt;br&gt;
&lt;canvas id=&quot;canvas&quot; width=&quot;500&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 16:45:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76430099.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定