微信小程序循环列表点击每一个单独添加动画

首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有

点击这里查看 微信官方文档

简化一下哈:就是这样的

先在js的data里面定义一个动画的值

data: {

    animationData: {},

  },

我这边做的是一个箭头图片的旋转

所以wxml里面得元素是这样的

<image animation="{{animationData}}" src="/img/arrows.png" class="arrow" alt="" bindtap="titleClick"></image>

点击生效嘛,然后js里面就在上边bindtap点击函数里面写

 titleClick: function (e) {
  
      let animation = wx.createAnimation({
        duration: 100,//动画的时间
        timingFunction: 'ease',//动画的速度
      })
      this.animation = animation
      animation.rotate(90).step()//动画操作,旋转平移之类的自己看看文档,我这个是旋转的

      this.setData({
        animationData: animation.export()
      });

  }

这样就是一个简简单单的动画了

但是我的要求是循环列表出来的是这样的,每个单独有一个动画

点击旋转,然后下面的东西出来,再点击下面东西消失箭头旋转回来

 

 各种百度,查资料

最后想到在吧动画这个属性

animationData由{}对象变成[]数组,然后数组里有很多个{}对象,那这样不就可以改变单独的值了么

首先data里有个数组

 data: {

    animationData: [],

    array: []//列表循环数组

  },

然后在请求之后,循环数组生成一个新的数组,里面都是空对象

var animation = []//

for (let index = 0; index < list .length; index++) {

 animation.push({}) }

//然后给data里的animationData赋值

this.setData({

        animationData: animation

      })

wxml里的代码,简单的一个列表

<view class="list" wx:for="{{array}}" wx:key="id"  wx:for-index="idx" wx:for-item="item">
    <view class="title" data-id='{{idx}}' bindtap="titleClick">
      <image animation="{{animationData[idx]}}" src="/img/arrows.png" class="arrow" alt="" ></image>
      <text>{{item.content}}</text>
    </view>
    <view class="content">
      {{item.content}}
    </view>
  </view>

data-**是可以记录当前下标,与后面animationData的下标相对应

接下来就是点击的事件了

  titleClick: function (e) {
    var index = e.currentTarget.dataset.id
    var temp_str = 'animationData[' + index + ']';
//设第一个动画是向下旋转,第二个动画是返回初始状态
//判断鱼当前点击的 animationData相对应的{}是否为空,如果为空就是走第一个动画,不为空走第二个
    if (JSON.stringify(this.data.animationData[index]) != "{}") {
      let animation = wx.createAnimation({
        duration: 100,
        timingFunction: 'ease',
      })
      this.animation = animation  
      animation.rotate(0).step()
      this.setData({
        [temp_str]: animation.export()
      });//这个是为动画运行赋值,也就是返回初始状态的
      this.setData({
        [temp_str]: {}
      });//这个是动画返回到初始后将这个animationData相对应的对象值清空,下次就会走第一个动画,不要直接清空,没有效果
    } else {
      let animation = wx.createAnimation({
        duration: 100,
        timingFunction: 'ease',
      })
      this.animation = animation
      animation.rotate(90).step()

      this.setData({
        [temp_str]: animation.export()
      });
    }
    console.log(this.data.animationData);

  }

 

列表下面的显示隐藏我还没开始做,但是那个就比较简单了,后面我也不再讲了,其实这个动画逻辑理通顺了之后也是比较简单的,如果大家有其他更简单的方法也欢迎留言告诉我哦