收藏
回答

Animation不生效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug Animation 客户端 6.7.2 2.3.0

- 当前 Bug 的表现(可附上截图)

     有两个页面都有一个长按飞起的动画, 但是从一个页面有这个动画的页面 后退到 也有动画的页面,再长按动画就不执行了



- 预期表现


- 复现路径


- 提供一个最简复现 Demo

<!-- 小鱼按钮 -->
<button catch:touchstart="startRecode"
       catch:touchend="endRecode"
       catch:touchcancel="endRecode"
       class='right-bottom-img'
       hover-class="none" id="fish_box">
   <image animation="{{animationData}}"
          mode="aspectFit"
          class='voice_fish'
          src="https://res.botbrain.ai/zhiyu/img/voice_fish.png"
   ></image>
</button>


// components/startRecord/components/fishBtn/fishBtn.js
const app = getApp();
// 微信同声传译
const WechatPlugin = requirePlugin("WechatSI");
let manager = WechatPlugin.getRecordRecognitionManager();
const voice = wx.createInnerAudioContext();
let timer,siri_timer,is_start=false,start_time=0;

// let tempFilePath ; //文件临时路径
Component({
   /**
    * 组件的属性列表
    */
   properties: {
       show_btns: Boolean,
       start_record: {
           type: Boolean,
           value: false,
           observer: 'stop_record'
       },
       text_result: {
           type: Object,
           value: {
               question: '',
               result: '',
               link: '',
               isPlay: false
           },
           observer: (newVal) => {
               if (newVal.isPlay && newVal.result){
                   WechatPlugin.textToSpeech({
                       lang: "zh_CN",
                       content: newVal.result,
                       success: function (res) {
                           console.log("filename", res.filename)
                           voice.src = res.filename;
                           voice.obeyMuteSwitch = false;
                           voice.play();
                       },
                       fail: function (res) {
                           console.log("filename err", res)
                       }
                   })
               }
           }
       }
   },

   /**
    * 组件的初始数据
    */
   data: {
       show_tip: 0,
       siri_hide: true,  // 没有在录音
       radomheight: [],
       record_status: 0,
       animationData: ''
   },
   // 组件实例进入页面节点树时执行
   attached() {
       let that = this;
       // 首次录音提示
       wx.getStorage({
           key: 'voice_tip',
           fail(){
               that.setData({
                   show_tip: 1
               })
               setTimeout(() => {
                   that.close_tip();
               }, 5000)
           }
       })

       // 调起录音权限
       wx.authorize({
           scope: 'scope.record',
           success() {
               console.log("录音授权成功");
               //第一次成功授权后 状态切换为1
               that.setData({
                   record_status: 1
               })
           }
       })

       // 初始化语音识别回调
       this.initRecord();
   },
   ready(){
       let screen_width = wx.getSystemInfoSync().windowWidth;
       let screen_height = wx.getSystemInfoSync().windowHeight;
       let move_x = (screen_width - 58 / 2) / 2 - 30;
       let move_y = screen_height - 175 / 2 - 20;
       this.data.move_x = move_x;
       this.data.move_y = move_y;

       this.init_animation();

       this.myradom();
   },
   detached(){
       voice.stop();
   },
   /**
    * 组件的方法列表
    */
   methods: {
       init_animation(){
           console.log('ready wx.createAnimation')
           this.animation = wx.createAnimation({
               duration: 450,
               timingFunction: 'ease-in-out'
           });
       },
       /**
        * 初始化语音识别回调
        * 绑定语音播放开始事件
        */
       initRecord: function() {
           let that = this;
           // 成功开始录音识别
           manager.onStart = function () {
               // 关闭技能列表
               that.triggerEvent('switch_component', 'voice_btns');
               that.setData({
                   siri_hide: false
               })
               // 小鱼飞起
               that.onstart_recode();
               // 显示语音波浪线
               siri_timer = setInterval(() => {
                   that.myradom()
               }, 420)
           }
           //有新的识别内容返回,则会调用此事件
           manager.onRecognize = (res) => {
               console.log(res,'有新的识别内容返回');
           }

           // 识别结束事件
           manager.onStop = (res) => {
               console.log(res, '停止录音');
               // that.setData({
               //     tempFilePath: res.tempFilePath
               // })
               that.onend_recode();
               that.setData({
                   siri_hide: true
               })
               wx.showLoading({
                   title: '识别中...',
                   mask: true
               })
               clearInterval(siri_timer);
               if (start_time !== 0) {
                   // that.triggerEvent('no_understand');
                   that.recodeUpload(res.tempFilePath);
                   return;
               }
           }

           // 识别错误事件
           manager.onError = (res) => {
               console.log(res,'识别错误事件');
               that.onend_recode();
               start_time = 0;
               that.setData({
                   siri_hide: true
               })
               clearInterval(siri_timer);
               that.triggerEvent('no_understand');

               // -30011 正在录音
               if(res.retcode === -30011){
                   manager.stop();
               }
           }

           // 语音播放开始事件
           wx.onBackgroundAudioPlay();
       },
       // 开始录音
       startRecode(e) {
           let that = this;
           voice.stop();

           if (is_start) {
               console.warn("正在录音");
               return
           }
           start_time = e.timeStamp;

           timer = setTimeout(()=>{
               if(that.data.record_status===0){
                   that.get_record_authorize();
                   return;
               }
               that.triggerEvent('handle_start_record',true);
               manager.start({
                   lang: 'zh_CN'
               })
               is_start = true;

           },300)

       },
       // 录音结束
       endRecode: function(e) { // 结束录音
           console.log(is_start,'endRecode')
           // 没有录音的时候返回 防止重复触发stop函数
           if (is_start) {
               clearTimeout(timer);
               manager.stop();
               is_start = false;
           }
           // 按下抬起时间小于0.6秒
           if (e.timeStamp - start_time <= 300){
               clearTimeout(timer);

               // 在首页
               if(!this.data.show_btns){
                   // wx.navigateTo({
                   //     url: '/pages/voice/voiceNavigation/voiceNavigation'
                   // })
               }else{
                   wx.showToast({
                       title: '说话时间太短',
                       icon: 'none',
                       mask: true
                   })
                   setTimeout(() => {
                       wx.hideToast();
                   }, 1000)
               }
           }
       },
       // 关闭录音弹框
       stop_record(newVal){
           // console.log(this.data,'this.data')
           voice.stop();
           if(!newVal && !this.data.siri_hide){
               this.init_animation();
               this.initRecord();

               this.onend_recode();
               // this.setData({
               //     siri_hide: true
               // })
               clearInterval(siri_timer);
               manager.stop();
           }
       },
       // 上传录音文件
       recodeUpload(path) {
           let that = this;
           wx.uploadFile({
               url: app.globalData.API_URL + '/interaction/v1/' + app.globalData.appid + '/skills/fileRealize',
               filePath:path,
               name: 'file',
               header: {
                   'content-type': 'multipart/form-data'
               },
               formData: {
                   uid: app.globalData.uid
               },
               success(res) {
                   if (!res.data) return;
                   let response = JSON.parse(res.data);
                   console.log(response, 'recodeUpload');

                   // -15 说的话识别为''空
                   if (response.code === -15) {
                       that.triggerEvent('switch_component', 'default_com');
                       return;
                   }
                   // 异常处理
                   if (response.code != 0) {
                       // 没有识别出来
                       if(response.data){
                           that.triggerEvent('handle_text_result', {
                               question: response.data.msg,
                               result: '小鱼还小,不明白你刚才讲的话,请换种问法',
                               link: '',
                               isPlay: true
                           })
                       }else{
                           that.triggerEvent('no_understand');
                       }
                       return;
                   };

                   console.log(response, 'response-------');
                   that.triggerEvent('has_result', response.data);
               },
               fail(e) {
                   that.triggerEvent('no_understand')
               },
               complete() {
                   wx.hideLoading();
               }
           });
       },

       // 我的随机数
       myradom: function() {
           const that = this;
           var _radomheight = [];
           for (var i = 0; i < 22; i++) {
               // +1是为了避免为0
               _radomheight[i] = (200 * Math.random().toFixed(2)) + 10;
           }
           that.setData({
               radomheight: _radomheight
           });
       },

       // 小鱼飞起
       onstart_recode() {
           console.log(this.data.siri_hide,'小鱼飞起')
           let move_x = this.data.move_x;
           let move_y = this.data.move_y;
           this.animation.translate3d(-move_x, -move_y, 0).step();

           this.setData({
               animationData: this.animation.export()
           })
       },

       // 小鱼回来
       onend_recode() {
           this.animation.translate3d(0, 0, 0).step()
           this.setData({
               animationData: this.animation.export()
           })
       },

       // 切换显示的组件
       switch_component() {
           this.triggerEvent('switch_component', 'voice_input');
       },
       close_tip() {
           this.setData({
               show_tip: false
           })
           wx.setStorage({
               key: 'voice_tip',
               data: 1
           })
       },
       // 调起录音授权
       get_record_authorize(){
           let that = this;
           wx.authorize({
               scope: 'scope.record',
               success() {
                   console.log("录音授权成功");
                   //第一次成功授权后 状态切换为2
                   that.setData({
                       record_status: 1
                   })
               },
               fail(){
                   wx.showModal({
                       title: '提示',
                       content: '您未授权录音,功能将无法使用',
                       showCancel: true,
                       confirmText: "授权",
                       confirmColor: "#52a2d8",
                       success: function (res) {
                           if (res.confirm) {
                               //确认则打开设置页面(重点)
                               wx.openSetting({
                                   success: (res) => {
                                       console.log(res.authSetting);
                                       if (!res.authSetting['scope.record']) {
                                           //未设置录音授权
                                           that.setData({
                                               record_status: 0
                                           })
                                       } else {
                                           //第二次才成功授权
                                           console.log("设置录音授权成功");
                                           that.setData({
                                               record_status: 1
                                           })
                                       }
                                   },
                                   fail: function () {
                                       console.log("授权设置录音失败");
                                   }
                               })
                           } else if (res.cancel) {
                               console.log("cancel");
                           }
                       },
                       fail: function () {
                           console.log("openfail");
                       }
                   })
               }
           })
       }

   }
})


