検索
ホームページWeChat アプレットミニプログラム開発ズームインおよびズームアウト用のマイクアニメーションエフェクトコードのミニプログラム開発

ボイスレコーダーを作りたいのですが、最初のステップがマイクアニメーションに引っかかっています。

まずGIFをアップロードしてから文句を言ってください。 ① 上のGIF

WeChat

アプレットの開発ドキュメントを長時間探しましたが、ループ再生ズームインおよびズームアウト用のマイクアニメーションエフェクトコードのミニプログラム開発はありません。ループモードのパラメータ設定では、setInterval() を使用してもアニメーションは実行されません。
WeChat ドキュメントのアニメーション
このポットは捨てても大丈夫ですか?

アニメーションループを実現できるので教えてください

② フロントエンドの基盤がないと、非主流の方法でやるしかありません。

ズームインおよびズームアウト用のマイクアニメーションエフェクトコードのミニプログラム開発js
で定義した値をwx:if{{}}で判断して画像の表示・非表示を制御するCSS の基礎がしっかりしていないので、それについては説明しません

1.index.wxml

<!--index.wxml-->  
<view  class="voice-style" bindtap="startSpeak">  
<image class="bg-style" src="../../images/voice_icon_speaking_bg_normal.png" ></image>  
<image class="bg-style" animation="{{spreakingAnimation}}" src="../../images/voice_video_loading_0.png"></image>  
<image class="bg-style" animation="{{spreakingAnimation_1}}" src="../../images/voice_video_loading_0.png"></image>  
<image class="bg-style" animation="{{spreakingAnimation_2}}" src="../../images/voice_video_loading_0.png"></image>  
<image class="sound-style" src="../../images/voice_icon_speech_sound_1.png" ></image>  
<image wx:if="{{j==2}}" class="sound-style" src="../../images/voice_icon_speech_sound_2.png" ></image>  
<image wx:if="{{j==3}}" class="sound-style" src="../../images/voice_icon_speech_sound_3.png" ></image>  
<image wx:if="{{j==4}}" class="sound-style" src="../../images/voice_icon_speech_sound_4.png" ></image>  
<image wx:if="{{j==5}}"class="sound-style" src="../../images/voice_icon_speech_sound_5.png" ></image>  
</view>

2.

3. インデックスwxss

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    spreakingAnimation: {},//放大动画  
    j: 1,//帧动画初始图片  
    isSpeaking: false,//是否在录音状态  
  },  
  onLoad: function () {  
  },  
  //点击开始说话  
  startSpeak: function () {  
    var _this = this;  
    if (!this.data.isSpeaking) {  
      speaking.call(this);  
      this.setData({  
        isSpeaking: true  
      })  
    } else {  
      //去除帧动画循环  
      clearInterval(this.timer)  
      this.setData({  
        isSpeaking: false,  
        j: 1  
      })  
    }  
  },  
})  
  
  
function speaking() {  
  //话筒帧动画  
  var i = 1;  
  this.timer = setInterval(function () {  
    i++;  
    i = i % 5;  
    _this.setData({  
      j: i  
    })  
    return  
  }, 200);  
  //波纹放大,淡出动画  
  var _this = this;  
  var animation = wx.createAnimation({  
    duration: 1000  
  })  
  animation.opacity(0).scale(3, 3).step();//修改透明度,放大  
  this.setData({  
    spreakingAnimation: animation.export()  
  })  
setTimeout(function(){  
    //波纹放大,淡出动画  
  var animation = wx.createAnimation({  
    duration: 1000  
  })  
  animation.opacity(0).scale(3, 3).step();//修改透明度,放大  
  _this.setData({  
    spreakingAnimation_1: animation.export()  
  })  
  },250)  
   setTimeout(function(){  
    //波纹放大,淡出动画  
  var animation = wx.createAnimation({  
    duration: 1000  
  })  
  animation.opacity(0).scale(3, 3).step();//修改透明度,放大  
  _this.setData({  
    spreakingAnimation_2: animation.export()  
  })  
  },500)  
}

以上がズームインおよびズームアウト用のマイクアニメーションエフェクトコードのミニプログラム開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
如何在uniapp中实现小程序开发和发布如何在uniapp中实现小程序开发和发布Oct 20, 2023 am 11:33 AM

如何在uni-app中实现小程序开发和发布随着移动互联网的发展,小程序成为了移动应用开发的一个重要方向。而uni-app作为一个跨平台的开发框架,可以同时支持多个小程序平台的开发,如微信、支付宝、百度等。下面将详细介绍如何使用uni-app开发和发布小程序,并提供一些具体的代码示例。一、小程序开发前准备在开始使用uni-app开发小程序之前,需要做一些准备工

