ヒロポメと申します。アプリを作っています。
諸々調べたのですが解決せず、お力添え頂けますと幸いです。。。!
お手数ですが、よろしくお願いいたします。
●やりたいこと
collection view内で、丸いボタンのセルを押したら、音声が流れると同時に、丸ボタンが拡大・縮小を繰り返すアニメーションを実行させたいです。
●問題
先に丸が拡大縮小をして、アニメーションが終了して静止したあとに、音声が流れます。
アニメーションと、音声の再生を同時に行うにはどうすれば良いでしょうか?
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//中略
animatePulsatingLayer()
URLSession.shared.dataTask(with: audioUrl!, completionHandler: { (data, response, error) in
DispatchQueue.global().async{
DispatchQueue.main.async{
do {
self.audioPlayer = try AVAudioPlayer(data:data!)
self.audioPlayer.delegate = self
self.audioPlayer.play()
self.myCollectionView.reloadData();
}
catch{}
}
}
}).resume()
}
private func animatePulsatingLayer() {
let animation = CABasicAnimation(keyPath: "transform.scale")
animation.toValue = 1.4 //丸がどこまで大きくなるか。1がデフォルト。
animation.duration = 0.8 //動く速さ
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
animation.autoreverses = true //元に戻る
animation.repeatCount = Float.infinity
layer2?.add(animation, forKey: "pulsing")
}
ちなみにanimatePulsatingLayer関数を、下記do{}の中にかくと、音声だけが流れて、アニメーションは機能しなくなりました。
//再掲
do {
self.audioPlayer = try AVAudioPlayer(data:data!)
self.audioPlayer.delegate = self
self.audioPlayer.play()
self.animatePulsatingLayer() //ここに挿入してみる
self.myCollectionView.reloadData();
}
また、音声の再生が終了したら、アニメーションも止めるようにするにはどうすればいいでしょうか?
以下関数でなんとかできないでしょうか?
以下、func audioPlayerDidFinishPlayingを加えた修正版です。
最初の投稿で「中略」として記載していなかった箇所も記載しました。
func audioPlayerDidFinishPlaying(_ player: AVAudioPlayer, successfully flag: Bool) {}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if let cell = collectionView.cellForItem(at: indexPath) as? ImageCollectionViewCell {
cell.didSelect(indexPath: indexPath)
layer2 = cell.imgImg.layer
}
number = indexPath.row
//押したら、fiebase上のlistenedがtrueに変わる。
let newValuesForProfile = ["listened": true]
if messages[indexPath.row].senderId == self.toID {
DBProvider.Instance.dbRef.child("Media_Messages").child(messages[indexPath.row].childkey!).updateChildValues(newValuesForProfile)
}
animatePulsatingLayer()//アニメーションの詳細を記述した関数を呼び出す
do{
let message = messages[indexPath.row]
let audioUrl = URL(string: message.url!)
URLSession.shared.dataTask(with: audioUrl!, completionHandler: { (data, response, error) in
DispatchQueue.global().async{
DispatchQueue.main.async{
func audioPlayerDidFinishPlaying(_ player: AVAudioPlayer, successfully flag: Bool) {
do {
self.audioPlayer = try AVAudioPlayer(data:data!)
self.audioPlayer.delegate = self
self.audioPlayer.play()
self.myCollectionView.reloadData();
}
catch{}
} //func audioPlayerDidFinishPlaying終了
}
}
}).resume()
} catch {
}
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
URLSession.shared.dataTask
のcompletionHandler
でreloadData()
させているのが問題ではないか?と思います。
reloadData()
はなんのために行なっているのでしょうか?(プログラム全体がわからないので)
そもそもanimationは繰り返しになっているので静止した後に音楽がなり出すと言う流れではなく
1、animatePulsatingLayer()によってアニメーションしている
2、URLSessionでデータを取りに行く(データの大きさによって数秒かかる?)
3、completionHandlerでreloadData()(reloadDataすることによってCellが再生成されてしまうのでアニメーションしていたViewは消える)
1〜2の間はアニメーションしていますが、3になったときにアニメーションしていたビューがなくなって、音楽が鳴り始めると言うのが正しい現象だと思います。
一旦、試していただきたいのはreloadData()
をなくして音楽とアニメーションが同時に実行されるかと言う部分です。
その次に、reloadData()しないといけないのであれば、didselectでアニメーションさせるのではなく、reload後にcellForItemAtが呼ばれるのでフラグなどを持たせてそこでアニメーションさせるようにすると言う部分かと思います。
(押された瞬間にアニメーションして欲しいと言うのであれば少し考えなきゃいけないかも。音楽が鳴っている間にアニメーションしているのが正しそうなので、データを取得している最中はアニメーションしないが正しそうな感じもしますが)
また、音声の再生が終了したら、アニメーションも止めるようにするにはどうすればいいでしょうか?
こちらについてはt_obaraさんのおっしゃっている通りaudioPlayerDidFinishPlaying
にて終了がわかるのでそこでアニメーションを止めると良いです。
デリゲートについてですが、例えば今使っているCollectionViewの
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
と同じように考えて下さい。
よくわからないけど、collectionViewにdelegateをセットしておけば、collectionViewのcellを選択したときに
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
の中に入ってきますよね?それと同じような書き方です。
なので
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// 諸々の処理省略
}
func audioPlayerDidFinishPlaying(_ player: AVAudioPlayer, successfully flag: Bool) {
// デリゲートをセットしておけば終わった時に勝手にここに入ってくる!
// 音楽が終わった時の処理
}
こんな風に書くのが正しいです。
デリゲートについては感覚を掴むのが少し難しいところもあるかと思いますので、色々とサイトなどを見て勉強してみるのが良いでしょう。
確認用として簡易版で作ったものをgithubに置いておきましたので参考にしてください。
https://github.com/RAzuma/CollectionViewSoundTest
何かわからない部分などあればコメントください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
実装して試したわけではありませんが。。
AVAudioPlayerDelegateを参考に、audioPlayerDidFinishPlayingを呼ばれたことで再生が終了したことがわかるので、この中でアニメを停止するようにすれば良いです。
また、アニメを動かすには一度UIスレッドに処理を戻す必要があるので、ご提示の処理では動かないのだと思います。
そこで、
CAAnimationDelegateを利用して、animationDidStartが呼ばれたら音声を鳴らす様にすれば良いと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.22%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/10/05 00:11
お忙しい中、とても分かりやすく解説いただきありがとうございました。理解できました。
簡易版の作成・共有までありがとうございます。
reloadDataを消したら、ちゃんと同時に声の再生とアニメーションが実行されました。
また、アニメーションの終了も無事にできました。
// 音楽の読み込みに少し時間がかかってしまうのでロードが完了してからアニメーションと音を鳴らすと言うのも手
→数秒の音声を取得しに行っているので、いまのところロード時間は目立っておらず、
このままで行こうかと思います!
本当にありがとうございました!!!!