制作一个 myFish 锦鲤组件

通过CSS Transform 改变锦鲤坐标，

<template>
  <div>
    <div class="FishRoot" :style="style" ></div>
  </div>
</template>
<script setup lang="ts">
import {computed} from "vue";
const props = defineProps({
  x: Number,
  y: Number,
  angle: Number,
  color: String,
  scale: Number
})
const scale = props.scale || 1;
const style = computed(()=>{
  return `color: ${props.color};transform: translate(${props.x}px, ${
      props.y
  }px) rotate(${props.angle}deg) scale(${scale}, ${
      scale * 0.8
  }) rotate(${-45}deg);`;
})
</script>
<style lang="scss" scoped>
.FishRoot {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px ;
  height: 20px ;
  background-color: transparent;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 17px  17px  0;
  border-radius: 6px ;
  opacity: 0.7;
  will-change: transform;
  pointer-events: none;
&::after {
   position: absolute;
   content: "";
   width: 5px ;
   height: 5px ;
   right: -22px ;
   bottom: -22px ;
   background-color: transparent;
   border-color: currentColor;
   border-style: solid;
   border-width: 7px 0 0 7px ;
   border-radius: 2px ;
   transform-origin: left top;
 }
&::before {
   position: absolute;
   content: "";
   width: 3px ;
   height: 3px ;
   left: 9px ;
   top: 3px ;
   background-color: #111;
   border-radius: 3px ;
 }
}
</style>

创建 FishLayer 组件来排列多条锦鲤

<template>
  <!--显示指定数量的锦鲤-->
  <div class="FishLayerRoot">
      <my-fish
          v-for="fishProps in stageState.fishList"
          :key="fishProps.id"
          class="FishElement"
          :x="fishProps.position.x"
          :y="fishProps.position.y"
          :angle="fishProps.angle"
          :color="fishProps.color"
          :scale="fishProps.scale"
      />
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, reactive} from "vue";
import { FishModel } from "../core/FishModel";
import { Point } from "../core/Point";
import {useMouse} from "../core/useMouse";
import { useAnimationFrame } from "../core/useAnimationFrame";
import { useClick } from "../core/useClick";
import MyFish from "./myFish.vue";
// 锦鲤状态,
type StageState = {
  fishList: FishModel[]; //创建了一个类来定义锦鲤的状态和运动
};
export default defineComponent({
  components: {MyFish},
  props: {
    //最大锦鲤数
    maxFish: {
      type: Number,
      default: 10
    },
  },
  setup(props,ctx) {
    // 状态
    const stageState = reactive<StageState>({
      fishList:[]
    })
    // 使用鼠标坐标作为状态
    const {mousePos:destination} = useMouse(); //管理指针坐标
    // 现在的锦鲤数
    const fishCount = computed(()=>stageState.fishList.length);
    // 更新锦鲤的位置和速度
    const updateFish = () => {
      const destPoint = new Point(destination.x, destination.y);
      stageState.fishList.forEach((fish) => fish.update(destPoint));
    };
    //添加锦鲤数量
    const addFish = ()  => {
      stageState.fishList.push(new FishModel());
      ctx.emit("count-changed", fishCount.value);
    };
    // 移除锦鲤
    const removeFish = () => {
      stageState.fishList.shift();
      ctx.emit("count-changed", fishCount.value);
    }
    // 更新锦鲤状态
    useAnimationFrame(()=> {
      updateFish();
      if (fishCount.value < props.maxFish){
        addFish();
      }else if (fishCount.value > props.maxFish){
        removeFish();
      }
      //如果它返回 true，它将被重复调用直到销毁
      return true
    });
    //点击动作,施加与光标方向相反的力，使锦鲤逃脱
    useClick(() => {
      stageState.fishList.forEach((fish) =>
          fish.setForce(-1 - Math.random() * 4)
      );
    });
    return {
      stageState
    }
  }
})
</script>

创建了一个 FishModel 类来定义锦鲤的状态和运动

