微信小程序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过度动画相关推荐

“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
【Note】微信小程序js使用农历(一行代码)
[Note]微信小程序js使用农历 0 直接输出 var data_ = new Date('2022/10/27 00:00:00') console.log(data_.toLocaleStrin ...
微信小程序js把数字转化成字母
微信小程序 js 把数字转化成字母微信小程序 js 把数字转化成字母 for (let i = 0; i < 26; i++) {list[i] = {};list[i].name = Str ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序JS字符串操作方法汇总
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico| ...
微信小程序JS字符串操作方法汇总，包含切割截取split，合并字符串join，连接字符串concat，返回指定字符串charAt，提取字符串substring等
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico| ...
微信小程序登录页动画-云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 当我看到这张背景图的时候, ...
微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...
微信小程序js 字符串截取
微信小程序js 字符串截取 console.log(time) 输出:qwertyuiop console.log(time.substring(0, 5)) 输出:qwert

微信小程序js过度动画

微信小程序js过度动画

微信小程序js过度动画相关推荐

最新文章

热门文章