는 점차적으로 난 그냥 그래서 점차 감소하고 이미지의 모양을 증가한다 무엇을해야 위와 같이 이미지로있는 UIImageView를 CAShapeLayer의 WRT 반경

Question

을 줄이십시오.

위의 작업을하려면 분명히 반올림 된 CAShapeLayer를 만들고 마스크를 적용해야합니다. 반경을 변경하면 이미지 반경의 반경 만 표시됩니다.

내 문제는 애니메이션을 적용하여 애니메이션 형태로 표시하는 방법입니다. 키 프레임 애니메이션으로는 얻을 수없는 부분을 안내해주십시오.

다음은 wrt 반지름을 마스킹하기위한 코드입니다. 123.5 이미지의 내 최대 반경

// Set up the shape of the circle 
int rChange = 0; // Its doing proper masking while changing this value 
int radius = 123.5-rChange; 

CAShapeLayer *circle = [CAShapeLayer layer]; 
// Make a circular shape 
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0+rChange, 0+rChange, 2.0*radius, 2.0*radius) 
             cornerRadius:radius].CGPath; 

// Configure the apperence of the circle 
[circle setFillColor:[[UIColor blackColor] CGColor]];  
[[self.originalImageView layer] setMask:circle]; 
self.originalImageView.layer.masksToBounds = YES; 

및 애니메이션 다양한 반경 갈색 원을 표시 할 일은 원하는 모든, 나는 두 가지를 변경 제안하면 originalImageView는 myUIImageView

Answer 1

입니다 :

을

1. 이미지가 필요 없습니다. CAShapeLayer을 사용하고 fillColor을 갈색으로 설정하면됩니다.

2. 레이어 경로를 폭과 높이가 1 인 원으로 한 번 설정합니다. 그런 다음 CAShapeLayer의 transform을 사용하여 크기를 변경하십시오. transform에 애니메이션을 적용 할 수 있습니다.

예를 들어, 이와 같은 층 생성 :

CGRect bounds = self.view.bounds; 

circleLayer = [CAShapeLayer layer]; 
circleLayer.fillColor = [UIColor brownColor].CGColor; 

circleLayer.position = CGPointMake (CGRectGetMidX (경계) CGRectGetMidY (경계));

// Create a circle with 1-point width/height. 
circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 1, 1)].CGPath; 

// Use the layer transform to scale the circle up to the size of the view. 
[circleLayer setValue:@(bounds.size.width) forKeyPath:@"transform.scale"]; 

그럼 당신은 같은 크기를 변경할 수 있습니다 암시 적으로 (자동) 기본 매개 변수를 사용하여 크기 변화를 애니메이션합니다

[circleLayer setValue:@(newSize) forKeyPath:@"transform.scale"]; 

합니다. 다른 애니메이션 매개 변수를 사용하려면 변형을 명시 적으로 애니메이션으로 만들 수 있습니다.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; 
animation.fromValue = [circleLayer valueForKeyPath:@"transform.scale"]; 
animation.toValue = @(newSize); 
animation.duration = 3.0; 
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut]; 

// Important: change the actual layer property before installing the animation. 
[circleLayer setValue:animation.toValue forKeyPath:animation.keyPath]; 

// Now install the explicit animation, overriding the implicit animation. 
[circleLayer addAnimation:animation forKey:animation.keyPath];