web-dev-qa-db-ja.com

UILabelの背景色をアニメーション化する方法は？

これは動作するように見えますが、動作しません。色が一度に緑色に変わります。

self.labelCorrection.backgroundColor = [UIColor whiteColor];
[UIView animateWithDuration:2.0 animations:^{
    self.labelCorrection.backgroundColor = [UIColor greenColor];
}];
iosiphonecore-animation
72
Michiel de Mare

どこにも文書化されていませんが、コードがバニラbackgroundColorで正常に動作するため、UILabelのUIViewプロパティはアニメートできないようです。ただし、ラベルビュー自体の背景色を設定しない限り、このハックは機能しているように見えます。

#import <QuartzCore/QuartzCore.h>

...

theLabel.layer.backgroundColor = [UIColor whiteColor].CGColor;

[UIView animateWithDuration:2.0 animations:^{
    theLabel.layer.backgroundColor = [UIColor greenColor].CGColor;
} completion:NULL];
140
bosmacs

Swift

  1. （important）UILabelの背景色をクリアに設定します（IBまたはコードで）。例えば：

    override func viewDidLoad() {
    super.viewDidLoad()

    myLabel.backgroundColor = UIColor.clear
}

  2. レイヤーの背景色をアニメーション化します。

    @IBAction func animateButtonTapped(sender: UIButton) {

    UIView.animate(withDuration: 1.0, animations: {
        self.myLabel.layer.backgroundColor = UIColor.red.cgColor
    })
}

CGColorの後にUIColorが追加されることに注意してください。

結果

enter image description here

19
Suragch

Swift

ラベルの背景色を白から緑にアニメーション化するには、次のようにラベルを設定します。

self.labelCorrection.backgroundColor = UIColor.clear
self.labelCorrection.layer.backgroundColor = UIColor.white.cgColor

このようにアニメーション化します。

UIView.animate(withDuration: 2.0) { 
    self.labelCorrection.layer.backgroundColor = UIColor.green.cgColor
}

元の状態に戻り、再びアニメートできるようにするには、必ずアニメーションを削除してください。

self.labelCorrection.layer.backgroundColor = UIColor.white.cgColor
self.labelCorrection.layer.removeAllAnimations()
7
Mike Taverne

アニメーション化できますが、何らかの理由で最初に（プログラムで）clearColorに設定する必要がありました。それなしでは、アニメーションは機能しなかったか、表示されませんでした。

カスタムテーブルセルのUILabelの背景色をアニメーション化しています。 willDisplayCellメソッドのコードを次に示します。 cellForRowでアニメーションを設定しようとはしません。多くのレイアウトがテーブルによって調整されるためです。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
        ((RouteListCell *)cell).name.backgroundColor = [UIColor clearColor];
        [((RouteListCell *)cell).name backgroundGlowAnimationFromColor:[UIColor whiteColor] toColor:[UIColor redColor] clearAnimationsFirst:YES];
}

これが私のアニメーションルーチンです。

-(void) backgroundGlowAnimationFromColor:(UIColor *)startColor toColor:(UIColor *)destColor clearAnimationsFirst:(BOOL)reset;
{
    if (reset)
    {
        [self.layer removeAllAnimations];
    }

    CABasicAnimation *anAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    anAnimation.duration = 1.00;
    anAnimation.repeatCount = HUGE_VAL;
    anAnimation.autoreverses = YES;
    anAnimation.fromValue = (id) startColor.CGColor; // [NSNumber numberWithFloat:1.0];
    anAnimation.toValue = (id) destColor.CGColor; //[NSNumber numberWithFloat:0.10];
    [self.layer addAnimation:anAnimation forKey:@"backgroundColor"];
}
7
software evolved

私は最近この問題に再び遭遇し、いくつかの調査の後、基本的に何も変わらないと考えたため（おそらく予見できる将来ではないだろう）、そのためにFacebook POPフレームワーク （だけでなく）を使用することになりました。

