小程序菜单弹出缩回动画效果

本文详细介绍了一个小程序中实现菜单弹出和缩回动画效果的具体方法,包括使用WXSS进行样式定义,通过JS控制动画的弹出速度、旋转角度及透明度,实现流畅的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序菜单弹出缩回动画效果

下面看图,图片效果不是很好,因为是图片转换成的gif ,将就看下吧,具体效果会很流畅。

在这里插入图片描述
下面贴出代码

js部分代码

Page({
  data: {
    mainMenu: {}, //主菜单动画
    menu1: {}, //菜单1动画
    menu2: {}, //菜单2动画
    menu3: {}, //菜单3动画
    menu4: {}, //菜单3动画

    isPopping: false, //是否弹出
  },

  //点击主菜单
  mainMenuClick: function() {
    //判断主菜单状态,从而调用弹出还是缩回     
    if (this.data.isPopping) {
      console.log("收缩菜单")
      //缩回动画
      this.shrink()
      this.setData({
        isPopping: false
      })
    } else {
      console.log("弹出菜单")
      //弹出动画
      this.eJect()
      this.setData({
        isPopping: true
      })
    }
  },

  /**
   * 菜单1点击
   */
  menu1Click: function() {
    console.log("《新》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  /**
   * 菜单2点击
   */
  menu2Click: function() {
    console.log("《春》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  /**
   * 菜单3点击
   */
  menu3Click: function() {
    console.log("《快》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  /**
   * 菜单4点击
   */
  menu4Click: function() {
    console.log("《乐》菜单点击")
    this.setData({
      isPopping: false
    })
    this.shrink()
  },

  //弹出动画
  eJect: function() {
    //顺时针旋转
    var menu1 = wx.createAnimation({
      duration: 500, // 弹出的速度
      timingFunction: 'ease-out'
    })
    var menu2 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu3 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu4 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })

    /**
     * 下面写法参数说明:
     * 第一个括号值(弹出的菜单与主菜单左右之间的距离,弹出的菜单与主菜单上下之间的距离)
     * 第二个括号值(菜单弹出旋转的度数)
     * 第三个括号值(菜单的透明度0.0~1.0之间)
     */
    menu1.translate(35, -70).rotateZ(360).opacity(1).step();
    menu2.translate(70, -28).rotateZ(360).opacity(1).step();
    menu3.translate(70, 28).rotateZ(360).opacity(1).step();
    menu4.translate(35, 70).rotateZ(360).opacity(1).step();

    this.setData({
      menu1: menu1.export(),
      menu2: menu2.export(),
      menu3: menu3.export(),
      menu4: menu4.export(),
    })
  },

  //收回动画
  shrink: function() {
    var menu1 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu2 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu3 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var menu4 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })

    //处理动画效果
    menu1.translate(0, 0).rotateZ(0).opacity(0).step();
    menu2.translate(0, 0).rotateZ(0).opacity(0).step();
    menu3.translate(0, 0).rotateZ(0).opacity(0).step();
    menu4.translate(0, 0).rotateZ(0).opacity(0).step();

    this.setData({
      menu1: menu1.export(),
      menu2: menu2.export(),
      menu3: menu3.export(),
      menu4: menu4.export(),
    })
  }
})

wxml部分代码


<view>
  <!--弹出菜单1-->
  <image src="/images/xin.png" class="img-style" animation="{{menu1}}" bindtap="menu1Click"></image>
  <!--弹出菜单2-->
  <image src="/images/chun.png" class="img-style" animation="{{menu2}}" bindtap="menu2Click"></image>
  <!--弹出菜单3-->
  <image src="/images/kuai.png" class="img-style" animation="{{menu3}}" bindtap="menu3Click"></image>
  <!--弹出菜单4-->
  <image src="/images/le.png" class="img-style" animation="{{menu4}}" bindtap="menu4Click"></image>
  <!--主菜单-->
  <image src="/images/zhu.png" class="main-menu" animation="{{mainMenu}}" bindtap="mainMenuClick"></image>
</view>

wxss代码部分

page {
  background-color: #eee;
}

/*主菜单*/

.main-menu {
  height: 100rpx;
  width: 100rpx;
  position: absolute;
  bottom: 500rpx;
  left: 0rpx;
  z-index: 100;
}

/**opacity 设置不透明级别  0.0到 1.0 之间*/

.img-style {
  height: 100rpx;
  width: 100rpx;
  position: absolute;
  bottom: 500rpx;
  left: 0rpx;
  opacity: 0;
}

直接代码赋值下来就能看到效果了,有什么问题或者需要改正的地方欢迎留言
<think>好的,我现在需要帮助用户了解或实现得物签名的相关技术,特别是签名算法的实现方式。首先,我需要收集已有的信息。根据用户提供的引用,特别是引用[4]和[5],得物的签名算法可能涉及逆向工程分析,使用了JavaScript中的XMLHttpRequest重写来拦截请求,并在请求中包含特定的sign参数。这可能意味着签名生成是在客户端进行的,通常在前端JavaScript代码中完成。 接下来,我应该考虑常见的签名生成方法。常见的Web应用签名算法通常使用HMAC、AES、RSA或自定义的哈希组合。引用[1]提到了RSA算法,但得物的签名可能更倾向于使用HMAC-SHA256之类的哈希算法,结合间戳、随机数和请求参数进行签名,以防止篡改和重放攻击。 用户可能需要具体的步骤,比如逆向分析得物的JavaScript代码,找到生成sign的函数,提取关键参数和加密逻辑。引用[5]中的代码片段展示了如何重写XMLHttpRequest的open方法来拦截请求,这可能用于调试和定位签名生成的代码位置。 此外,引用[4]提到使用Python进行算法还原,所以可能需要在Python中复现JavaScript的签名生成逻辑。这通常涉及分析请求参数如何排序、拼接,以及如何与密钥结合进行哈希或加密。需要注意反爬机制,如obfuscation(代码混淆)或动态密钥,这可能需要使用AST(抽象语法树)解析或动态执行来还原算法。 用户可能还需要了解如何应对反调试措施,比如在Chrome开发者工具中使用断点调试,或者使用工具如Frida进行Hook。同,引用[3]和[4]强调了法律和合规问题,确保研究仅用于学习目的,不用于非法用途。 最后,应该提醒用户注意法律风险,遵循网站的使用条款,避免侵犯知识产权或违反计算机安全法律。总结起来,实现得物签名需要逆向工程分析前端代码,提取关键算法,处理可能的混淆和反调试,最后用目标语言如Python复现算法。</think>### 得物签名算法实现方式分析 得物签名算法主要用于接口请求的身份验证和防篡改保护,常见实现方式涉及以下技术点: #### 1. **签名参数组成** 签名通常由以下参数动态生成: - 请求参数(经排序、过滤空值后拼接) - 间戳(如:$timestamp=1620000000$) - 随机数(如:$nonce=5a8s3d$) - 设备指纹(如:$device\_id=abcdef$) - 应用密钥(加密盐值,可能动态获取)[^4] 示例参数拼接逻辑: $$ \text{sign\_str} = \text{path} + \text{sorted\_params} + \text{timestamp} + \text{nonce} $$ #### 2. **加密算法类型** 根据逆向分析,得物可能采用以下组合: - **HMAC-SHA256**:对拼接字符串进行哈希运算 - **AES/Base64编码**:对结果二次处理 - **自定义位移/异或操作**:增加逆向难度[^5] #### 3. **JavaScript代码混淆** 关键函数可能被混淆,例如: ```javascript function _0x12ab5(a, b) { return a ^ b << 3; } // 需要AST解析还原控制流 ``` #### 4. **Python算法还原示例** ```python import hmac import hashlib def generate_sign(params, secret_key): # 1. 参数排序并拼接 sorted_str = '&'.join([f"{k}={v}" for k,v in sorted(params.items())]) # 2. HMAC-SHA256加密 sign = hmac.new(secret_key.encode(), sorted_str.encode(), hashlib.sha256).hexdigest() # 3. 自定义处理(示例) return sign.upper() + str(int(time.time())) ``` #### 5. **反爬对抗措施** - 动态密钥:通过接口定期更新加密盐值 - 环境检测:验证是否在真机环境运行 - 请求频率限制:异常高频触发验证码[^5]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值