微信小程序js过度动画

已于 2022-04-29 13:34:06 修改
阅读量2.7k 收藏 6
点赞数
分类专栏： 微信小程序 文章标签： 小程序
于 2020-04-15 14:27:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44604166/article/details/105534084
版权

微信小程序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 =this
    wx.showLoading({
      title: '加载中...',
      mask:true,
    });
    setTimeout(function () {
      wx.hideLoading()
      that.setData({
        display_one: 'none',
      })
      that.twoed()
    }, 4000)
  },

  min(){
    var that = this
    var j=0
    var time = setInterval(function () {
      switch(j){
        case 0:{
          var p = puts[0]
          that.data.put.splice(0, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 1: {
          var p = puts[1]
          that.data.put.splice(1, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 2: {
          var p = puts[2]
          that.data.put.splice(2, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 3: {
          var p = puts[5]
          that.data.put.splice(5, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 4: {
          var p = puts[8]
          that.data.put.splice(8, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 5: {
          var p = puts[7]
          that.data.put.splice(7, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 6: {
          var p = puts[6]
          that.data.put.splice(6, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 7: {
          var p = puts[3]
          that.data.put.splice(3, 1, p);
          var than = that.data.put
          that.setData({
            put: than
          })
          break;
        }
        case 8: {
          var p = puts[4]
          that.data.put.splice(4, 1, p);
          var than = that.data.put
          that.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.foot
        that.setData({
          foot: than
        })
      }
    }, 100)


  },
  foots1(e){
    var that=this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)
  },
  foots2(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)
  },
  foots3(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)
  },
  foots4(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)

  },
  foots5(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)

  },
  foots6(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)

  },
  foots7(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)

  },
  foots8(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)
  },
  foots9(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.setData({
      foot: than
    })
    console.log(than)
  },
  foots10(e) {
    console.log(e)
    var that = this
    console.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.foot
    that.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的布局。

最后谢谢大家的观看，也欢迎大家的指导。

菥蓂寻生
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发中的动画效果和页面过渡
吃不胖.
04-21 444
下面我将详细介绍在微信小程序中如何实现动画效果和页面过渡。2.1 页面跳转 页面跳转是一种常见的页面过渡效果，可以通过wx.navigateTo或wx.redirectTo来实现。2.3 页面切换 页面切换是一种常见的页面过渡效果，可以通过wx.switchTab或wx.reLaunch来实现。1.1 基本动画 基本动画是最常用的一种动画效果，它可以实现元素的平移、缩放、旋转等效果。以上是关于微信小程序开发中动画效果和页面过渡的内容，通过这些代码案例可以实现不同的动画效果和页面过渡效果，提升用户体验。
微信小程序开发中的动画效果与过渡效果
最新发布
吃不胖.
10-01 1623
其中，page 类指定了一个旋转动画，通过 animation-name 属性指定动画名称，再通过 animation-duration 属性指定动画持续时间，animation-iteration-count 属性指定动画重复次数，animation-timing-function 属性指定动画的缓动效果，最后，通过设置 @keyframes 规则，指定旋转动画的具体效果。本文将介绍微信小程序中的动画效果与过渡效果，包括常用的动画类型、动画组件的使用方法、过渡效果的实现方式等。
《微信小程序-进阶篇》Lin-ui组件库源码分析-动画组件Transition（二）
Oliver尹的博客
08-07 858
本文难度属于：初中级，通过本文你可以了解到 Lin-ui的Transition组件内部的动画效果，name属性以及duration是如何实现的
微信小程序页面切换平缓渐入
weixin_55109830的博客
04-05 1077
页面渐入渐出大概就是这样一个场景，在切换的时候页面整体渐入，效果好一些wxml简化一下如下，反正就是两个板块，透明度为0，然后有一个animation属性，然后一个切换按钮。
小程序scroll-view过渡效果的实现（点击scroll-view中的子元素，这个子元素就自动放到第一位并且还要有动画效果）
weixin_48952990的博客
07-10 908
小程序scroll-view过渡效果的实现（点击scroll-view中的子元素，这个子元素就自动放到第一位并且还要有动画效果）
微信小程序js动画Animation基本使用
PPAP__的博客
12-05 1341
最近才发现j小程序js中自带Animation动画功能 先在 .js 中使用wx.createAnimation创建动画 基本属性文档中很清楚 定义动画对象后就可以.加需要的动画效果了，这里要注意==step()==是一定要写的，表示动画制作完成，不写是没有效果的 然后在wxml中调用就可以了 下面是上面gif动画的代码 .wxml <button bindtap="showItem">点击翻页</button> <view class="fanye" animat
微信小程序之动画篇
SeaSunExpect的博客
05-16 1190
小程序动画两种实现方式利用transition和animation两种方式实现相同的淡入淡出效果transition动画实现效果具体内容animation动画实现效果具体内容小程序中transition和animation实现动画的异同 利用transition和animation两种方式实现相同的淡入淡出效果 主要是实现点击展示按钮，按钮消失，菜单有底部缓缓滑入界面；点击菜单中关闭按钮，展示按钮...
微信小程序实现js控制动画——点击播放动画
机智的奎哥的博客
03-15 3539
功能需求：点击刷新图标，图标旋转进入Loading状态，加载完毕，动画停止 //index.wxml <view class="flex-col group_2"> <text decode="decode" class="text_1">{{userInfo.nickName}}</text> <view class="flex-row items-center section_1" hover-class="down_state" hover-stay-.
微信小程序 - 【完整源码】选项卡 Tab 页面手指左右滑动切换功能，点击导航栏选项卡切换并且可以用手左右滚动切换，带过渡动画效果（详细示例源码及注释，一键复制运行）
高级前端工程师
05-17 5091
微信小程序选项卡tabs滑动切换详细教程，微信小程序实现左右滑动切换菜单，微信小程序左右滑动切换页面示例代码，微信小程序实现左右滑动 点击 切换页面，微信小程序滑动导航栏切换页面，微信小程序如何做出吸顶tab加左右滑动切换tab的效果，微信小程序滚动Tab选项卡左右滑动切换，实现页面tab切换效果，小程序滚动Tab实现左右可滑动切换，微信小程序实现页面多级来回切换支持滑动和点击操作，微信小程序实现滑动/点击切换Tab，小程序中 使用swiper 滑动切换页面，微信小程序实现tab和swiper切换结合效果，
小程序+wepy实现 图片 的抖动旋转效果
m0_52948787的博客
08-19 282
小程序+wepy实现 图片 的抖动旋转效果 直接上代码 <image class="hongbao" mode="scaleToFill" src="../images/hongbao.png" animation="{{animation}}" /> 样式 .hongbao{ width:90rpx; height:90rpx; } data中的变量 data = { animation: {}, next:true, }; 在onshow中写 async on
uni-app，微信小程序 点击返回顶部过渡动画
m0_61077437的博客
03-22 647
<button type="primary" @click="tapscroll">回到顶部</button> js代码 tapscroll:function(){ uni.pageScrollTo({ scrollTop: 0, duration: 300 }) }
微信小程序动画(七)：让页面动起来
weixin_43867717的博客
01-17 7869
本文默认读者已具备小程序基本动画api，如不了解可先阅读相关的详细介绍文章： 微信小程序动画（一）：样式 微信小程序动画（二）：旋转 微信小程序动画（三）：缩放 微信小程序动画（四）：平移 微信小程序动画（五）：倾斜 微信小程序动画（六）：矩阵变形 一： wx.createAnimation(Object object) 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 api文档：https://
微信小程序-实现元素渐入渐出动画效果-封装方法
岁末zzz的博客
01-19 1884
效果 解决 1.寻根问底，发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 (*´ﾉ皿`)mmp] )有一个全局的js逻辑文件，叫app.js，有意思，可以往里面塞自己写的object(函数数据等等)，那就从那里入手吧 2.在app.js中定义全局的动画函数 App({ //渐入，渐出实现 show : function(that,param,opacity...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值