2つを作成するのではなく、1つのビューのUIImageViews
を単に変更するのimage
が理にかなっています。その場合、インスタントスイッチではなく、2つの画像間でフェード/クロスディゾルブを行う方法はありますか?
2つを作成するのではなく、1つのビューのUIImageViews
を単に変更するのimage
が理にかなっています。その場合、インスタントスイッチではなく、2つの画像間でフェード/クロスディゾルブを行う方法はありますか?
回答:
これを行う別の方法は、事前定義されたCAAnimationトランジションを使用することです。
CATransition *transition = [CATransition animation];
transition.duration = 0.25;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
transition.delegate = self;
[self.view.layer addAnimation:transition forKey:nil];
view1.hidden = YES;
view2.hidden = NO;
AppleのView Transitionsサンプルプロジェクトを参照してください:https : //developer.apple.com/library/content/samplecode/ViewTransitions/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007411
新しいブロックベースのUIKit animation
メソッドを使用すると、はるかに簡単になります。
次のコードがビューコントローラーにあり、クロスディゾルブするUIImageViewが、プロパティを介してアドレス可能なself.viewのサブビューでself.imageView
あるとします。
UIImage * toImage = [UIImage imageNamed:@"myname.png"];
[UIView transitionWithView:self.imageView
duration:5.0f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
self.imageView.image = toImage;
} completion:nil]
できました。
Swiftでそれを行うには、次のようになります。
let toImage = UIImage(named:"myname.png")
UIView.transitionWithView(self.imageView,
duration:5,
options: UIViewAnimationOptions.TransitionCrossDissolve,
animations: { self.imageView.image = toImage },
completion: nil)
スイフト3、4、5
let toImage = UIImage(named:"myname.png")
UIView.transition(with: self.imageView,
duration: 0.3,
options: .transitionCrossDissolve,
animations: {
self.imageView.image = toImage
},
completion: nil)
Swift 3.0.1の場合:
UIView.transition(with: self.imageView,
duration:0.5,
options: .transitionCrossDissolve,
animations: { self.imageView.image = newImage },
completion: nil)
リファレンス:https : //gist.github.com/licvido/bc22343cacfa3a8ccf88
はい、あなたが言うことは完全に正しいです、そしてそれはそれをする方法です。私はこのメソッドを作成し、常にこれを使用してイメージをフェードします。私CALayer
はこれに対処します。このためには、Core Animationをインポートする必要があります。
+ (void)fadeInLayer:(CALayer *)l
{
CABasicAnimation *fadeInAnimate = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeInAnimate.duration = 0.5;
fadeInAnimate.repeatCount = 1;
fadeInAnimate.autoreverses = NO;
fadeInAnimate.fromValue = [NSNumber numberWithFloat:0.0];
fadeInAnimate.toValue = [NSNumber numberWithFloat:1.0];
fadeInAnimate.removedOnCompletion = YES;
[l addAnimation:fadeInAnimate forKey:@"animateOpacity"];
return;
}
画像をフェードアウトするには、逆の操作を行うことができます。フェードアウトした後。スーパービューから削除するだけです(つまりUIImageView
)。[imageView removeFromSuperview]
。
次の例のように、フェードイン機能をサブクラスにパッケージ化して、それを共通のUIImageViewとして使用することもできます。
IMMFadeImageView *fiv=[[IMMFadeImageView alloc] initWithFrame:CGRectMake(10, 10, 50, 50)];
[self.view addSubview:fiv];
fiv.image=[UIImage imageNamed:@"initialImage.png"];
fiv.image=[UIImage imageNamed:@"fadeinImage.png"]; // fades in
可能な実装は次のとおりです。
注:setImage:
関数に実際にフェードインを実装する方法は変わる可能性があり、この質問に対する他の回答で説明されている他の優れた例の1つであるUIImageView
可能性があります。特定の状況で許容できないオーバーヘッドになる。
IMMFadeImageView.h:
#import <UIKit/UIKit.h>
@interface IMMFadeImageView : UIImageView
@property (nonatomic,assign) float fadeDuration;
@end
IMMFadeImageView.m:
#import "IMMFadeImageView.h"
@implementation IMMFadeImageView
@synthesize fadeDuration;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.fadeDuration=1;
}
return self;
}
-(void)setImage:(UIImage *)newImage{
if(!self.image||self.fadeDuration<=0){
super.image=newImage;
} else {
UIImageView *iv=[[UIImageView alloc] initWithFrame:self.bounds];
iv.contentMode=self.contentMode;
iv.image=super.image;
iv.alpha=1;
[self addSubview:iv];
super.image=newImage;
[UIView animateWithDuration:self.fadeDuration delay:0 options:UIViewAnimationCurveEaseInOut animations:^{
iv.alpha=0;
} completion:^(BOOL finished) {
[iv removeFromSuperview];
}];
}
}
上記のコードはいくつかの前提(XCodeプロジェクトでARCが有効になっていることを含む)に依存しており、概念の実証としてのみ意図されており、明確さと焦点のために、重要な無関係なコードを省略して関連性を維持しています。盲目的にコピーアンドペーストしないでください。
無期限に繰り返す移行が必要でした。これには試行錯誤がたくさんありましたが、最終的に探していた最終結果が得られました。これらは、UITableViewCellのUIImageViewに画像アニメーションを追加するためのコードスニペットです。
関連するコードは次のとおりです。
@interface SomeViewController ()
@property(nonatomic, strong) NSMutableArray *imagesArray;
@property(nonatomic, assign) NSInteger varietyImageAnimationIndex;
@property(nonatomic, assign) BOOL varietyImagesAnimated;
@end
@implementation SomeViewController
@synthesize imagesArray;
@synthesize varietyImageAnimationIndex;
@synthesize varietyImagesAnimated;
...
// NOTE: Initialize the array of images in perhaps viewDidLoad method.
-(void)animateImages
{
varietyImageAnimationIndex++;
[UIView transitionWithView:varietyImageView
duration:2.0f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
varietyImageView.image = [imagesArray objectAtIndex:varietyImageAnimationIndex % [imagesArray count]];
} completion:^(BOOL finished) {
[self animateImages];
}];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
...
[cell.imageView setImage:[imagesArray objectAtIndex:0]];
[self setVarietyImageView:cell.imageView];
if (! varietyImagesAnimated)
{
varietyImagesAnimated = YES;
[self animateImages];
}
...
return cell;
}
オプションをいじっUIView.transition()
て問題を解決した後.transitionCrossDissolve
(私は1つのUIImageView内で変化するイメージをアニメーション化しようとしていて、アニメーションなしで即座に遷移が発生しました)ビュー内で変化するプロパティをアニメーション化できるオプションを1つ追加するだけでよいことがわかりました(Swift 4.2):
UIView.transition(with: self.imageView,
duration: 1,
options: [.allowAnimatedContent, .transitionCrossDissolve],
animations: { self.imageView.image = newImage },
completion: nil)
さらに、imageViewにサブビューがある場合、それも再描画され、アニメーションが妨げられる可能性があります。たとえば、imageViewにぼかしのあるサブビューがあり、その場合、アニメーションが機能しません。したがって、ビューの階層を変更し、ぼかしを独自のビューに移動して、imageViewの上に配置しました。
highlightedImage
プロパティを使用することで、これをもう少し簡単にすることができます。以下はSwift 3の例です。まず、通常の画像と強調表示された画像の両方を設定します。
let imageView = UIImageView(image: UIImage(named: "image"), highlightedImage: UIImage(named: "highlightedImage"))
そして、アニメーション化したものを切り替えたい場合:
UIView.transition(with: imageView, duration: 0.3, options: .transitionCrossDissolve, animations: { self.imageView.isHighlighted = !self.imageView.isHighlighted}, completion: .none)