WeChat mini-app development and microphone animation for amplification and fade-out

This article mainly introduces the microphone animation for small program development: frame animation, amplification, fade-out related materials. It has good reference value. Next, let's take a look at it. This article mainly introduces the microphone animation for applet development: frame animation, amplification, fade-out related information. It has good reference value. Let's take a look at it with the small editor.

To make a recorder, the first step is stuck in the microphone animation.

First Upload gif. then vomit.

② There is a frame animation in the microphone, and there is no front-end Foundation. it can only be integrated with non-mainstream methods.

Using wx: ifini{}}the value defined in JS is not equal to the image's corresponding number to control the image display and hidden .css should have a better way. I don't have a strong css Foundation, so I won't talk about it.

Code:

1. index. wxml

2. index. js

// Index. js // Obtain the application instance var app = getApp () Page ({data: {spreakingAnimation :{}, // enlarge the animation j: 1, // The initial image isSpeaking of the frame animation: false, // recording Status}, onLoad: function () {}, // Click start to speak startSpeak: function () {var _ this = this; if (! This. data. isSpeaking) {speaking. call (this); this. setData ({isSpeaking: true})} else {// clear frame animation loop clearInterval (this. timer) this. setData ({isSpeaking: false, j: 1}) }},}) function speaking () {// microphone frame animation var I = 1; this. timer = setInterval (function () {I ++; I = I % 5; _ this. setData ({j: I}) return}, 200); // ripple zoom in, fade out animation var _ this = this; var animation = wx. createAnimation ({duration: 1000}) animation. opacity (0 ). scale (3, 3 ). step (); // modify the transparency and enlarge this. setData ({spreakingAnimation: animation. export ()}) setTimeout (function () {// ripple amplification, fade out animation var animation = wx. createAnimation ({duration: 1000}) animation. opacity (0 ). scale (3, 3 ). step (); // modify the transparency and enlarge _ this. setData ({spreakingAnimation_1: animation. export ()}, 250) setTimeout (function () {// ripple amplification, fade out animation var animation = wx. createAnimation ({duration: 1000}) animation. opacity (0 ). scale (3, 3 ). step (); // modify the transparency and enlarge _ 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; }

The above is the details about how to zoom in and fade out the microphone animation developed by the applet. For more information, see other related articles on php Chinese network!