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

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

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首页中使用 ),这个友好的小泡泡:

让我们从标签标记开始:

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

我们现在有这个一个元素

让我们赋予它一些生命:

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

(0)

相关推荐

  • Vue动态面包屑功能的实现方法

    面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 Element-UI 进行实现. 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好. <template> <div class="example-container"> <el-breadcrumb separator="

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

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

    单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果. Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了. GASP是一个JavaScript动画库

  • laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $("#pjax-container").html(newPart) 的方式更新的. 这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射. 所以理论上有2种方法解决: 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞,而且没啥资料,放弃.2 的话比较可行. 部分

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

  • vue 地图可视化 maptalks 篇实例代码详解

    Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍,下面来创建工程.首先利用 vue-cli3 搭建一

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

  • vue中的过滤器实例代码详解

    过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ name | Upper }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

随机推荐