import { Point } from "./Point";
const DEFAULT_FORCE = 0.25;
const FORCE_DECREMENT_RATE = 0.03;
let instanseCount = 0;
const random = (min: number, max: number) => min + (max - min) * Math.random();
const randomPoint = (): Point => {
    return new Point(
        Math.random() * window.innerWidth,
        Math.random() * window.innerHeight
    );
};
const randomFishColor = (): string => {
    const isRed = Math.random() < 0.8;
    return isRed
        ? `hsl(${random(0, 20)}, 80%, 60%)`
        : `hsl(${random(240, 260)}, 30%, 40%)`;
};
const randomScale = (): number => {
    return Math.random() * 0.5 + 0.6;
};
export class FishModel {
    readonly id = instanseCount++;
    //位置
    position = randomPoint();
    // 方向
    angle = Math.random() * 360;
    // 速度矢量图
    vector = new Point();
    //目标导向的力量
    force = DEFAULT_FORCE;
    //颜色
    color = randomFishColor();
    // 缩放
    scale = randomScale();
    insensitiveTerms = 0;
    //更新锦鲤速度和位置
    update(destPoint: Point) {
        const MAX_SPEED = 3;
        this.force = this.force * (1 - FORCE_DECREMENT_RATE) + DEFAULT_FORCE * FORCE_DECREMENT_RATE
        if (this.insensitiveTerms <= 0) {
            const distVec = destPoint.sub(this.position);
            const dist = distVec.length;
            const aVec = distVec.unit((dist * this.force) / 100);
            this.vector = this.vector.add(aVec).limit(MAX_SPEED);
            if (dist < 20) {
                this.vector = this.vector.rotate(random(-70, 70));
                this.insensitiveTerms = random(20, 30);
            }
        } else {
            this.insensitiveTerms--;
        }
        this.angle = this.vector.angle + 180;
        this.position = this.position.add(this.vector);
    }
  //设置锦鲤向“目标点”移动的力。如果你指定一个负值，它会排斥并从该点逃逸
    setForce(value: number) {
        this.force = value;
    }

创建一个Point类

export class Point {
    readonly x: number;
    readonly y: number;
    constructor(x = 0, y = 0, a = 0) {
        this.x = x;
        this.y = y;
    }
    get length(): number {
        return Math.sqrt(this.x ** 2 + this.y ** 2);
    }
    get angle(): number {
        const rad2angle = (r: number): number => (r / Math.PI) * 180;
        return rad2angle(Math.atan2(this.y, this.x));
    }
    add(p: Point): Point {
        return new Point(this.x + p.x, this.y + p.y);
    }
    sub(p: Point): Point {
        return new Point(this.x - p.x, this.y - p.y);
    }
    times(n: number): Point {
        return new Point(this.x * n, this.y * n);
    }
    unit(unitLength = 1): Point {
        const len = this.length;
        return new Point((this.x / len) * unitLength, (this.y / len) * unitLength);
    }
    limit(maxLength = 1): Point {
        return this.length <= maxLength ? this : this.unit(maxLength);
    }
    rotate(deg: number): Point {
        const angle2rad = (a: number): number => (a * Math.PI) / 180;
        const rad = angle2rad(this.angle + deg);
        const l = this.length;
        return new Point(Math.cos(rad) * l, Math.sin(rad) * l);
    }
}

用useMouse单独管理指针坐标

useMouse是在composition-api的讲解中几乎总是会出现的一个sample，但它其实是编写交互式事件处理时使用composition-api的一种非常有效的方式。

import { onMounted, reactive, onUnmounted } from "vue";
export const useMouse = (targetDom?: HTMLElement) => {
    const mousePos = reactive({
        x: 0,
        y: 0,
    });
    //可以通过“在PC上移动光标”或“在手机上触摸并滑动”来引导锦鲤
    const onMove = (ev: PointerEvent): void => {
        mousePos.x = ev.clientX;
        mousePos.y = ev.clientY;
    };
    const onMoveTouch = (ev: TouchEvent): void => {
        mousePos.x = ev.touches[0].clientX;
        mousePos.y = ev.touches[0].clientY;
    };
    onMounted(() => {
        const target = targetDom ?? document.body;
        target.addEventListener("pointermove", onMove);
        target.addEventListener("touchmove", onMoveTouch);
    });
    onUnmounted(() => {
        const target = targetDom ?? document.body;
        target.removeEventListener("pointermove", onMove);
        target.removeEventListener("touchmove", onMoveTouch);
    });
    return {
        mousePos,
    };
};

requestAnimationFrame 的管理

在没有动画库的情况下实现交互式游戏或动画表达式时，window.requestAnimation会大量使用计时器。这种代码也让组件变长，可读性降低，所以最好用composition-api暴露出来。

import { onMounted, onBeforeUnmount } from "vue";
//返回 true 以继续调用下一帧
export const useAnimationFrame = (onFire: () => boolean) => {
    let isTerminated = false;
    onMounted(() => {
        const tick = () => {
            requestAnimationFrame(() => {
                if (isTerminated) {
                    return;
                }
                const shouldContinue = onFire();
                if (shouldContinue) {
                    tick();
                }
            });
        };
        tick();
    });
    onBeforeUnmount(() => {
        isTerminated = true;
    });
    return {};
};

绘制一个背景组件 StageBg

<template>
  <!-- 绘制背景的组件 -->
  <div class="StageBgRoot">
    <transition-group name="list">
      <div
          class="Stone"
          v-for="stone in stones"
          :key="stone.id"
          :style="{
          left: `calc(${stone.x * 100}% - ${stone.size / 2}px)`,
          top: `calc(${stone.y * 100}% - ${stone.size / 2}px)`,
          width: `${stone.size}px`,
          height: `${stone.size}px`,
          backgroundColor: stone.color,
        }"
      />
    </transition-group>
    <slot />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useTicker } from "../core/useTicker";
