创建个人网站（二）前端主页设计和编写一（太阳移动）

前言

以下内容纯纯当乐子来看就行，知识分享一下这样设计的原因，想看正文直接见下一节
为什么创建个人网站一之后几天没有动静了呢，一个是家里有事实在比较忙，第二个原因是没想到主页要设计成什么样，知道前两天问我姐什么样的主页比较炫酷，我们得出的结论是也许有层次感的会很不错，我想起了之前看到的wallpaperengine的壁纸，有个随时间变化的壁纸我觉得很棒，那不如就以这个为参考，因为我的博客不需要太多模块，只要让主页变成一个内容入口就行了，搞得月花里胡哨越好，就在昨天我看到了一个codepen用的是svg制作的一个按钮，我觉得可以用svg做一个动画，目前准备先搞一个随滚轮移动的太阳。

太阳

svg绘制

首先我们需要一个svg的圆，然后用svg自带的线性渐变绘制太阳的颜色，如下图所示

<template>
  <div style="height: 100%">
    <svg width="100%" height="700px" preserveAspectRatio="none">
      <defs>
        <!-- 滤镜和渐变都放在这里 -->
        <linearGradient id="sun" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="5%" style="stop-color: rgb(255, 55, 0)" />
          <stop offset="90%" style="stop-color: rgb(255, 153, 0)" />
        </linearGradient>
      </defs>
      <circle
        ref="sun"
        :cx="cxPercentage"
        :cy="cyPercentage"
        :r="rPercentage"
        style="fill: url(#sun)"
      ></circle>
    </svg>
  </div>
</template>

制作动画

制作动画的代码参考的是以前写的那篇Canvas小练习之随机色彩变化里面的动画的的使用

<script setup>
import { ref, computed } from "vue";

const cx = ref(5); // x初始值
const cy = ref(80); // y初始值
const r = ref(4); // 半径
const timer = ref(null);

// 计算相对于SVG宽度和高度的百分比值
const cxPercentage = computed(() => `${cx.value}%`);
const cyPercentage = computed(() => `${cy.value}%`);
const rPercentage = computed(() => `${r.value}%`);

// 日出
const sunRise = () => {
  if (cx.value < 95) {
    cx.value++;
    cy.value = 80 - Math.sqrt(45 * 45 - Math.pow(cx.value - 50, 2));
    return true;
  } else {
    return false;
  }
};

// 日落
const sunSet = () => {
  if (cx.value > 5) {
    cx.value--;
    cy.value = 80 - Math.sqrt(45 * 45 - Math.pow(cx.value - 50, 2));
    return true;
  } else {
    return false;
  }
};

const animate = (isDown, count = 0) => {
  if (isDown) {
    if (count < 90) {
      if (!sunRise(count)) {
        window.cancelAnimationFrame(timer.value);
        return;
      }
    } else {
      window.cancelAnimationFrame(timer.value);
      return;
    }
  } else {
    if (count < 90) {
      if (!sunSet(count)) {
        window.cancelAnimationFrame(timer.value);
        return;
      }
    } else {
      window.cancelAnimationFrame(timer.value);
      return;
    }
  }
  timer.value = window.requestAnimationFrame(() => {
    animate(isDown, count + 1);
  }); 
};

window.addEventListener("wheel", (event) => {
  // console.log(event);
  if (event.deltaY > 0) {
    console.log("down");
    animate(true);
  } else if (event.deltaY < 0) {
    console.log("up");
    animate(false);
  }
});
</script>

js代码讲解

其实很简单就能实现，很容易看出来，它只是画了一个半圆，只有两个稍微有点复杂的东西

1. 使用动画
2. 计算路径

动画

timer.value = window.requestAnimationFrame(() => {
animate(isDown, count + 1);
});
这个是用来逐帧执行animate函数，但其实这个没有作多浏览器内核的适配，以后再说吧
只要记得把这个timer清除即可

计算路径

计算路径其实也很简单，viewport的坐标轴左上角是原点，x坐标轴是向右递增的，y坐标轴是向下递增的，我给圆的初始位置是（5，80），也就可以轻松的得到轨迹路径
$$(x?50{)}^2+(y?80{)}^2=45^2$$
我们只要下半圆，所以得到y的值就是
$$y=80?\sqrt{45^2?(x?50{)}^2}$$
变成代码就是

cy.value = 80 - Math.sqrt(45 * 45 - Math.pow(cx.value - 50, 2));