PHP在小程序开发中的页面跳转与路由管理PHP在小程序开发中的页面跳转与路由管理Jul 04, 2023 pm 01:15 PM

PHP在小程序开发中的页面跳转与路由管理随着小程序的快速发展,越来越多的开发者开始将PHP与小程序开发相结合。在小程序开发中,页面跳转和路由管理是非常重要的一部分,它能够帮助开发者实现页面之间的切换和导航操作。PHP作为一种常用的服务器端编程语言,可以很好地与小程序进行交互和数据传递,下面我们来详细了解一下PHP在小程序中的页面跳转与路由管理。一、页面跳转基

小程序开发中的PHP权限管理与用户角色设定小程序开发中的PHP权限管理与用户角色设定Jul 04, 2023 pm 04:48 PM

小程序开发中的PHP权限管理与用户角色设定随着小程序的普及和应用范围的扩大,用户对于小程序的功能和安全性提出了更高的要求,其中权限管理和用户角色设定是保证小程序安全性的重要一环。在小程序中使用PHP进行权限管理和用户角色设定能够有效地保护用户的数据和隐私,下面将介绍如何实现这一功能。一、权限管理的实现权限管理是指根据用户的身份和角色,授予不同的操作权限。在小

小程序开发中的PHP数据缓存与缓存策略小程序开发中的PHP数据缓存与缓存策略Jul 05, 2023 pm 02:57 PM

小程序开发中的PHP数据缓存与缓存策略随着小程序的快速发展,更多的开发者开始关注如何提高小程序的性能和响应速度。其中一个重要的优化手段就是使用数据缓存来减少对数据库和外部接口的频繁访问。而在PHP中,我们可以利用各种缓存策略来实现数据缓存。本文将介绍PHP中的数据缓存原理,并提供几个常见的缓存策略的示例代码。一、数据缓存原理数据缓存是指将数据存放在内存中,以

小程序开发中的PHP安全防护与攻击防范小程序开发中的PHP安全防护与攻击防范Jul 07, 2023 am 08:55 AM

小程序开发中的PHP安全防护与攻击防范随着移动互联网的迅猛发展,小程序成为了人们生活中重要的一部分。而PHP作为一种强大而灵活的后端开发语言,也被广泛应用于小程序的开发中。然而,安全问题一直是程序开发中需要重视的方面。本文将重点介绍小程序开发中PHP的安全防护与攻击防范,同时提供一些代码示例。XSS(跨站脚本攻击)防范XSS攻击是指黑客通过向网页注入恶意脚本

微信小程序中PHP开发的下拉菜单实现方法微信小程序中PHP开发的下拉菜单实现方法Jun 04, 2023 am 10:31 AM

今天我们来学习一下微信小程序中PHP开发的下拉菜单实现方法。微信小程序是一种轻量级的应用程序,用户可以在微信里直接使用,而且不需要下载安装,非常方便。而PHP是一种非常流行的后端编程语言,也是与微信小程序配合很好的一种语言。下面我们就来看看如何在微信小程序中使用PHP开发下拉菜单。首先,我们需要准备好开发环境,包括PHP、微信小程序开发工具和服务器。然后我们

小程序开发中的PHP页面动画效果与交互设计小程序开发中的PHP页面动画效果与交互设计Jul 04, 2023 pm 11:01 PM

小程序开发中的PHP页面动画效果与交互设计导语:小程序是一种在移动设备上运行的应用程序,能够提供类似原生应用的体验。而在小程序开发中,PHP作为一种常用的后端语言,可以为小程序页面增添动画效果与交互设计。本文将介绍一些常用的PHP页面动画效果与交互设计,并附上代码示例。一、CSS3动画CSS3提供了丰富的属性和方法,用于实现各种动画效果。而在小

小程序开发中的PHP错误处理与异常日志记录小程序开发中的PHP错误处理与异常日志记录Jul 04, 2023 am 11:16 AM

小程序开发中的PHP错误处理与异常日志记录随着小程序的不断普及,越来越多的开发人员开始使用PHP语言来开发小程序后台。在开发过程中,错误处理和异常日志记录是至关重要的。本文将介绍在小程序开发中如何处理PHP错误和记录异常日志,并给出相应的代码示例。一、PHP错误处理错误报告设置在PHP中,我们可以通过修改error_reporting和display_err

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)