ios - 用动画填充完整 UIImage 的 UIImageView 百分比

Question

我有一个名为 bigBottle 的 UIImageView:

bigBottle.image =  [UIImage imageNamed:@"fullBootle.png"];

fullBootle.png 是一个装满 100% 的瓶子。

我需要两个步骤:

1. 首先用百分比裁剪图像(比如说 50% 填充)——也就是说，从底部往瓶子里装了一半。

2. 为 bigBottle 制作动画以创建从瓶子底部到 50% 填充的填充效果。我的代码如下:

   CGRect captureRect = CGRectMake(0,22,18,72);
   UIImage *captureImg;
   UIGraphicsBeginImageContext(captureRect.size);
   CGContextRef context = UIGraphicsGetCurrentContext();
   [self.bigBottle.layer renderInContext:context];
   captureImg = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   self.bigBottle.image = [UIImage imageWithCGImage:CGImageCreateWithImageInRect(captureImg.CGImage,
   captureRect)];
   CGRect captureRect1 = CGRectMake(0,37,18,72);
   self.bigBottle.frame=CGRectMake(45, 174,18,1);
   CGRect newFrameOfMyView1 = CGRectMake(45,129, 18, 45);
   [UIView animateWithDuration:3.0f
       animations:^{
           self.bigBottle.frame = newFrameOfMyView1;
       }
       completion:^(BOOL finished){
           NSLog( @"done bottle: 1" );
   }];
   

还有另一种方法可以让这个装满瓶子的动画更简单、内存效率更高吗？我有几十个瓶子随机填充百分比(假设 bottle80 是 20% 装满)并且没有模糊的结果图像？

Answer 1

这是我对你的问题的简单实现。创建一个新的 CALayer 子类并实现一个名为 percent 的动态属性，然后将其设置为动画，

ImageLayer.h

#import <QuartzCore/QuartzCore.h>

@interface ImageLayer : CALayer
  @property (nonatomic,assign )float percent;
  @property (nonatomic, strong) NSString *imageName;
@end

ImageLayer.m

#import "ImageLayer.h"

@implementation ImageLayer
@dynamic percent;


+ (BOOL)needsDisplayForKey:(NSString *)key{
  if([key isEqualToString:@"percent"]){
    return YES;
  }else
    return [super needsDisplayForKey:key];
}


- (void)drawInContext:(CGContextRef)ctx{
  UIGraphicsPushContext(ctx);
  UIImage *image = [UIImage imageNamed:@"Bottle.jpg"];
  [image drawInRect:self.bounds];
  float heightToBeCovered =  self.percent * CGRectGetHeight(self.bounds);
  float verticalYPosition = CGRectGetHeight(self.bounds) - heightToBeCovered;
  UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, verticalYPosition, CGRectGetWidth(self.bounds), heightToBeCovered )];
  [[UIColor blackColor] setFill];
  [path fill];
  UIGraphicsPopContext();
}

@end

ViewController.m

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
  ImageLayer *imageLayer = [ImageLayer layer];
  imageLayer.position = self.view.center;
  imageLayer.frame = self.view.bounds;
  [self.view.layer addSublayer:imageLayer];
  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"percent"];
  [animation setFromValue:@1];
  [animation setToValue:@0];

  [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
  [animation setDuration:10.0];
  [imageLayer addAnimation:animation forKey:@"imageAnimation"];


}

@end