Knobs实现可调节配置的css物理动画模拟效果代码-html代码-BFW代码库

Knobs实现可调节配置的css物理动画模拟效果代码

代码语言：html

所属分类：动画

代码描述：Knobs实现可调节配置的css物理动画模拟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@layer support, demo;

:root {
  /* configure the physical properties of the element */
  --mass: 1;
  --stiffness: 100;
  --damping: 5;
  --start-velocity: 0; 
  
  /* physics math variables */
  --w0: calc(sqrt(var(--stiffness) / var(--mass)));
  --zeta: calc(var(--damping) / (2 * sqrt(var(--stiffness) * var(--mass))));

  --B: calc((var(--zeta) * var(--w0) + calc(var(--start-velocity) * -1)) / var(--wd)); 
  --wd: calc(var(--w0) * sqrt(1 - var(--zeta) * var(--zeta)));
}

@property --t {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

h1 {
  animation: spring 2s alternate ease-out infinite; 
  
  /* doesn't produce invalid results if --zeta >= 1 */
  --underdamped-factor: calc(
    exp(calc(-1 * var(--t) * var(--zeta) * var(--w0))) * 
    (1 * cos(calc(var(--wd) * var(--t))) + var(--B) * sin(calc(var(--wd) * var(--t))))
  );

  --critically-damped-factor: calc(
    (1 + var(--B) * var(--t)) * exp(calc(-1 * var(--t) * var(--w0)))
  );

  transform: translateY(
    calc(100px * (1 - var(--underdamped-factor)))
  ); 
  
  /* todo: transition --t */
  
/*   transform: translateY(
    calc(100px * (1 - var(--critically-damped-factor)))
  );  */
  
/*   &:hover {
    --t: 1;
  } */
}

@keyframes spring {
  to {
    --t: 1; /* End time of animation */
  }
}

@layer support {
  * {
.........完整代码请登录后点击上方下载按钮下载查看