Change from one value to another using a decaying sinusoidal wave

Question

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave?

I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and jsfiddle. The sample is just for visualization purposes. The final formula should be written in plain math rather than any specific programming language.

My objective is to create a function where I can input these fundamental variables and receive an array of all the positions.

start = 0.0 
end = 200.0 
duration = 1000 
bounces = 10

https://jsfiddle.net/JokerMartini/bkw8vqyc/3/

javascript css math

Answer 1

Answer №1

When dealing with the elements animation-target and result, imagine you have a range of values represented by the interval [a, b] that you want to animate. If we consider two points P1 and P2 within this interval where |P1.x - P2.x| ~ 0, but |P1.x - P2.x| <> 0, you can determine their positions using trigonometric functions like sine and cosine. Viewing the interval [a, b] as a series of closely spaced points, your overall animation strategy would resemble the following:

p1 <- a - step
p2 <- a
while p1 <= b
    p1 <- p2
    p2 <- p2 + step
    animate(p1, sin(p1), p2, sin(p2))
end while

If working in Javascript, you can achieve this through frequent events using setInterval(yourfunction, 10);. Should you find the animation not smooth enough, you can enhance it with CSS transitions, indicating the duration for each step, such as 10 milliseconds in this case. Utilize the sin and cos methods from the Math object within JavaScript.

Answer 2

When dealing with the elements animation-target and result, imagine you have a range of values represented by the interval [a, b] that you want to animate. If we consider two points P1 and P2 within this interval where |P1.x - P2.x| ~ 0, but |P1.x - P2.x| <> 0, you can determine their positions using trigonometric functions like sine and cosine. Viewing the interval [a, b] as a series of closely spaced points, your overall animation strategy would resemble the following:

p1 <- a - step
p2 <- a
while p1 <= b
    p1 <- p2
    p2 <- p2 + step
    animate(p1, sin(p1), p2, sin(p2))
end while

If working in Javascript, you can achieve this through frequent events using setInterval(yourfunction, 10);. Should you find the animation not smooth enough, you can enhance it with CSS transitions, indicating the duration for each step, such as 10 milliseconds in this case. Utilize the sin and cos methods from the Math object within JavaScript.

Change from one value to another using a decaying sinusoidal wave

Answer №1

Similar questions

How can you modify the color of a FontAwesome icon?

The postMessage function in my Javascript SlackBot seems to be flooding the channel with messages

The 3D Circle Flip feature on a certain webpage designed by Nordstrom is experiencing issues when viewed on Firefox

Issues with the disappearance of elements when using the Toggle() function

iOS Webkit is causing an override of the CSS property text-align for the submit button

Tips for resolving the issue: Uncaught (in promise) SyntaxError: Unexpected end of input in Fetch API

Utilizing Jquery to enhance table filtering functionality

Refresh a page in AngularJS with only a single click

Comparing values between two JSON objects in Angular 8: A guide

Manipulating the Document Object Model (DOM) in Google

Incorporate Vue into a template using variables and props

The preventDefault() function is not functioning properly on the <a> tag

Function utilizing variables parsed by Angular directive

Showing outcomes from various API requests

Having trouble selecting a radio button in React JS because it's marked as read-only due to the check attribute

Using v-for to pass two properties to a single component in VueJS

Stopping the sound when its' Div is hovered over

Events triggered when the mouse hovers over an element and then moves

Challenges with creating an increment and decrement form component using Vue

Update the PHP webpage dynamically by utilizing AJAX and displaying the PHP variable