type StoneModel = {
  id: number;
  x: number;
  y: number;
  size: number;
  color: string;
};
const randomStoneColor = (sizeRate: number): string => {
  const isRed = sizeRate < 0.25;
  const l = (1 - sizeRate) * 50 + 10;
  return isRed
      ? `hsl(${0 + Math.random() * 30}, 70%, 70%, ${1 - sizeRate})`
      : `hsl(${170 + Math.random() * 50}, 30%, ${l}%, ${1 - sizeRate})`;
};
const createStone = (): StoneModel => {
  const sizeR = Math.random();
  return {
    id: Math.random(),
    x: Math.random(),
    y: Math.random(),
    size: 20 + sizeR ** 2 * 200,
    color: randomStoneColor(sizeR),
  };
};
const MAX_STONE = 50;
export default defineComponent({
  name: "StageBg",
  setup(_, ctx) {
    const stones = ref<StoneModel[]>([]);
    const addStone = () => {
      stones.value.push(createStone());
      if (stones.value.length > MAX_STONE) {
        stones.value.shift();
      }
    };
    useTicker(addStone, 400);
    return {
      stones,
    };
  },
});
</script>
<style lang="scss" scoped>
.Stone.list-enter-from, .Stone.list-leave-to {
  opacity: 0;
}
.Stone {
  position: absolute;
  border-radius: 100%;
  opacity: 1;
  transition: opacity 5s;
}
.StageBgRoot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
useTicker 规定时间内增加的石头
import { onMounted, onUnmounted } from "vue";
export const useTicker = (onTick: () => void, interval = 1000) => {
    let timer = 0;
    onMounted(() => {
        timer = window.setInterval(onTick, interval);
    });
    onUnmounted(() => {
        window.clearInterval(timer);
    });
    return {};
};

背景和锦鲤组合成一个组件 stageFish

<template>
  <!--合成背景、锦鲤-->
  <stage-bg class="StageRoot" >
    <FishLayer :maxFish="maxFish" @count-changed="fishCountChanged" />
  </stage-bg>
</template>
<script lang="ts">
import FishLayer from "./FishLayer.vue";
import {defineComponent} from "vue";
import StageBg from "./stageBg.vue";
export default defineComponent({
  name: "stageFish",
  components: {StageBg, FishLayer},
  props: {
    maxFish: { type: Number, default: 50 },
  },
  setup(props,ctx) {
    //锦鲤数量变化时的事件
    const fishCountChanged = (count: number) => {
      ctx.emit('count-changed', count);
    }
    return {
      fishCountChanged
    }
  }
})
</script>

使用

<template>
  <div id="app">
    <div class="Control">
      <button @click="addFish">Add 10 Fish</button>
      <button @click="removeFish">Remove 10 Fish</button>
      <span>fish count = {{ fishCount }}</span>
    </div>
    <stage-fish :maxFish="maxFish" @count-changed="fishCountChanged" />
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import StageFish from "./components/stageFish.vue";
const maxFish = ref(10)
const fishCount = ref(0)
const addFish = () => {
  maxFish.value += 2;
}
const removeFish = () => {
  maxFish.value = Math.max(0, maxFish.value - 10);
}
const fishCountChanged = (count: number) => {
  fishCount.value = count;
}
</script>
<style lang="scss">
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  background-color: rgb(31, 36, 43);
  color: rgb(80, 110, 124);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  overflow: hidden;
}
button {
  display: inline-block;
  margin-right: 5px;
  border: 2px solid rgb(80, 110, 124);
  color: rgb(80, 110, 124);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  padding: 2px 5px;
  background-color: transparent;
}
#app {
  position: absolute;
  width: 100%;
  height: 100%;
}
.Control {
  position: absolute;
  z-index: 1;
  width: 100%;
  padding: 5px;
  background-color: #00000066;
}
</style>

vue3 composition-api实现游动锦鲤喜欢的可以自己动手实现哦很有成就感的

通过CSS Transform 改变锦鲤坐标，

创建 FishLayer 组件来排列多条锦鲤

创建了一个 FishModel 类来定义锦鲤的状态和运动

创建一个Point类

requestAnimationFrame 的管理

绘制一个背景组件 StageBg

背景和锦鲤组合成一个组件 stageFish

使用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vue3 composition-api实现游动锦鲤 喜欢的可以自己动手实现哦很有成就感的

通过CSS Transform 改变锦鲤坐标，

创建 FishLayer 组件来排列多条锦鲤

创建了一个 FishModel 类来定义锦鲤的状态和运动

创建一个Point类

requestAnimationFrame 的管理

绘制一个背景组件 StageBg

背景和锦鲤组合成一个组件 stageFish

使用

热门文章

最新文章

相关课程

相关电子书

相关实验场景

vue3 composition-api实现游动锦鲤喜欢的可以自己动手实现哦很有成就感的