Анимация для слоя в iOS

Question

Я замаскировал изображение с помощью BezierPath. Я хочу оживить изображение маски.

Мой код выглядит следующим образом:

UIBezierPath* bezierPath = [UIBezierPath bezierPath]; 
    [bezierPath moveToPoint: CGPointMake(84.95, 205.11)]; 
    [bezierPath addCurveToPoint: CGPointMake(122.89, 232.14) controlPoint1: CGPointMake(84.95, 205.11) controlPoint2: CGPointMake(110.81, 223.56)]; 
    [bezierPath addCurveToPoint: CGPointMake(124.33, 233.04) controlPoint1: CGPointMake(123.37, 232.46) controlPoint2: CGPointMake(123.85, 232.78)]; 
    [bezierPath closePath]; 

    CAShapeLayer *maskImage = [CAShapeLayer layer]; 
    maskImage.path = bezierPath.CGPath; 
    maskImage.fillColor = [[UIColor blackColor] CGColor]; 
    _myImageView.layer.mask = maskImage; 

    CAShapeLayer *border = [CAShapeLayer layer]; 
    border.path = bezierPath.CGPath; 
    border.strokeColor = [UIColor redColor].CGColor; 
    border.fillColor = [[UIColor clearColor] CGColor]; 
    border.lineWidth = 5; 
    [_myImageView.layer addSublayer:border]; 

Как я могу оживить это?

Спасибо

Answer 1

Используйте следующий фрагмент кода:

@property (nonatomic, retain) CAShapeLayer *animationLayer; 

- (IBAction)drawPattern:(id)sender{ 
[self setup]; 

[self.animationLayer removeAllAnimations]; 

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = @(0); 
pathAnimation.toValue = @(1); 
[self.animationLayer addAnimation:pathAnimation forKey:@"strokeEnd"]; 
} 

- (void)setup{ 
[self.animationLayer removeFromSuperlayer]; 
self.animationLayer = nil; 

UIBezierPath* bezierPath = [UIBezierPath bezierPath]; 
[bezierPath moveToPoint: CGPointMake(84.95, 205.11)]; 
[bezierPath addCurveToPoint: CGPointMake(122.89, 232.14) controlPoint1: CGPointMake(84.95, 205.11) controlPoint2: CGPointMake(110.81, 223.56)]; 
[bezierPath addCurveToPoint: CGPointMake(124.33, 233.04) controlPoint1: CGPointMake(123.37, 232.46) controlPoint2: CGPointMake(123.85, 232.78)]; 

CAShapeLayer *pathLayer = [CAShapeLayer layer]; 

// provide frame & bounds so that path can be drawn over that. 
pathLayer.frame = CGRectMake(35, 100, 250, 200); 
pathLayer.bounds = CGRectMake(35, 100, 250, 200); 
pathLayer.path = bezierPath.CGPath; 
pathLayer.strokeColor = [UIColor redColor].CGColor; 
pathLayer.fillColor = [[UIColor clearColor] CGColor]; 
pathLayer.lineWidth = 6.f; 
pathLayer.lineJoin = kCALineJoinRound; 

[self.view.layer addSublayer:pathLayer]; 
[self setAnimationLayer:pathLayer]; 
} 

Пожалуйста, дайте мне знать, если это работает для вас & и если что-нибудь еще идет вверх.

Answer 2

В конце кода попробовать менее одного

CAShapeLayer *pathLayer; 
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 

shapeLayer.path = [aPath CGPath]; 
shapeLayer.strokeColor = [[UIColor greenColor] CGColor]; 
shapeLayer.fillColor = nil; 
shapeLayer.lineWidth = 5.0f; 
shapeLayer.lineJoin = kCALineJoinBevel; 

[myImageView.layer addSublayer:shapeLayer]; 
pathLayer = shapeLayer; 
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 3.0; 
pathAnimation.fromValue = @(0.0f); 
pathAnimation.toValue = @(1.0f); 
[pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"]; 

Answer 3

Мы можем анимировать изображение с пути с помощью CABasicAnimation.

CABasicAnimation имеет положение, путь, трансформирование, непрозрачность, тень ......, которая включает в себя все ключевые пути ключевых слов, ключевые пути ключевых слоев, пути к ключевому слою CA-слоя, пути к ключевому слову текстового слоя, пути к ключевым слоям маски, пути к ключу UIView, эффект, и ключевые слова репликатора.

В соответствии с вашим вопросом для рисования мы можем использовать путь и strokeEnd.But, большинство из них готовят strokeEnd для доступа к свойствам стиля формы.

Таким образом, я считаю, что strokeEnd является лучшим для анимации изображения маски с помощью пути беззерцания.

Ниже я даю код для пути и инсульта. Кроме того, я различаю оба.

Если я использую animationWithKeyPath является path

Форма оказанной и animatable.It уточняет путь формы.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
animation.fromValue = @(0); 
animation.toValue = @(1); 
animation.duration = 6.0f; 
[maskImage addAnimation:animation forKey:@"animatePath"]; 

Путь представляет собой набор отдельных компонентов, таких как линии и дуги, которые могут быть сделаны, а также animated.It является фундаментальным понятием Quartz 2D.

В ниже коде я использую strokeEnd

Вообще, если мы хотим получить доступ к свойствам стиля формы мы можем использовать strokeEnd

Относительное расположение, в котором, чтобы остановить поглаживая путь и анимируемым.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
animation.fromValue = @(0); 
animation.toValue = @(1); 
animation.duration = 6.0f; 
[maskImage addAnimation:animation forKey:@"strokeEnd"]; 

Значение этого свойства должно быть в диапазоне от 0.0 до 1.0. Значение по умолчанию этого свойства равно 1.0.

Также strokeEnd определяет следующей вещь

Комбинированного со свойством strokeStart, это свойство определяет подобласть пути к инсульту. Значение этого свойства указывает относительную точку вдоль пути, по которой заканчивается поглаживание, в то время как свойство strokeStart определяет начальную точку.