通过GASP让vue实现动态效果实例代码详解

<template>
 <div ref="box" class="box"></div>
</template>
<style>
.box {
 height: 60px;
 width: 60px;
 background: red;
}
</style>

<template>
 <div ref="box" class="box"></div>
</template>
<script>
import { TimelineLite } from 'gsap'
export default {
 mounted() {
  const { box } = this.$refs
  const timeline = new TimelineLite()
  timeline.to(box, 1, { x: 200, rotation: 90 })
 }
}
</script>
<style>
/* styles emitted */
</style>

<template>
 <div ref="box" class="box"></div>
</template>
<script>
import { TimelineLite, Back } from 'gsap'
export default {
 mounted() {
  const { box } = this.$refs
  const timeline = new TimelineLite()
  timeline.to(box, 1, {
   x: 200,
   rotation: 90,
   ease: Back.easeInOut, // Specify an ease
  })
  timeline.to(box, 0.5, {
   background: 'green'
  },
  '-=0.5' // Run the animation 0.5s early
  )
 }
}
</script>
<style>
/* styles emitted */
</style>

<template>
<div class="bubble-wrapper">
 <div ref="bubble" class="bubble">
  <img class="bubble-image"
     src="/UploadFiles/2021-04-02/slack-white.svg">

我们现在有这个一个元素



让我们赋予它一些生命：



<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 class="bubble-wrapper">
  <div ref="bubble" class="bubble">
   <img class="bubble-image"
      :src="/UploadFiles/2021-04-02/currentLogo">

有了上面的代码，现在我们可以通过一个按钮来更新制作运行动画的元素，通史也可以对其进行动画制作，效果：https://codepen.io/smlparry/pen/RYMXPx
我使用了与上面动画非常类似的技术来实现主页的动画效果，我从数组中选择列表的下一个元素，然后将其append到列表中。
总结
以上所述是小编给大家介绍的通过GASP让vue实现动态效果实例代码详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！