html - Javascript / Css matrix3d onscroll函数在旋转时会缩小元素

发布于 2020-04-06 00:36:47

我正在尝试制作一个使用Css matrix3d来转换滚动元素的函数。我正在使用ReMatrix库（在这里ReMatrix中找到）来计算矩阵，然后在onscroll函数中使用百分比进度来计算元素在场景中移动的百分比。所有这些都很好。

问题是，旋转元素时似乎会收缩，然后随着场景的进行又增长回正常大小。这是matrix3d的预期行为吗？

3dmatrix中的一些初始值是1，所以我通过加1然后减1来解决这个问题。除旋转外，其他所有值都可以正常工作。

我是否在数学中缺少某些东西，我太愚蠢以至于无法确定它以正确的值开始和结束，但是在整个场景中会缩小并增长。

这是小提琴和摘录示例的小提琴演示

注意：我只是在演示中使用700px进行场景进度。您可以在滚动700px后忽略效果，或者当框旋转90度以上时，这只是一个演示。

let matrix;
const el = document.querySelector('.box');

const updateScroll = () => {

  const scrollPos = window.scrollY;
  const progress = scrollPos / 700;
  
  let m = [...matrix];
  m[0] = progress * (matrix[0] - 1) + 1;
  m[1] = progress * matrix[1];
  m[2] = progress * matrix[2];
  m[3] = progress * matrix[3];
  m[4] = progress * matrix[4];
  m[5] = progress * (matrix[5] - 1) + 1;
  m[6] = progress * matrix[6];
  m[7] = progress * matrix[7];
  m[8] = progress * matrix[8];
  m[9] = progress * matrix[9];
  m[10] = progress * (matrix[10] - 1) + 1;
  m[11] = progress * matrix[11];
  m[12] = progress * (matrix[12] / 100) * 100;
  m[13] = progress * (matrix[13] / 100) * 100;
  m[14] = progress * (matrix[14] / 100) * 100;
  m[15] = progress * (matrix[15] - 1) + 1;
  
  setTransform(el, toString(m));
}

const init = () => {
  const r1 = rotateZ(90);
  const t1 = translateY(700);
  matrix = multiply(t1,r1);
  window.addEventListener('scroll', updateScroll);
}

const setTransform = (el, transform) => {
  el.style.transform = transform;
  el.style.WebkitTransform = transform;
};

/*
*  
* REMATRIX Functions
* https://github.com/jlmakes/rematrix
*
*/


function translateY(distance) {
  const matrix = identity();
  matrix[13] = distance;
  return matrix;
}

function toString(source) {
  return `matrix3d(${format(source).join(', ')})`;
}

function rotateZ(angle) {
  const theta = (Math.PI / 180) * angle;
  const matrix = identity();

  matrix[0] = matrix[5] = Math.cos(theta).toFixed(6);
  matrix[1] = matrix[4] = Math.sin(theta).toFixed(6);
  matrix[4] *= -1;

  return matrix;
}

function format(source) {
  if (source.constructor !== Array) {
    throw new TypeError('Expected array.');
  }
  if (source.length === 16) {
    return source;
  }
  if (source.length === 6) {
    const matrix = identity();
    matrix[0] = source[0];
    matrix[1] = source[1];
    matrix[4] = source[2];
    matrix[5] = source[3];
    matrix[12] = source[4];
    matrix[13] = source[5];
    return matrix;
  }
  throw new RangeError('Expected array with either 6 or 16 values.');
}

function identity() {
  const matrix = [];
  for (let i = 0; i < 16; i++) {
    i % 5 == 0 ? matrix.push(1) : matrix.push(0);
  }
  return matrix;
}

function multiply(m, x) {
  const fm = format(m);
  const fx = format(x);
  const product = [];

  for (let i = 0; i < 4; i++) {
    const row = [fm[i], fm[i + 4], fm[i + 8], fm[i + 12]];
    for (let j = 0; j < 4; j++) {
      const k = j * 4;
      const col = [fx[k], fx[k + 1], fx[k + 2], fx[k + 3]];
      const result =
        row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3];

      product[i + k] = result;
    }
  }

  return product;
}

init();

body{
  min-height: 400vh;
}

.box{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: green;
}

<div class="box"></div>

任何人的帮助在这里将不胜感激。谢谢。

提问者

user3331344

被浏览

查看英文版

查看原文

function rotateZ(angle) { const theta = (Math.PI / 180) * angle; const matrix = identity(); matrix[0] = matrix[5] = Math.cos(theta).toFixed(6); matrix[1] = matrix[4] = Math.sin(theta).toFixed(6); matrix[4] *= -1; return matrix; }

html - Javascript / Css matrix3d onscroll函数在旋转时会缩小元素

热门帖子

相关问题

热门github