用动画填充完整 UIImage 中 UIImageView 的百分比 [英] Fill percent of UIImageView from full UIImage with animation

问题描述

我有一个名为 bigBottle 的 UIImageView:

I have an UIImageView named bigBottle:

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

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

fullBootle.png is a bottle filled up to 100%.

我需要两个步骤:

1. 首先用百分比裁剪图像(假设填充 50%) - 也就是说，从底部填充到一半的瓶子).

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

1. First make a crop of image with percent (let`s say 50% fill ) - that is, a bottle filled up to half, from the bottom).

2. Animate bigBottle to creeate a filling effect from down of the bottle to 50% fill. My code is bellow:

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" );
}];

还有一种方法可以让这个装瓶动画更简单，更节省内存?我有几十个瓶子要随机填充百分比(假设瓶子 80 填充了 20%)并且没有模糊的结果图像?

It is another way to make this animation of filling the bottle more simple, and more memory efficient? I have dozens of bottles to fill random with percent (let`s say bottle80 is 20% filled up) and to not have blurred resulting images ?

推荐答案

这是我对您的问题的简单实现.创建一个新的 CALayer 子类并实现一个名为百分比的动态属性，然后将其动画化为，

Here is my simple implementation to your question. Create a new subclass of CALayer and implement a dynamic property called percent and then animate it as,

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

这篇关于用动画填充完整 UIImage 中 UIImageView 的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！