vue+gsap实现旋转控制组件

最新推荐文章于 2023-08-09 17:16:09 发布

VIP文章智慧方

最新推荐文章于 2023-08-09 17:16:09 发布

阅读量303

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42401291/article/details/129027451

版权

1.安装vue项目
2.安装gsap

官网：GreenSock

3.完整组件代码

<template>
	gsap使用
	官网：https://greensock.com/docs/v3
	<div>
		圆形拖动组件
		<div class="btn-wrap">
			<div class="btn" ref="btn" :style="{ transform: `rotate(${rotateNum}deg)`}">
				<svg width="1em" height="1em" viewBox="0 0 512 512">
					<path fill="currentColor"
						d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-110.9-193.1l-53.6-53.6c-10.1-10.1-2.9-27.3 11.3-27.3H256v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32h65.4c14.2 0 21.4 17.2 11.3 27.3l-53.6 53.6c-3.1 3.1-3.1 8.2 0 11.3z" />
				</svg>
			</div>
		</div>
	<