ユーザーが画像のコレクションを閲覧できるようにする非常に単純な画像ビューアーを実装しました。それらはインターネットから読み込まれ、UIImageViewオブジェクトを介してデバイスに表示されます。このようなもの：
UIImage *image = [[UIImage alloc] initWithData:imageData];
[img setImage:image];
imageDataはNSData、URL から画像のコンテンツを読み込むために使用するインスタンスでimgあり、UIImageViewインスタンスです。
それはすべてうまくいきますが、新しい画像は以前に表示されていたものをトランジションなしで置き換えます.ユーザーエクスペリエンスを向上させるために、アニメーションのトランジションを適切に行う簡単な方法があるかどうか疑問に思っていました.
これを行う方法はありますか？コードサンプルは非常に高く評価されます。
私はちょうどあなたの投稿を見ていましたが、まったく同じ要件がありました. 上記のすべてのソリューションの問題は、遷移のロジックをコントローラーに組み込む必要があることです。その意味で、アプローチはモジュール化されていません。代わりに、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
-setImageUIImageViewのメソッドをオーバーライドして、私の-setImage:withTransitionAnimation:メソッドを呼び出すこともできます。このように行う場合は、メソッド内では[super setImage:]なく呼び出すようにして、無限再帰呼び出しにならないようにしてください。[self setImage:]-setImage:withTransitionAnimation:
-ラージ
[UIView
animateWithDuration:0.2
delay:0
options:UIViewAnimationCurveEaseOut
animations:^{
self.view0.alpha = 0;
self.view1.alpha = 1;
}
completion:^(BOOL finished){
view0.hidden = YES;
}
];
秘訣は、2つのUIImageViewインスタンスを作成することです。UIView+beginAnimationsと+commitAnimationsの呼び出しの間でそれらを交換します。
説明されているものと何も変わりませんが、コードでは、これらは利用可能なトランジションです:
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];
それにはいくつかの方法がありますが、Ben View Transitions が良い例であることに同意します。単純な全画面遷移を探している場合は、新しいユーティリティ アプリケーションを開始することを検討し、RootViewController.m. UIViewAnimationTransitionFlipFromLeftandUIViewAnimationTransitionFlipFromRightをUIViewAnimationTransitionCurlUpandに切り替えてみるとUIViewAnimationTransitionCurlDown、非常に優れたトランジション効果が得られます (これはデバイスでのみ機能します)。
これが私がやったことです：フェージング。同じUIImageとtmpという次元を持つ別のUIImageViewを配置しました。ベース 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];