微信小程序js過度動畫

如有錯誤還請大神指教。如果覺得不錯可以關注我了解更多。

一，我們先來看看效果吧。

二，我們用的是js的逐幀動畫，css也可有相同的效果，我們這里用js

// pages/arrary/first/more4/more4.js let puts = ['cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/1.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/2.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/3.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/4.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/5.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/6.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/7.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/8.png', 'cloud://yun-uq19h.7975-yun-uq19h-1300451626/none/9.png'] Page({/*** 頁面的初始數據*/data: {foot: ['none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none'],put: ['', '', '', '', '', '', '', '', '']},tip(){wx.showToast({title: '我的帥氣傳遞給下一個旺仔了',icon: 'none'})},ones(){var that =thiswx.showLoading({title: '加載中...',mask:true,});setTimeout(function () {wx.hideLoading()that.setData({display_one: 'none',})that.twoed()}, 4000)},min(){var that = thisvar j=0var time = setInterval(function () {switch(j){case 0:{var p = puts[0]that.data.put.splice(0, 1, p);var than = that.data.putthat.setData({put: than})break;}case 1: {var p = puts[1]that.data.put.splice(1, 1, p);var than = that.data.putthat.setData({put: than})break;}case 2: {var p = puts[2]that.data.put.splice(2, 1, p);var than = that.data.putthat.setData({put: than})break;}case 3: {var p = puts[5]that.data.put.splice(5, 1, p);var than = that.data.putthat.setData({put: than})break;}case 4: {var p = puts[8]that.data.put.splice(8, 1, p);var than = that.data.putthat.setData({put: than})break;}case 5: {var p = puts[7]that.data.put.splice(7, 1, p);var than = that.data.putthat.setData({put: than})break;}case 6: {var p = puts[6]that.data.put.splice(6, 1, p);var than = that.data.putthat.setData({put: than})break;}case 7: {var p = puts[3]that.data.put.splice(3, 1, p);var than = that.data.putthat.setData({put: than})break;}case 8: {var p = puts[4]that.data.put.splice(4, 1, p);var than = that.data.putthat.setData({put: than})break;}}j++;if (j == 12) {// console.log("定時器結束！");clearInterval(time);}},800)},twoed(){var that = this//文字逐個顯示var i = 0;var time = setInterval(function () {var text = tows.substring(0, i);i++;that.setData({towes: text});if (text.length == tows.length) {// console.log("定時器結束！");clearInterval(time);//setTimeout(function () { that.min(); }, 2000)var p = 'block'that.data.foot.splice(0, 1, p);var than = that.data.footthat.setData({foot: than})}}, 100)},foots1(e){var that=thisconsole.log(e)var p = 'none'var pp='block'that.data.foot.splice(0, 1, p);that.data.foot.splice(1, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots2(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(1, 1, p);that.data.foot.splice(2, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots3(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(2, 1, p);that.data.foot.splice(3, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots4(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(3, 1, p);that.data.foot.splice(4, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots5(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(4, 1, p);that.data.foot.splice(5, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots6(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(5, 1, p);that.data.foot.splice(6, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots7(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(6, 1, p);that.data.foot.splice(7, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots8(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(7, 1, p);that.data.foot.splice(8, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots9(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(8, 1, p);that.data.foot.splice(9, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},foots10(e) {console.log(e)var that = thisconsole.log(e)var p = 'none'var pp = 'block'that.data.foot.splice(9, 1, p);that.data.foot.splice(1, 1, pp);var than = that.data.footthat.setData({foot: than})console.log(than)},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {min()} })

三，wxml部分用的是九宮格布局。

<view class="eye"><view class="wood"><view class="line"><view class="line1_1 lines" bindtap="tip"><image class="puture" src="{{put[0]}}"></image></view><view class="line1_1 lines" ><image class="puture" src="{{put[1]}}"></image></view><view class="line1_1 lines" bindtap="tip"><image class="puture" src="{{put[2]}}"></image></view></view><view class="line"><view class="line1_1 lines"><image class="puture" src="{{put[3]}}"></image></view><view class="line1_1 lines" bindtap="ones" ><image class="puture" src="{{put[4]}}"></image></view><view class="line1_1 lines" ><image class="puture" src="{{put[5]}}"></image></view></view><view class="line"><view class="line1_1 lines" bindtap="tip"><image class="puture" src="{{put[6]}}"></image></view><view class="line1_1 lines" ><image class="puture" src="{{put[7]}}"></image></view><view class="line1_1 lines" bindtap="tip"><image class="puture" src="{{put[8]}}"></image></view></view></view></view>

四.最后用的wxss的布局。

最后謝謝大家的觀看，也歡迎大家的指導。

總結

以上是生活随笔為你收集整理的微信小程序js过度动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。