最后一次编辑于  2018-10-13
回答关注问题邀请回答
收藏

3 个回答

  • 快乐在行动
    快乐在行动
    2018-10-13

    解决了,解决办法是页面显示的时候重新渲染,隐藏的时候销毁组件

    2018-10-13
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-10-13

    我用你的代码做了个简单的片段,删掉了录音相关功能,问题并没有复现。所以我推测是录音出了什么问题

    wechatide://minicode/z0HOY8mG7w3R

    2018-10-13
    有用
    回复 7
    • 快乐在行动
      快乐在行动
      2018-10-13

      谢谢🙏,我在看一下,感谢

      2018-10-13
      回复
    • 卢霄霄
      卢霄霄
      2018-10-13回复快乐在行动

      一大团大团的代码。。耐心下降30%

      2018-10-13
      回复
    • 快乐在行动
      快乐在行动
      2018-10-13回复卢霄霄

      以后尽量整理成代码片段 , 再次感谢

      2018-10-13
      回复
    • 快乐在行动
      快乐在行动
      2018-10-13回复卢霄霄

      解决了,解决办法是页面显示的时候重新渲染,隐藏的时候销毁组件

      2018-10-13
      回复
    • 卢霄霄
      卢霄霄
      2018-10-13回复快乐在行动

      语音组件吗?

      2018-10-13
      回复
    查看更多(2)
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-10-12

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-10-12
    有用
    回复 4
    • 快乐在行动
      快乐在行动
      2018-10-12

      苹果6s , 版本6.7.2 ,  你可以搜索公众号EduMax 看一下

      2018-10-12
      回复
    • 卢霄霄
      卢霄霄
      2018-10-12回复快乐在行动

      看没用。。要跑代码才知道原因。。根据你的描述,我觉得有两种可能

      1、动画实例没了

      2、动画没还原

      2018-10-12
      回复
    • 快乐在行动
      快乐在行动
      2018-10-13回复卢霄霄

          我把代码粘贴了一下,您看一下,谢谢

      2018-10-13
      回复
    • 卢霄霄
      卢霄霄
      2018-10-13回复快乐在行动

      最好能弄成代码片段,要跑起来才能调试。。首先有个问题哦,this.data.move_x move_y 这俩东西请不要这么使用,直接this.move_x 比较好

      2018-10-13
      回复
登录 后发表内容