two创建正方形扭曲动画效果-html代码-BFW代码库

two创建正方形扭曲动画效果

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222222;
}
</style>

</head>
<body translate="no">
<section>
</section>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/two.min.js"></script>

<script>
function easeInOutCubic (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
const halfRotation = Math.PI
const fullRotation = Math.PI * 2

function clamp(input, min, max) {
  return Math.max(min, Math.min(input, max))
}

function map(value, low1, high1, low2, high2) {
  return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1);
}

function randomNumber(min, max) {
  return Math.random() * (max - min) + min
}

function randomRoundNumber(min, max) {
  return Math.round(randomNumber(min, max))
}

function mapAndClamp(value, low1, high1, low2, high2) {
  return clamp(
    map(value, low1, high1, low2, high2),
    Math.min(low2, high2), 
    Math.max(low2, high2)
  )
.........完整代码请登录后点击上方下载按钮下载查看