本文主要是介绍gsap动画库的实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
先看效果:
gsap动画库
安装插件:npm install gsap
<template><div><h1 style="text-align: left">gsap的用法</h1><h1 style="text-align: left">https://gsap.com/resources/get-started</h1><div><div style="width: 600px; border: 1px solid red; border-radius: 100px"><div class="circle"></div></div><div style="text-align: left; margin-top: 10px"><el-button type="primary" @click="to_fn" round> 动起来 to </el-button><el-button type="primary" @click="from_fn" round>动起来 from</el-button><el-button type="primary" @click="fromTo_fn" round>动起来 fromTo</el-button><el-button type="primary" @click="set_fn" round> 动起来 set </el-button><el-button type="primary" @click="reset" round> 复位 </el-button></div></div><divstyle="width: 40%;height: 25vh;border: 1px solid red;margin-top: 10px;font-size: 30px;font-weight: 600;color: black;"><divstyle="
这篇关于gsap动画库的实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!