ビューとレイヤーの両方で基本プロパティのアニメーションを簡単に行うことができますが、さらに、色（および基本的には何でも、カスタムコードを含む追加のコーディングを含む）の間でスムーズに移行できます。そのため、背景色については、次のようにします。

   // Create spring animation (there are more types, if you want)
   let animation = POPSpringAnimation(propertyNamed: kPOPViewBackgroundColor)

   // Configure it properly
   animation.autoreverses = false
   animation.removedOnCompletion = true
   animation.fromValue = UIColor.yourBeginningColor()
   animation.toValue = UIColor.yourFinalColor()

   // Add new animation to your view - animation key can be whatever you like, serves as reference
   label.pop_addAnimation(animation, forKey: "YourAnimationKey")

Viola、そのプロパティを持つすべての背景色をアニメーション化できるようになりました！

2
Jiri Trecak

NSTimerまたはCADisplayLinkコールバックに基づいて、適切なフレームレート（20 fpsなど）で手動でカラーアニメーションを実行します。アニメーション全体の時間の経過時間（例では2.0秒）に基づいて、RGBまたはHSVで独自の色変化曲線を計算するか、40個の中間色の配列を使用する必要があります。

2
hotpaw2

これを試してください、

[UIView transitionWithView:yourView duration:0.2 options:UIViewAnimationOptionTransitionNone animations:^{

[yourView setBackgroundColor:[UIColor colorWithRed:0.8588 green:0.8588 blue:0.8588 alpha:1]];
    }completion:^(BOOL finished) {

 }];

わたしにはできる。

2
Techie

Swift 4.1 UILabel Extension：

この拡張機能をコードに追加します。

extension UILabel {

    /** Animates the background color of a UILabel to a new color. */
    func animateBackgroundColor(to color : UIColor?, withDuration : TimeInterval, completion : ((Bool) -> Void)? = nil) {
        guard let newColor = color else { return }
        self.backgroundColor = .clear
        UIView.animate(withDuration: withDuration, animations: {
            self.layer.backgroundColor = newColor.cgColor
        }, completion: completion)
    }

}

次のように使用する必要があります。

myUILabel.animateBackgroundColor(to: .red, withDuration: 0.5)

元の色に戻したい場合は、次のように使用します。

// Storing the orignal color:
let originalColor = myUILabel.backgroundColor

// Changing the background color:
myUILabel.animateBackgroundColor(to: .red, withDuration: 0.5)

// ... Later:

// Restoring the original color:
myUILabel.animateBackgroundColor(to: originalColor, withDuration: 0.5, completion: {
    (value: Bool) in
    myUILabel.backgroundColor = originalColor
})
1
ThiagoAM

それは、ドキュメントでbackgroundColorがアニメート可能であると述べています

http://developer.Apple.com/library/ios/#documentation/uikit/reference/UIView_Class/UIView/UIView.html#//Apple_ref/doc/uid/TP40006816-CH3-SW131

いつから本当に分からない。

1
hfossli

Quartzに浸りたくない場合は、回答ごとに前の回答の1つで、UILabelと同じサイズの空のUIViewを作成し、UILabelと同じ場所に（そしてZオーダーでその下に）配置します。そのUIViewの背景色をアニメーション化します（私はこれを試しましたが、私にとってはうまくいきます）。

1
DavidN

リファレンスは次のとおりです。

アニメーションビューにコミットする変更を含むブロックオブジェクト。これは、ビュー階層内のビューのアニメート可能なプロパティをプログラムで変更する場所です。このブロックにはパラメーターがなく、戻り値もありません。このパラメーターはNULLであってはなりません

これについて私が理解しているのは、あなたのビューがアニメーションブロックを呼び出し、それからあなたのビューラベルの背景色が緑にコミットされるときです。次に、ラベルの背景色を他の色に変更しない場合、常に緑色になります。これは私が推測するものです

0
vodkhang