Created
December 5, 2023 21:20
-
-
Save mascii/703b36f5170a0d45f1ba37d2c1a70f53 to your computer and use it in GitHub Desktop.
spring-animation-math-with-taylor-expansion
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| @property --t { | |
| syntax: '<number>'; | |
| inherits: false; | |
| initial-value: 0 | |
| } | |
| @keyframes time { | |
| from { | |
| --t: 0 | |
| } | |
| to { | |
| --t: 3 | |
| } | |
| } | |
| .ball { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: #0a0; | |
| animation: time calc(3ms * var(--duration)) linear infinite; | |
| /* 各種パラメーター */ | |
| --from: 0; | |
| --to: 300; | |
| --bounce: 0.5; | |
| --duration: 800; | |
| --initial-velocity: 0; | |
| --A: 1 / cos(var(--b)); | |
| --a: 1.7 * pi; | |
| --b: atan2(-1 * var(--c) - var(--v), var(--a)); | |
| --c: 8 * (1 - var(--bounce)); | |
| --v: (var(--initial-velocity) / (var(--from) - var(--to))) * (1000 / var(--duration)); | |
| --exp4: 54.5981500331; /* exp(4) */ | |
| --x: calc(-1 * var(--c) * var(--t) + 4); | |
| --expx: max(0, | |
| 1 | |
| + var(--x) | |
| + var(--x) * var(--x) / 2 | |
| + var(--x) * var(--x) * var(--x) / 6 | |
| + var(--x) * var(--x) * var(--x) * var(--x) / 24 | |
| + var(--x) * var(--x) * var(--x) * var(--x) * var(--x) / 120 | |
| + var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) / 720 | |
| + var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) / 5040 | |
| + var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) / 40320 | |
| + var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) * var(--x) / 362880 | |
| ); | |
| /* スプリングアニメーションの数式 */ | |
| /* prettier-ignore */ | |
| translate: calc( | |
| 1px * ( | |
| (var(--from) - var(--to)) | |
| * (var(--A) * cos(1rad * var(--a) * var(--t) + var(--b)) * var(--expx) / var(--exp4)) | |
| + var(--to) | |
| ) | |
| ); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ball"></div> | |
| </body> | |
| </html> |
Author
mascii
commented
Dec 5, 2023
- iOS のスプリングを CSS 数式アニメーションで再現する - Katashin.info を Chrome に対応させることを考えました
- CSS の exp 関数は Chrome 未対応のため、テイラー展開を用いて近似します
- x < 0 側の近似精度を上げるために、x = 0 でのテイラー展開はなく「 exp を x = -4 で 9 次までテイラー展開した関数」を用いています
- 上記の関数は x -> -∞ で -∞ に発散するので、max 関数を用いて 0 未満にならないようにしています
- max 関数は Chrome 79 以降で利用できます
- 上記の関数は x -> -∞ で -∞ に発散するので、max 関数を用いて 0 未満にならないようにしています
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment