论坛意见建议/bug反馈提交 专用帖

ksm 发表于 2023-12-6 00:30
呜呜呜原来可以修改用户名，才看到对不起打扰了！

很多功能都比较隐藏

回复

网站只有鼠标拖尾太单调了，可以考虑再加入点击特效

写的一个示例，可以直接贴到控制台看效果

function clickAnimation(e) {
    const img_width = 30;
    const img_height = 30

    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

    const base_x = e.clientX + scrollLeft - img_width / 2;
    const base_y = e.clientY + scrollTop - img_height / 2;

    const fadeTime = 600;
    const frameTime = 10;
    const frameCount = fadeTime / frameTime;

    let rotate = 0;
    let rotate_max = 600;
    let rotate_step = Math.floor(Math.random() * rotate_max / frameCount + 1);
    let x = 0;
    let x_offset = Math.floor(Math.random() * 200 - 100);
    let x_step = x_offset / frameCount;
    let y = 0;
    let y_offset = Math.floor(Math.random() * 200 - 100);
    let y_step = y_offset / frameCount;
    let opacity = 1;
    let opacity_step = 1 / frameCount;
    let scale = 1;
    let scale_step = 1 / frameCount;

    let blooming = document.createElement("div");
    blooming.style.position = "absolute";
    blooming.style.width = img_width + "px";
    blooming.style.height = img_height + "px";
    blooming.style.left = base_x + "px";
    blooming.style.top = base_y + "px";
    blooming.style.backgroundImage = String.raw`url(https://tb2.bdstatic.com/tb/editor/images/face/i_f25.png)`;

    document.body.appendChild(blooming);

    let frameIndex = 0;
    let timer = setInterval(function () {
        frameIndex++;
        rotate = Math.floor(frameIndex * rotate_step);
        x = frameIndex * x_step;
        y = frameIndex * y_step;
        opacity = 1 - frameIndex * opacity_step;
        if (opacity < 0) opacity = 0;
        scale = 1 - frameIndex * scale_step;
        if (scale < 0) scale = 0;
        blooming.style.opacity = opacity;
        blooming.style.left = base_x + x + "px";
        blooming.style.top = base_y + y + "px";
        blooming.style.transform = `rotate(${rotate}deg) scale(${scale})`;
        /* Opera、Chrome 和 Safari */
        blooming.style.WebkitTransform = `rotate(${rotate}deg) scale(${scale})`;
        /* IE 9 */
        blooming.style.msTransform = `rotate(${rotate}deg) scale(${scale})`;
    }, frameTime);
    setTimeout(function () {
        clearInterval(timer);
        blooming.remove();
    }, fadeTime);

}

document.addEventListener("click", function (e) {
    for (let i = 0; i <= Math.floor(Math.random() * 3 + 3); i++)
        clickAnimation(e);
});

回复

AMD 2023-12-14 02:43

回复

点击特效的话，我看看做成仿osu客户端那样子的，一个圆圈看看。拖尾其实也是仿的osu客户端啦

好，我先加了个纯文字的。 然后这段的话感觉可以稍微优化一下，减少对DOM的访问来提高性能：

function createAnimationElement() {
  const img_width = 30;
  const img_height = 30;

  const blooming = document.createElement("div");
  blooming.classList.add("blooming");
  blooming.style.position = "absolute";
  blooming.style.width = img_width + "px";
  blooming.style.height = img_height + "px";
  blooming.style.backgroundImage = `url(https://tb2.bdstatic.com/tb/editor/images/face/i_f25.png)`;

  return blooming;
}

function clickAnimation(e) {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

  const base_x = e.clientX + scrollLeft - 15;
  const base_y = e.clientY + scrollTop - 15;

  const fadeTime = 600;
  const frameTime = 10;
  const frameCount = fadeTime / frameTime;

  const elements = [];
  const animations = [];

  const clickCount = Math.floor(Math.random() * 3 + 3);

  for (let i = 0; i < clickCount; i++) {
    const blooming = createAnimationElement();
    elements.push(blooming);

    let frameIndex = 0;
    let opacity = 1;
    let scale = 1;
    const rotate_max = 600;
    const rotate_step = Math.floor(Math.random() * rotate_max / frameCount + 1);
    const x_offset = Math.floor(Math.random() * 200 - 100);
    const x_step = x_offset / frameCount;
    const y_offset = Math.floor(Math.random() * 200 - 100);
    const y_step = y_offset / frameCount;

    animations.push({
      blooming,
      frameIndex,
      opacity,
      scale,
      rotate_step,
      x_step,
      y_step
    });
  }

  let animationId;

  function animate() {
    animationId = requestAnimationFrame(animate);

    for (let i = 0; i < animations.length; i++) {
      const {
        blooming,
        frameIndex,
        opacity,
        scale,
        rotate_step,
        x_step,
        y_step
      } = animations[i];

      const rotate = Math.floor(frameIndex * rotate_step);
      const x = frameIndex * x_step;
      const y = frameIndex * y_step;
      const newOpacity = 1 - frameIndex * (1 / frameCount);
      const newScale = 1 - frameIndex * (1 / frameCount);

      blooming.style.opacity = newOpacity > 0 ? newOpacity : 0;
      blooming.style.transform = `rotate(${rotate}deg) scale(${newScale})`;
      blooming.style.WebkitTransform = `rotate(${rotate}deg) scale(${newScale})`;
      blooming.style.left = base_x + x + "px";
      blooming.style.top = base_y + y + "px";

      if (frameIndex < frameCount) {
        animations[i].frameIndex = frameIndex + 1;
      } else {
        blooming.remove();
        elements.splice(i, 1);
        animations.splice(i, 1);
        i--;
      }
    }

    if (animations.length === 0) {
      cancelAnimationFrame(animationId);
    }
  }

  animate();

  for (const blooming of elements) {
    document.body.appendChild(blooming);
  }
}

document.addEventListener("click", function (e) {
  clickAnimation(e);
});

回复

AMD回复ExSepanker 2023-12-15 10:39

回复

小巫见大巫，稍微适合论坛一点，原代码更棒

ExSepanker 2023-12-14 14:04

回复

大佬就是专业