web-dev-qa-db-ja.com

UIImageViewで2つの画像間を移行するための最良の方法

ユーザーが画像のコレクションを閲覧できるようにする、非常にシンプルな画像ビューアーを実装しました。それらはインターネットからロードされ、UIImageViewオブジェクトを介してデバイスに表示されます。このようなもの：

UIImage *image = [[UIImage alloc] initWithData:imageData];
[img setImage:image];

imageDataはURLから画像のコンテンツをロードするために使用するNSDataのインスタンスであり、imgはUIImageViewインスタンスです。

それはすべてうまく機能しますが、新しい画像はトランジションなしで以前に表示されていたものを置き換えます。ユーザーエクスペリエンスを向上させるために優れたアニメーショントランジションを行う簡単な方法があるかどうか疑問に思いました。

これを行う方法はありますか？コードサンプルをいただければ幸いです。

iosobjective-cuiimageview
19
loady

私はちょうどあなたの投稿を調べていて、まったく同じ要件がありました。上記のすべてのソリューションの問題は、遷移のロジックをコントローラーに組み込む必要があることです。ある意味で、アプローチはモジュール式ではありません。代わりに、UIImageViewのこのサブクラスを作成しました。

TransitionImageView.hファイル：

#import <UIKit/UIKit.h>


@interface TransitionImageView : UIImageView 
{
    UIImageView *mOriginalImageViewContainerView;
    UIImageView *mIntermediateTransitionView;
}
@property (nonatomic, retain) UIImageView *originalImageViewContainerView;
@property (nonatomic, retain) UIImageView *intermediateTransitionView;

#pragma mark -
#pragma mark Animation methods
-(void)setImage:(UIImage *)inNewImage withTransitionAnimation:(BOOL)inAnimation;

@end

TransitionImageView.mファイル：

#import "TransitionImageView.h"

#define TRANSITION_DURATION 1.0

@implementation TransitionImageView
@synthesize intermediateTransitionView = mIntermediateTransitionView;
@synthesize originalImageViewContainerView = mOriginalImageViewContainerView;

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        // Initialization code
    }
    return self;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (void)dealloc 
{
    [self setOriginalImageViewContainerView:nil];
    [self setIntermediateTransitionView:nil];
    [super dealloc];
}

#pragma mark -
#pragma mark Animation methods
-(void)setImage:(UIImage *)inNewImage withTransitionAnimation:(BOOL)inAnimation
{
    if (!inAnimation)
    {
        [self setImage:inNewImage];
    }
    else
    {
        // Create a transparent imageView which will display the transition image.
        CGRect rectForNewView = [self frame];
        rectForNewView.Origin = CGPointZero;
        UIImageView *intermediateView = [[UIImageView alloc] initWithFrame:rectForNewView];
        [intermediateView setBackgroundColor:[UIColor clearColor]];
        [intermediateView setContentMode:[self contentMode]];
        [intermediateView setClipsToBounds:[self clipsToBounds]];
        [intermediateView setImage:inNewImage];

        // Create the image view which will contain original imageView's contents:
        UIImageView *originalView = [[UIImageView alloc] initWithFrame:rectForNewView];
        [originalView setBackgroundColor:[UIColor clearColor]];
        [originalView setContentMode:[self contentMode]];
        [originalView setClipsToBounds:[self clipsToBounds]];
        [originalView setImage:[self image]];

        // Remove image from the main imageView and add the originalView as subView to mainView:
        [self setImage:nil];
        [self addSubview:originalView];

        // Add the transparent imageView as subview whose dimensions are same as the view which holds it.
        [self addSubview:intermediateView];

        // Set alpha value to 0 initially:
        [intermediateView setAlpha:0.0];
        [originalView setAlpha:1.0];
        [self setIntermediateTransitionView:intermediateView];
        [self setOriginalImageViewContainerView:originalView];
        [intermediateView release];
        [originalView release];

        // Begin animations:
        [UIView beginAnimations:@"ImageViewTransitions" context:nil];
        [UIView setAnimationDuration:(double)TRANSITION_DURATION];
        [UIView setAnimationDelegate:self];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
        [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
        [[self intermediateTransitionView] setAlpha:1.0];
        [[self originalImageViewContainerView] setAlpha:0.0];
        [UIView commitAnimations];
    }
}

-(void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
{
    // Reset the alpha of the main imageView
    [self setAlpha:1.0];

    // Set the image to the main imageView:
    [self setImage:[[self intermediateTransitionView] image]];

    [[self intermediateTransitionView] removeFromSuperview];
    [self setIntermediateTransitionView:nil];

    [[self originalImageViewContainerView] removeFromSuperview];
    [self setOriginalImageViewContainerView:nil];
}

@end

UIImageViewの-setImageメソッドをオーバーライドして、私の-setImage:withTransitionAnimation:メソッドを呼び出すこともできます。このように行う場合は、メソッド[super setImage:]で[self setImage:]の代わりに-setImage:withTransitionAnimation:を呼び出すようにしてください。これにより、無限の再帰呼び出しが発生しなくなります。

-ラジ

13
Raj Pawan Gumdal
[UIView 
    animateWithDuration:0.2 
    delay:0 
    options:UIViewAnimationCurveEaseOut
    animations:^{
        self.view0.alpha = 0;
        self.view1.alpha = 1;
    }
    completion:^(BOOL finished){
        view0.hidden = YES;
    }
];
8
neoneye

答えを確認してください。私はあなたがこれを探していると思います：

imgvw.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"Your Image name as string"]]];
CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[imgvw.layer addAnimation:transition forKey:nil];
3
Manab Kumar Mal

秘訣は、2つのUIImageViewインスタンスを作成することです。 UIView + beginAnimationsと+ commitAnimationsの呼び出しの間でそれらを交換します。

3
Chris Lundie

説明されているものと何ら変わりはありませんが、コードでは、これらは利用可能なトランジションです。

typedef enum {
        UIViewAnimationTransitionNone,
        UIViewAnimationTransitionFlipFromLeft,
        UIViewAnimationTransitionFlipFromRight,
        UIViewAnimationTransitionCurlUp,
        UIViewAnimationTransitionCurlDown,
    } UIViewAnimationTransition;

コード（これをtouchesEndedのようなコールバックに入れます）：

CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];

[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:[self superview] cache:YES];

// -- These don't work on the simulator and the curl up will turn into a fade -- //
//[UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView:[self superview] cache:YES];
//[UIView setAnimationTransition: UIViewAnimationTransitionCurlDown forView:[self superview] cache:YES];

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:1.0];

// Below assumes you have two subviews that you're trying to transition between
[[self superview] exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
[UIView commitAnimations];
3
Rob

それを行うにはいくつかの方法があり、Ben ViewTransitionsが良い例であることに同意します。単純な全画面遷移を探している場合は、新しいユーティリティアプリケーションを起動して、RootViewController.mのtoggleViewメソッドを確認することを検討します。 UIViewAnimationTransitionFlipFromLeftとUIViewAnimationTransitionFlipFromRightをUIViewAnimationTransitionCurlUpとUIViewAnimationTransitionCurlDownに切り替えてみてください（これはデバイスでのみ機能します）。

1
Jamey McElveen

これが私がしたことです：フェード。同じUIImageとディメンションを持つ別のUIImageViewをtmpと呼びます。ベースUIImageViewのUIImageを置き換えます。次に、適切な画像をベースに配置します（まだtmpでカバーされています）。

次のステップは、-tmpのアルファをゼロに設定する-ベースの高さに基づいて、ベースのUIImageViewを新しいUIImageの正しい比率に引き伸ばすことです。

コードは次のとおりです。

    UIImage *img = [params objectAtIndex:0]; // the right image
UIImageView *view = [params objectAtIndex:1]; // the base

UIImageView *tmp = [[UIImageView alloc] initWithImage:view.image]; // the one which will use to fade
tmp.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);
[view addSubview:tmp];

view.image = img;
float r = img.size.width / img.size.height;
float h = view.frame.size.height;
float w = h * r;
float x = view.center.x - w/2;
float y = view.frame.Origin.y;

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];

tmp.alpha = 0;
view.frame = CGRectMake(x, y, w, h);

[UIView commitAnimations];

[tmp performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:1.5];
[tmp performSelector:@selector(release) withObject:nil afterDelay:2];
0
Keil