前言 每次寫點東西都扯兩句-0-,這幾天一半精力放在移動端,一半維護之前的項目。書也少看了,不過還好依舊保持一顆學習的心。對於css3我是之前有專門整理過的,因此對於原理之前也算了解。今天是項目中遇到一個效果,來整理一下。 正文 首先我們可以找到微信的語音播放效果。這里自行打開手機微信進行 ...
要求就是點擊播放按鈕,小喇叭開始動,當語音結束后,停止動畫。如圖: 這需要用到UIImageView的幀動畫,該動畫可以讓一系列圖片在特定的時間內按順序顯示出來。需要的素材如下: audio icon 分割線 audio icon 分割線 audio icon 代碼如下: 點擊按鈕的事件 ...
2015-10-20 17:39 0 13059 推薦指數:
前言 每次寫點東西都扯兩句-0-,這幾天一半精力放在移動端,一半維護之前的項目。書也少看了,不過還好依舊保持一顆學習的心。對於css3我是之前有專門整理過的,因此對於原理之前也算了解。今天是項目中遇到一個效果,來整理一下。 正文 首先我們可以找到微信的語音播放效果。這里自行打開手機微信進行 ...
效果圖 前台大體呈現效果圖如下: 點擊就可以播放mp3格式的錄音。點擊另外一個錄音,當前錄音停止! 思路 關於播放動畫,這個很簡單,我們可以用css3的逐幀動畫來實現。關於逐幀動畫,我之前的文章也寫過:http://www.haorooms.com/post/zhuzhen_dh ...
HTML部分: CSS部分: JS部分: ...
效果圖 前台大體呈現效果圖如下: 點擊就可以播放mp3格式的錄音。點擊另外一個錄音,當前錄音停止! 思路 關於播放動畫,這個很簡單,我們可以用css3的逐幀動畫來實現。關於逐幀動畫,我之前的文章也寫過:http://www.haorooms.com/post/zhuzhen_dh ...
HTML部分: css部分: JS部分: ...
需要導入 #import <AVFoundation/AVFoundation.h> 利用此框架中的 AVAudioRecorder和AVAudioPlayer來錄音和播放以下是AVAudioRecorder錄音的使用方法 ...
主要實現了點擊喇叭可實現動畫效果,再次點擊可靜止。 React中, jsx部分:設置喇叭基本樣式,以及觸發事件等。 關於className的解釋:關於是否點擊按鈕,來判斷喇叭展示的樣式。(鄙人能力不夠,只能通過這種方法控制 ...
今天在做砍價頁面的時候需要將一個按鈕動起來,效果圖如下: 其實它實現的原理很簡單,就是循環的縮小放大。 css3中的animate 有個屬性是 animation-iteration-count 可以控制動畫的循環播放,但是小程序里面沒有。該怎么實現呢? 無非就是2種狀態的切換 ...