微信小程序实现九宫格抽奖动画

最新推荐文章于 2023-06-18 14:29:22 发布

helloFE

最新推荐文章于 2023-06-18 14:29:22 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：小案例文章标签：小程序

本文链接：https://blog.youkuaiyun.com/helloFE/article/details/105956091

本文介绍了如何在微信小程序中实现一个九宫格抽奖动画，避免使用定时器setData导致的卡顿和兼容性问题。通过引入Tween.js动画库，实现了先快后慢的平滑动效。在.wxml中监听prop变化触发动画，.js文件中通过事件改变选中项，并在.wxss中定义动画显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于工作需求需要在微信小程序实现九宫格抽奖动画，第一反应是想通过定时器setData去切换高亮的奖品，但是频繁setData必定导致小程序卡顿，也可能会出现兼容性问题，其次，定时器setData不方便实现先快后慢的动画效果，于是改用Tween.js动画库实现

效果如下：

代码：

.wxml:

<wxs module="handle">
 var Tween = {
  Sine: {
   easeOut: function(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
   },
  }
  
 }
 var current = -1;
 module.exports = {
  indexObserver: function(newValue, oldValue, ownerInstance, instance){
   if(typeof oldValue === 'undefined' && newValue === -1) return;
    console.log(newValue, oldValue)
   var elements = ownerInstance.selectAllComponents('.border-box');
   var max = 8; // 9宫格的最大值（中间不算）

   var t = 0; // 当前时间
   var d = 200;  // 持续时间
   var b = 0; // 初始值
   var c = newValue + max * 10; // 变化量
   function tick(){
    var value = Tween.Sine.easeOut(t, b, c, d);
    t += 1;
    var index