vue3运用gsap动画库实现画布拖动功能

前言

之前在网上看见一个画布功能，一直就想用在自己的博客首页上，先开始的时候研究了一下，利用transform 实现了一个，但是不是很流畅。CSDN博客内容地址 实现一个简单的画布拖动功能，最终选择用 gsap动画库 实现

实现

1. 首先是安装 用 yarn 还是 npm 都行

   	yarn add gsap
   

   	npm install gsap
   

2. 引入gsap和Draggable

   	import gsap from "gsap";
   	import Draggable from "gsap/Draggable";
   

3. 挂载Draggable插件

   	gsap.registerPlugin(Draggable);
   

4. 创建拖动动画

   • 注：要在dom 挂载完成之后 创建动画
   • “.myCanvas” 需要拖动的画布的class或者ID
   • bounds 边界，不设置的话会 超出范围。可以是：元素 “body”、“html”；类名".class"（确保唯一性）；ID"#app"，为了确保唯一性，建议使用元素和id
   • edgeResistance 边缘 阻力 范围值 0~1 值越小，拖离边缘的阻力越小
   • type 拖动的方向默认 “x,y”
   • onDragStart 拖动开始的钩子函数
   • onDrag 拖动中的钩子函数
   • onDragEnd 拖动结束的钩子函数

   	Draggable.create(".myCanvas", {
   		bounds: "body", 
   		edgeResistance: 0.9,
   		type: "x,y",
   		onDragStart: (e) => {
     		// console.log("onDragStart", e);
   	  },
   	  onDrag: (e) => {
   		  // console.log("onDrag", e);
   		},
   		onDragEnd: (e) => {
     		// console.log("onDragEnd", e);
   		},
   	});
   

5. html

   	<div ref="myCanvas" class="myCanvas" id="myCanvas">
     <!-- 时间插件 -->
     <div v-lazy style="position: absolute; top: 220px; left: 1400px">
       <BClock></BClock>
     </div>
   </div>
   

6. css样式

   	.b-home {
   	overflow: hidden;
   	margin: 0;
   	width: 100vw;
   	background: transparent;
   
   	.myCanvas {
       	width: 3200px;
       	height: 2000px;
       	position: relative;
       	transition: all ease 0.2s;
       	z-index: 1;
       	background-image: url(../images/texture.png);
       	background: transparent;
   	}
   	&-car_random{
       	opacity: 0;
   	}
   }
   

7. JavaScript

   <script setup lang="ts">
   import { onMounted } from "vue";
   import gsap from "gsap";
   import Draggable from "gsap/Draggable";
   
   gsap.registerPlugin(Draggable);
   
   onMounted(() => {
   	Draggable.create(".myCanvas", {
   		bounds: "body",
   		edgeResistance: 0.9,
   		type: "x,y",
   		onDragStart: (e) => {
     		// console.log("onDragStart", e);
   		},
   		onDrag: (e) => {
     		// console.log("onDrag", e);
   		},
   		onDragEnd: (e) => {
     		// console.log("onDragEnd", e);
   		},
   	});
   });
   </script>
   

   更具体的可以参考 官网文档

   效果图可参考自建博客首页

到此结束