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


Posted in Javascript onNovember 24, 2019

单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果。

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

Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了。

GASP是一个JavaScript动画库,它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起,来创造一个高内聚的流畅动画序列。

在构建新的 Daily Fire 主页时,我为了演示产品如何工作而使用了大量动画,但是通过 GASP的方式(不是 GIF 或视频),我可以为动画添加交互层使它们更具吸引力。如你所见,将 GASP 与 vue相结合是简单且强大的,

让我们看看如何使用 GASP 与 VUE 实现简单的时间轴,我们将在本文使用 .vue 文件,这些文件由 webpack 的 vue-loader加载使用,通过Vue CLI创建的项目将会自动

基础

让我们先编写一些标记,以便了解我们将制作的动画

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

我们将一个红色 box 绘制到DOM中,注意 div 标签上的ref 标记,当我们在引入GASP 后通过该属性可以引用该元素。VUE 通过组件的$refs属性使通过 ref 标记的元素可以使用。

现在引入 GASP

<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>

首先,我们从 GASP 中引入TimelineLite,然后,当组件挂载后,我们通过$refs获取到对 box 元素的引用。然后我们初始化 GASP 的时间线实例来播放动画。

Timeline 实例暴露出一个to方法,我们传递三个参数给该方法:

  • 参数1:要设置动画效果的元素
  • 参数2:动画运行的秒数
  • 参数3:描述动画行为的对象

下面链接展示了一小段代码展示的运行效果:

https://codepen.io/smlparry/pen/rZdbEw

很简单,有木有!接下来让我们用 GASP 的 EasePack 赋予这个小动画更多的生命。使用 ease缓动特效是一种简单的方案,它将使你的动画特效不再那么僵硬,更加友好。当然,如果你没有将你的动画放进队列中,你将不能充分利用好 GASP 的时间线,让我们在动画的运行中途将其由红框过渡为绿框。

<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>

注意第21行的额外参数,在上面的代码中它将告诉 GASP 运行一个相对于前一个动画的动画,使用+=指定完成后的时间,使用-= 指定完成前的时间。

结果在链接中:https://codepen.io/smlparry/pen/mGxYWN

有了这个简单的改动,我们的动画更加生动了!

通过这些原则的基础了解,我们可以开始构建更复杂、更吸引人的动画。正如我们将在下一个例子中所看到的。

在基础上更进一步

让我们创建一个动画(该动画曾在Daily Fire首页中使用 ),这个友好的小泡泡:

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

让我们从标签标记开始:

<template>
<div class="bubble-wrapper">
 <div ref="bubble" class="bubble">
  <img class="bubble-image"
     src="./assets/img/slack-white.svg" />
 </div>
 <div ref="bubblePulse" class="bubble-pulse"></div>
</div>
</template>
<style>
.bubble-wrapper {
 position: relative;
}
.bubble {
 position: relative;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 1px solid white;
 background: #272727;
 border-radius: 50%;
 height: 100px;
 width: 100px;
}
.bubble-pulse {
 position: absolute;
 z-index: 1;
 height: 120px;
 width: 120px;
 top: 50%;
 left: 50%;
 margin-top: -60px;
 margin-left: -60px;
 background: #272727;
 border-radius: 50%;
 opacity: 0;
 transform: scale(0);
}
.bubble-image {
 height: 50%;
}
</style>

我们现在有这个一个元素

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

让我们赋予它一些生命:

<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

现在效果如下:

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

循环

上面的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="currentLogo" />
  </div>
  <div ref="bubblePulse" class="bubble-pulse"></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实现动态效果实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
js 分栏效果实现代码
Aug 29 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
JS控制只能输入数字并且最多允许小数点两位
Nov 24 #Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 #Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 #Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 #Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 #Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 #Javascript
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
js replace正则表达式应用案例讲解
2013/01/17 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
详解vue项目打包步骤
2019/03/29 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Python用GET方法上传文件
2015/03/10 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python中使用while循环的实例
2019/08/05 Python
python可视化实现KNN算法
2019/10/16 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
群众路线教育实践活动方案
2014/02/02 职场文书
借名购房协议书范本
2014/10/06 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书