<template> <!-- HTML emitted --> </template> <script> import { TimelineLite, Back, Elastic, Expo } from "gsap" export default { mounted() { const { bubble, bubblePulse } = this.$refs const timeline = new TimelineLite() timeline.to(bubble, 0.4, { scale: 0.8, rotation: 16, ease: Back.easeOut.config(1.7), }) timeline.to( bubblePulse, 0.5, { scale: 0.9, opacity: 1, }, '-=0.6' ) this.timeline.to(bubble, 1.2, { scale: 1, rotation: '-=16', ease: Elastic.easeOut.config(2.5, 0.5), }) this.timeline.to( bubblePulse, 1.1, { scale: 3, opacity: 0, ease: Expo.easeOut, }, '-=1.2' ) } } </script> <style> /* CSS Emitted */ </style>
虽然一开始看起来很麻烦，但只要花点时间来理解它的实际运行情况，其实它只是一些按顺序排列的 CSS transform属性。这里有几个自定义的 ease 特效，GASP 提供了一个有趣的小工具，你可以根据喜好自由配置：https://greensock.com/ease-visualizer
现在效果如下：
循环
上面的gif动画其实具有欺骗性，gif图片是循环的，但代码不是，让我们看看如何使用 GASP 和 VUE 循环播放动画。GASP 的 TimelineLite提供了一个onComplete属性，通过该属性我们可以分配一个函数，利用该函数我们可以循环动画，另外，我们将通过data使timeline在组件的其余部分也可使用。
<template> <!-- HTML Emitted --> </template> <script> // ... export default { data() { return { timeline: null, } }, mounted() { // ... this.timeline = new TimelineLite({ onComplete: () => this.timeline.restart() }) // ... } } </script> <style> /* CSS Emitted */ </style>
现在 GASP 将会在动画完成后又重新开始，效果如下：https://codepen.io/smlparry/pen/dqmEax
添加交互性
现在，我们的动画效果已经写得差不多了，可以考虑添加一些交互特效。在本例中，我们将添加一个按钮，来随机更新气泡中的logo。
为了能做到该需求，我们必须做以下几件事：
将图片的引用源地址绑定到 VUE 的data中
创建要使用的图片数组
创建随机获取logo的方法
添加按钮来更改logo
<template> <div> <div ref="bubble"> <img :src="currentLogo" /> </div> <div ref="bubblePulse"></div> </div> <button @click="randomiseLogo">Random Logo</button> </template> <script> // ... export default { data() { return { timeline: null, logos: ['path/to/logo-1.svg', 'path/to/logo-2.svg', 'path/to/logo-3.svg'], currentLogo: '', } }, methods: { randomiseLogo() { const logosToSample = this.logos.filter(logo => logo !== this.currentLogo) this.currentLogo = logosToSample[Math.floor(Math.random() * logosToSample.length)] } }, mounted() { this.randomiseLogo() // ... } } </script> <style> /* CSS Emitted */ </style>
有了上面的代码，现在我们可以通过一个按钮来更新制作运行动画的元素，通史也可以对其进行动画制作，效果：https://codepen.io/smlparry/pen/RYMXPx
我使用了与上面动画非常类似的技术来实现主页的动画效果，我从数组中选择列表的下一个元素，然后将其append到列表中。
总结
以上所述是小编给大家介绍的通过GASP让vue实现动态效果实例代码详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: