web-dev-qa-db-ja.com

UIImageViewで画像の変化をアニメーション化する方法は？

画像付きのUIImageViewがあります。これで、まったく新しい画像（グラフィックファイル）ができました。このUIImageViewに表示したいと思います。設定しただけなら

myImageView.image = newImage;

新しい画像がすぐに表示されます。アニメートできません。

新しい画像にうまくフェードインしてほしい。その上に新しいUIImageViewを作成してアニメーションとブレンドするよりも良い解決策があるのではないかと思いました。

iosiphoneanimationuiimageviewuiimage
176
dontWatchMyProfile

サポートされているすべてのビュー遷移がUIViewAnimationTransition列挙で定義されているように見えるため、フェード効果でUIViewをアニメーション化できるかどうかはわかりません。 CoreAnimationを使用してフェード効果を実現できます。このアプローチのサンプル例：

#import <QuartzCore/QuartzCore.h>
...
imageView.image = [UIImage imageNamed:(i % 2) ? @"3.jpg" : @"4.jpg"];

CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;

[imageView.layer addAnimation:transition forKey:nil];
252
Vladimir
[UIView transitionWithView:textFieldimageView
                  duration:0.2f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    imageView.image = newImage;
                } completion:nil];

別の可能性です

362
Ilker Baltaci

マイケル・スコットの言葉を借りれば、それを単純な愚かさのままにしてください。 SwiftおよびSwift 4でこれを行う簡単な方法を次に示します。

UIView.transition(with: imageView,
                  duration: 0.75,
                  options: .transitionCrossDissolve,
                  animations: { self.imageView.image = toImage },
                  completion: nil)
121
Zia

Swiftの1つの例を次に示します。これは、最初に新しいイメージをクロスディゾルブしてから、弾むアニメーションを追加します。

var selected: Bool {
  willSet(selected) {
    let expandTransform:CGAffineTransform = CGAffineTransformMakeScale(1.15, 1.15);
    if (!self.selected && selected) {
      UIView.transitionWithView(self.imageView,
        duration:0.1,
        options: UIViewAnimationOptions.TransitionCrossDissolve,
        animations: {
          self.imageView.image = SNStockCellSelectionAccessoryViewImage(selected)
          self.imageView.transform = expandTransform
        },
        completion: {(finished: Bool) in
          UIView.animateWithDuration(0.4,
            delay:0.0,
            usingSpringWithDamping:0.40,
            initialSpringVelocity:0.2,
            options:UIViewAnimationOptions.CurveEaseOut,
            animations: {
              self.imageView.transform = CGAffineTransformInvert(expandTransform)
            }, completion:nil)
      })
    }
  }
}

var imageView:UIImageView

imageViewがサブビューとしてビューに正しく追加されている場合、selected = falseからselected = trueを切り替えると、画像が弾むアニメーションに切り替わります。 SNStockCellSelectionAccessoryViewImageは、現在の選択状態に基づいて異なる画像を返すだけです。以下を参照してください。

private let SNStockCellSelectionAccessoryViewPlusIconSelected:UIImage = UIImage(named:"PlusIconSelected")!
private let SNStockCellSelectionAccessoryViewPlusIcon:UIImage = UIImage(named:"PlusIcon")!

private func SNStockCellSelectionAccessoryViewImage(selected:Bool) -> UIImage {
  return selected ? SNStockCellSelectionAccessoryViewPlusIconSelected : SNStockCellSelectionAccessoryViewPlusIcon
}

以下のGIFの例は少し遅くなり、実際のアニメーションは速くなります。

UIImageView bounce animation Gif

41
Zorayr

コード：

var fadeAnim:CABasicAnimation = CABasicAnimation(keyPath: "contents");

fadeAnim.fromValue = firstImage;
fadeAnim.toValue   = secondImage;
fadeAnim.duration  = 0.8;         //smoothest value

imageView.layer.addAnimation(fadeAnim, forKey: "contents");

imageView.image = secondImage;

例：

UIImageView Example from code

楽しい、より詳細なソリューション：（タップで切り替える）

    let fadeAnim:CABasicAnimation = CABasicAnimation(keyPath: "contents");

    switch imageView.image {
        case firstImage?:
            fadeAnim.fromValue = firstImage;
            fadeAnim.toValue   = secondImage;
            imageView.image    = secondImage;
        default:
            fadeAnim.fromValue = secondImage;
            fadeAnim.toValue   = firstImage;
            imageView.image    = firstImage;
    }

    fadeAnim.duration = 0.8;

    imageView.layer.addAnimation(fadeAnim, forKey: "contents");
14
J-Dizzle

これを試して：

_imageView.image = image;
[_imageView.layer addAnimation:[CATransition animation] forKey:kCATransition];
10
Peter Stajger

Swift 3を使用

extension UIImageView{   
 var imageWithFade:UIImage?{
        get{
            return self.image
        }
        set{
            UIView.transition(with: self,
                              duration: 0.5, options: .transitionCrossDissolve, animations: {
                                self.image = newValue
            }, completion: nil)
        }
    }
}

使用法：

myImageView.imageWithFade = myImage
7
M.Nadeeshan
CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"contents"];
fadeAnim.fromValue = (__bridge id)imageView.image.CGImage;
fadeAnim.toValue = (__bridge id)[UIImage imageNamed:@"newImage.png"].CGImage;
fadeAnim.duration = 2.0;
[imageView.layer addAnimation:fadeAnim forKey:@"contents"];
imageView.layer.contents = (__bridge id)[UIImage imageNamed:@"newImage.png"].CGImage;
5
kas-kad

これを試してみませんか。

NSArray *animationFrames = [NSArray arrayWithObjects:
  [UIImage imageWithName:@"image1.png"],
  [UIImage imageWithName:@"image2.png"], 
  nil];

UIImageView *animatedImageView = [[UIImageView alloc] init];
animatedImageView.animationImages = animationsFrame;
[animatedImageView setAnimationRepeatCount:1];
[animatedImageView startAnimating];

Swiftバージョン：

let animationsFrames = [UIImage(named: "image1.png"), UIImage(named: "image2.png")]
let animatedImageView = UIImageView()
animatedImageView.animationImages = animationsFrames
animatedImageView.animationRepeatCount = 1
animatedImageView.startAnimating()
5
William Hu

ここにはいくつかの異なるアプローチがあります： UIAnimations 私の回想では、あなたの挑戦のように聞こえます。

編集：私の怠け者:)

投稿では、この方法について言及していました。

[newView setFrame:CGRectMake( 0.0f, 480.0f, 320.0f, 480.0f)]; //notice this is OFF screen!
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 480.0f)]; //notice this is ON screen!
[UIView commitAnimations];

ただし、フレームをアニメーション化する代わりに、アルファをアニメーション化します。

[newView setAlpha:0.0]; // set it to zero so it is all gone.
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setAlpha:0.5]; //this will change the newView alpha from its previous zero value to 0.5f
[UIView commitAnimations];
3
RickiG

IOS 5の時点では、これははるかに簡単です。

[newView setAlpha:0.0];
[UIView animateWithDuration:0.4 animations:^{
    [newView setAlpha:0.5];
}];
2
Borut Tomazin

ウラジミールの答えは完璧ですが、Swiftソリューションを探している私のような人は誰でも

このソリューションはSwiftバージョン4.2で動作します

var i = 0
    func animation(){
        let name = (i % 2 == 0) ? "1.png" : "2.png"
        myImageView.image = UIImage.init(named: name)
        let transition: CATransition = CATransition.init()
        transition.duration = 1.0
        transition.timingFunction = CAMediaTimingFunction.init(name: .easeInEaseOut)
        transition.type = .fade
        myImageView.layer.add(transition, forKey: nil)
        i += 1
    }

このメソッドはどこからでも呼び出すことができます。画像をアニメーション付きの次の画像に変更します。

Swiftバージョン4.以下のソリューションを使用

var i = 0
    func animationVersion4(){
        let name = (i % 2 == 0) ? "1.png" : "2.png"
        uiImage.image = UIImage.init(named: name)
        let transition: CATransition = CATransition.init()
        transition.duration = 1.0
        transition.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition.type = kCATransitionFade
        uiImage.layer.add(transition, forKey: nil)
        i += 1
    }
0
Saleh Enam Shohag