热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

小程序开发放大淡出的麦克风动画效果代码

这篇文章介绍微信小程序开发放大淡出的麦克风动画效果代码
想做个录音机,第一步就卡在麦克风动画这里了.

先上gif.再吐槽.

  
  
  
  
  
  
  
  
  
  
  

2. index.js

//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)  
}


3. index.wxss

/**index.wxss**/  
.voice-style {  
  margin-top: 400px;  
  display: flex;  
  position: relative;  
  flex-direction: column;  
  align-items: center;  
}  
  
.bg-style {  
  position: absolute;  
  width: 100px;  
  height: 100px;  
}  
.sound-style{  
  position: absolute;  
  width: 37.6px;  
  height: 60px;  
  margin-top: 20px;  
}

以上就是小程序开发放大淡出的麦克风动画效果代码的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 三周学会小程序第七讲:提交问题
    截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小 ... [详细]
  • 个人总结_软件工程课程——个人总结
    本文由编程笔记#小编为大家整理,主要介绍了软件工程课程——个人总结相关的知识,希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]
  • 阿里云 Aliplayer高级功能介绍(八):安全播放
    如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • Amoeba 通过优化 MySQL 的读写分离功能显著提升了数据库性能。作为一款基于 MySQL 协议的代理工具,Amoeba 能够高效地处理应用程序的请求,并根据预设的规则将 SQL 请求智能地分配到不同的数据库实例,从而实现负载均衡和高可用性。该方案不仅提高了系统的并发处理能力,还有效减少了主数据库的负担,确保了数据的一致性和可靠性。 ... [详细]
  • 触发器的稳态数量分析及其应用价值
    本文对数据库中的SQL触发器进行了稳态数量的详细分析,探讨了其在实际应用中的重要价值。通过研究触发器在不同场景下的表现,揭示了其在数据完整性和业务逻辑自动化方面的关键作用。此外,还介绍了如何在Ubuntu 22.04环境下配置和使用触发器,以及在Tomcat和SQLite等平台上的具体实现方法。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 掌握PHP框架开发与应用的核心知识点:构建高效PHP框架所需的技术与能力综述
    掌握PHP框架开发与应用的核心知识点对于构建高效PHP框架至关重要。本文综述了开发PHP框架所需的关键技术和能力,包括但不限于对PHP语言的深入理解、设计模式的应用、数据库操作、安全性措施以及性能优化等方面。对于初学者而言,熟悉主流框架如Laravel、Symfony等的实际应用场景,有助于更好地理解和掌握自定义框架开发的精髓。 ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
author-avatar
渊博的大盗zhang_618
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有