学习
实践
活动
专区
工具
TVP
写文章

通过GASP让vue实现动态效果

GASP是一个JavaScript动画库,它支持快速开发高性能的 Web 动画。GASP 使我们能够轻松轻松快速的将动画串在一起,来创造一个高内聚的流畅动画序列。 如你所见,将 GASP 与 vue相结合是简单且强大的, 让我们看看如何使用 GASP 与 VUE 实现简单的时间轴,我们将在本文使用 .vue 文件,这些文件由 webpack 的 vue-loader 然后我们初始化 GASP 的时间线实例来播放动画。 当然,如果你没有将你的动画放进队列中,你将不能充分利用好 GASP 的时间线,让我们在动画的运行中途将其由红框过渡为绿框。 循环 上面的gif动画其实具有欺骗性,gif图片是循环的,但代码不是,让我们看看如何使用 GASP 和 VUE 循环播放动画。

1.1K20

【H5游戏】红包雨 实现详解

redPkg.create() } } 红包掉落逻辑 这里的内容主要是红包坠落的动画,观察这个动画,一个是从上至下的坠落动画,一个是左右摇晃的动画,毕竟是模拟雨嘛,并不是直上直下的 这里就用了前面说的动画库 gasp ,控制的动画是 红包元素 的 y 坐标 和 x 坐标 变化 先看最基础的坠落动画,使用 gasp.to 设置 结束状态的坐标是 【屏幕高度+50】 然后 gasp 就可以控制 红包元素 从起始位置一直移动到结束位置 手动控制坠落 } } 下面来看下 X 坐标的动画,其实就是横向的偏移动画 这里的逻辑主要是几点 1、设置横向偏移的幅度值,比如这里设置的是 左右最大偏移25 2、偏移是从一端到另一端,所以使用 gasp.fromTo // 结束位置是 位置右偏移X 25 const to = { x: Math.min(initX + 25, window.innerWidth), }; // gasp

99840
  • 广告
    关闭

    新年·上云精选

    热卖云产品新年特惠,2核2G轻量应用服务器9元/月起,更多上云必备产品助力您轻松上云

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    扫码关注腾讯云开发者

    领取腾讯云代金券