小程序實現和h5一樣的音樂圖標一直旋轉。
一、.js中封裝旋轉動畫方法
添加animation屬性
data:{ animation:''" }
改變animation的值(官網提供角度范圍是-180~180,但是我發現角度越大會一直旋轉)
onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" delay: 0, transformOrigin: '50% 50% 0', success: function(res) { console.log("res") } }) }, rotateAni: function (n) { console.log("rotate=="+n) this.animation.rotate(180*(n)).step() this.setData({ animation: this.animation.export() }) },
二、在.wxml中需要的控件上添加animation屬性
<view class="show-iconView"> <image src="{{src}}" class="show-iconImage" animation="{{animation}}" mode="scaleToFill"></image> </view>
三、連續動畫需要添加定時器
var n = 0, that = this; this.interval = setInterval(function () { n++; that.rotateAni(n); }, 1400);
onLoad 或者 show 的時候執行或者看業務需求。
微信達到播放音樂的效果
一、方法一。
點擊的時候播放一段 語音(也可以是音樂),這種方法不適合做背景音樂,類似h5的那樣背景音樂。
點擊音樂圖標的時候
onmusicTap: function (event) { if (this.data.isPlayingMusic) { wx.pauseBackgroundAudio(); this.setData({ isPlayingMusic: false }); } else { wx.playBackgroundAudio({ dataUrl: 'https://www.zhitaochan.cn/Opening.mp3' }); this.setData({ isPlayingMusic: true }); } },
判斷當前是否在在播放這段音樂,沒有則播放,播放中就不執行播放。
在onLoad的時候執行
wx.playBackgroundAudio({ dataUrl: 'https://www.zhitaochan.cn/Opening.mp3' });
方法二、H5一樣的背景音樂,一直播放可循環
onLoad的時候
const innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src = 'https://www.zhitaochan.cn/Opening.mp3'; innerAudioContext.loop = true; innerAudioContext.play();
具體屬性:https://developers.weixin.qq.com/miniprogram/dev/api/createInnerAudioContext.html