2017-05-08 6 views
1

"kg"と "lbs"という2つのカテゴリを持つラベル( 'profile/uid'の下に格納されています)のFirebaseデータベースから "Weight"私はラベルがユーザーの体重をkgで表示し、その後lbsにフェードアウトしてから再びkgに戻ってくれるようにしたいと思います。これまでのところ、私は常にポンドで重量にしてフェードアウトされ、次のコードを書かれていると私はそれがポンド一度キロで体重を表示するために取得する方法がわからないよフェードアウト:CAAnimationを使用して無限に2つの変数を回転する

func weight() { 

    let userRf = self.firDatabaseRef.child("profile").child("\(User!.uid)").observe(FIRDataEventType.value, with: { (snapshot) in 
     if snapshot.exists() { 
      if let weight = snapshot.childSnapshot(forPath: "weight").value as? [String: AnyObject] { 
       if let kg = weight["kg"] as? Float, let lbs = weight["lbs"] as? Int { 

        let animation: CATransition = CATransition() 
        animation.duration = 2.0 
        animation.type = kCATransitionFade 
        animation.repeatDuration = .infinity 
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) 
        self.displayWeight.layer.add(animation, forKey: "changeTextTransition") 

        self.displayWeight.text = "\(lbs) lbs" 

       } 
      } 
     } 
    } 

} 

答えて

1

一つの方法はにありますTimerで繰り返しUIVIewアニメーションに沿って使用:これは、ラベルが見えて開始することを想定している

// set up some helpful constants 
let kgsText = "\(kgs) kgs" 
let lbsText = "\(lbs) lbs" 
let fadeDuration = 2.0 

// keep track of which unit is being displayed 
var isDisplayingKgs = true 

// animate the fade in and out, repeating 
UIView.animate(withDuration: fadeDuration, delay: 0, options: [.autoreverse, .repeat], animations: { 
    label.alpha = 0 
}, completion: nil) 

// start the timer to switch the text after a short delay 
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + fadeDuration) { 
    self.displayWeight.text = lbsText 
    isDisplayingKgs = false 
    Timer.scheduledTimer(withTimeInterval: fadeDuration * 2, repeats: true, block: { timer in 
     self.displayWeight.text = isDisplayingKgs ? lbsText : kgsText 
     isDisplayingKgs = !isDisplayingKgs 
    }) 
} 

(アルファ= 1)。ディスパッチ遅延はラベルが初めてフェードアウトが、中にタイマーキックの前にされたときに最初の遷移が発生したことを確認することです

ここでアニメーションがアクションでどのように見えるかです:。

gif of the label animation

+1

これは完璧なおかげです! –

+0

ちょっと別の簡単な質問です。タイマーを使って表示する変数が2つ以上ある場合、存在していてもいなくても、どのように達成できますか?今のところ私はタイマー内のifステートメントを使用して、各変数を表示します。存在する場合、タイマーが最後の変数に到達すると最初のifステートメントに戻り、再び最初の変数を表示します。最後の変数が表示されます。 –

+1

@UmarYaqubまず、表示するアイテムの数を確認する必要があります。次に、それらを配列に追加します。アニメーションコードは、任意の数の項目を考慮に入れてリファクタリングする必要がありますが、タイマーブロックが起動するたびに配列内の要素を回転させるのは難しいはずはありません。 – nathan

関連する問題