和网站签约新闻,网站搭建平台demo免费,怎么自己做刷赞网站,昆山网站建设推广1. GSAP (GreenSock Animation Platform)
特点#xff1a;功能强大的专业动画库#xff0c;支持复杂时间轴控制和高性能动画#xff0c;适合精细交互效果。
安装#xff1a;
npm install gsapVue3TS使用示例#xff1a;
script setup langts
impo…1. GSAP (GreenSock Animation Platform)
特点功能强大的专业动画库支持复杂时间轴控制和高性能动画适合精细交互效果。
安装
npm install gsapVue3TS使用示例
script setup langts
import { onMounted, ref } from vue
import gsap from gsapconst boxRef refHTMLDivElement(null)onMounted(() {if (boxRef.value) {// 创建时间轴动画const tl gsap.timeline({defaults: { duration: 1, ease: power2.inOut }})tl.to(boxRef.value, {x: 200,rotation: 360,opacity: 0.8}).to(boxRef.value, {y: 100,scale: 1.5}, -0.5)}
})
/scripttemplatediv refboxRef classbox/div
/templatestyle scoped
.box { width: 100px; height: 100px; background: #4A6FA5; }
/style2. Lottie (vue3-lottie)
特点支持After Effects导出的高质量动画通过JSON文件渲染适合复杂图标和UI动效。
安装
npm install vue3-lottielatest --save配置与使用
import { createApp } from vue
import App from ./App.vue
import Vue3Lottie from vue3-lottie
import vue3-lottie/dist/style.csscreateApp(App).use(Vue3Lottie).mount(#app)templateVue3Lottie:animationDataanimationData:width200:height200:looptrue/
/templatescript setup langts
import animationData from ../assets/animations/loading.json
/script3. Motion Vue
特点专为Vue3设计的声明式动画库支持手势驱动和状态过渡动画API简洁直观。
安装
npm install motion-vue使用示例
templateMotion:animate{ scale: isHovered ? 1.1 : 1, opacity: 1 }:transition{ type: spring, stiffness: 300 }mouseenterisHovered truemouseleaveisHovered falsebutton classbtn悬停动画/button/Motion
/templatescript setup langts
import { ref } from vue
import { Motion } from motion-vueconst isHovered ref(false)
/script选型建议
复杂交互动画优先选择GSAP适合页面过渡、滚动动画等场景高质量UI动效使用Lottie可从获取海量现成动画轻量级声明式动画尝试Motion Vue适合快速实现组件级动画性能敏感场景避免同时使用多个动画库优先选择原生CSS过渡或Vue内置Transition组件
