微信小程序循環列表點擊每一個單獨添加動畫

首先,咱們看一下微信小程序動畫怎么實現,我首先想到的是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);

  }

 

列表下面的顯示隱藏我還沒開始做,但是那個就比較簡單了,后面我也不再講了,其實這個動畫邏輯理通順了之后也是比較簡單的,如果大家有其他更簡單的方法也歡迎留言告訴我哦