Question

我正在创建一个带有默认图像的PFImageView。然后我在后台加载图像，当图像从服务器下载完成后立即显示，并替换占位符/默认图像。问题是从默认图像到下载图像的转换不是很愉快。有没有办法创建淡出默认值并淡入下载的动画？

这是我的代码。

// set the pfImageView into the webView
_pfImageView = [[PFImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%dpTall.jpg", [self.drink.glassId intValue]]]];
_pfImageView.frame = CGRectMake(244, 0, 76, 114);
[webView.scrollView addSubview:_pfImageView];

// create a query for finding images on Parse
PFQuery *query = [PFQuery queryWithClassName:@"Images"];
[query whereKey:@"drinkId" equalTo:[NSNumber numberWithInt:self.drink.primaryKey]];

    [query getFirstObjectInBackgroundWithBlock:^(PFObject *object, NSError *error) {

    if (!error) {
        PFFile *imageFile = [object objectForKey:@"image"];
        _pfImageView.file = imageFile;
        [_pfImageView loadInBackground];

    } else {
        NSLog(@"PFQuery Error:%@", [error localizedDescription]);
    }
}];

由于

Answer 1

我在PFImageView上有一个类别，每次出现图像时都会获得交叉渐变动画：

@implementation PFImageView (Utility)

// Add a fade animation to images
-(void) setImage:(UIImage *)image {
    if ([self.layer animationForKey:KEY_FADE_ANIMATION] == nil) {
        CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
        crossFade.duration = 0.6;
        crossFade.fromValue  = (__bridge id)(self.image.CGImage);
        crossFade.toValue = (__bridge id)(image.CGImage);
        crossFade.removedOnCompletion = NO;
        [self.layer addAnimation:crossFade forKey:KEY_FADE_ANIMATION];
    }

    [super setImage:image];
}

@end

您只需要一个占位符图像，这样动画就可以在第一时间出现。

Answer 2

在我看来，我认为放弃对PFImageView的依赖会更容易，只需使用普通的UIImageView并首先使用占位符设置它，就像你现在正在做的那样。然后在你的getFirstObjectInBackgroundWithBlock完成块中，从IF语句开始做类似的事情....

if(!error)
{
    PFFile *imageFile = [object objectForKey:@"image"];

    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        NSData *data = [imageFile getData];

        if(data)
        {
            dispatch_async( dispatch_get_main_queue(), ^{ 

                [UIView animateWithDuration:2.0 
                animations:^{ 
                    //imageView is your UIImageView you are trying to set/change
                    imageView.alpha = 0.0f;
                } 
                completion:^(BOOL finished){
                    [UIView animateWithDuration:2.0
                    animations:^{ 
                        imageView.image = [UIImage imageWithData:data];
                        imageView.alpha = 1.0f;
                    } 
                    completion:^(BOOL finished)
                    {
                    }];  
                }];//outside block
            });
        }
        else
        {
           //no data error handling here
        }                

    });
else
{
    //error handling here
}

披露：我不在编译器附近，所以我还没有运行此代码。

您也可以使用imageFile getdata方法调用带有完成块（在parse.com网站API上），然后将if（data）中的所有内容放在该块中，而不是使用外部dispatch_async。我做的异步块。我只是习惯这样做。

是否可以在PFImageView中为新加载的图像设置动画？与parse.com PFImageView相关

2 个答案: