通过喘息让vue实现动态效果实例代码详解 - 行业资讯 - 肥雀云

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

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

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

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

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

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

　　　　　　& lt; template> 　　& lt; div ref=昂凶印眂lass=昂凶印痹? lt;/div> 　　& lt;/template> 　　& lt; style> 　　.box { 　　高度:60 px; 　　宽度:60 px; 　　背景:红色; 　　} 　　& lt;/style> 　　　　

我们将一个红色盒绘制到DOM中,注意div标签上的参考标记,当我们在引入喘息后通过该属性可以引用该元素.VUE通过组件的美元参属性使通过ref标记的元素可以使用。

　　　　　　& lt; template> 　　& lt; div ref=昂凶印眂lass=昂凶印痹? lt;/div> 　　& lt;/template> 　　& lt; script> 　　从“gsap”进口{TimelineLite} 　　出口默认{ 　　安装(){ 　　参const{盒子}=? 　　常量时间=new TimelineLite () 　　时间表。(框1 {x: 200,旋转:90}) 　　} 　　} 　　& lt;/script> 　　& lt; style> 　　发出*//*样式　　& lt;/style> 　　　　

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

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

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

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

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

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

　　　　　　& lt; template> 　　& lt; div ref=昂凶印眂lass=昂凶印痹? lt;/div> 　　& lt;/template> 　　& lt; script> 　　进口{TimelineLite,}从“gsap” 　　出口默认{ 　　安装(){ 　　参const{盒子}=? 　　常量时间=new TimelineLite () 　　时间表。(框1 { 　　x: 200, 　　旋转:90, 　　缓解:回来。easeInOut,//指定一个缓解　　}）　　时间表。(盒,0.5,{ 　　背景:“绿色” 　　}，　　”——=0.5”//运行动画0.5 s 　　) 　　} 　　} 　　& lt;/script> 　　& lt; style> 　　发出*//*样式　　& lt;/style> 　　　　之前　　　　

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

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

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

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

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

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