co-rotate-v3

Vue3.0 3d环绕旋转动画

目前组件支持

1. 旋转方向 逆时针 和 顺时针
2. 单步旋转 & 持续旋转
3. 手动拖动旋转
4. 限定展示个数 多余数据的旋转过程中替换显示
5. 自定义摆放角度

安装

npm install co-rotate-v3 --save

注册组件

• 全局组件注册 install

  // **main.js**
  import { createApp } from 'vue';
  import App from './App.vue';
  import coRotateV3 from "co-rotate-v3";
  const app = createApp(App);
  app.use(coRotateV3);
  app.mount('#app');

• 单个.vue文件局部注册

<script setup>
  import { coRotateV3 } from "co-rotate-v3";
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | | ----------------------- | ------------------------------------------------ | -------- | --------------------------------- | | listAll (必须) | 列表内容 (对象数组格式) | Array | [] | | duration | 一圈动画时长 ms | Number | 25000 | | startDelay | 首次入场动画的延迟时间 ms | Number | 0 | | endDelay | 单步旋转 延迟时间 ms | Number | 0 | | rotateX | 3d x轴倾斜角度deg | Number | 75 | | rotateY | 3d y轴倾斜角度deg | Number | 0 | | direction | 滚动方向 normal 逆时针 reverse 顺时针 | String | 'normal' | | opacityLow | 旋转到背后最小透明度 | Number | 0.2 | | radius | 圆环半径 | Number | 300 | | showLength | 一圈最多展示个数 多余数据的旋转过程中替换显示 | Number | 8 | | perspective | 透视距离 10000几乎没有近大远小效果 | Number | 10000 | | openLine | 是否开启item之间的连线(辅助线 开发调试用) | Boolean | false | | openTouch | 是否开启拖动 | Boolean | true | | customAngles | 自定义摆放角度数组 | Array | [] |

使用组件

<template>
 <co-rotate-v3 :listAll="list" :radius="200" :perspective="7000" :rotateY="55" :opacityLow="0.9" :duration="20000" :showLength="6">
	<!-- 旋转物体 -->
	<template #default="{ item }">
		<div class="item-box">
			{{ item.text }}
		</div>
	</template>
	<!-- 被环绕物 -->
	<template #circle-ball>
		<div class="ball"></div>
	</template>
</co-rotate-v3>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { coRotateV3 } from "co-rotate-v3";

const list = ref([]);

onMounted(() => {
	Array.from({ length: 6 }).forEach((_, index) => {
		list.value.push({ text: `Item ${index + 1}` });
	});
});
</script>

<style scoped lang="scss">
.center-main {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 旋转物体 */
	.item-box {
		width: 124px;
		height: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #e0e8f4;
		background-color: orange;
	}
	/* 被环绕物 */
	.ball {
		width: 130px;
		height: 500px;
		background: red;
	}
}
</style>

依赖

• Vue 3.x
• animejs 3.x