Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Как мне дополнительно анимировать изображение, которое находится на пути Безье

Автор вопроса: Wesley SmithОтветов: 2

Может быть, кто-то может указать мне в правильном направлении. Я попробовал Google, но действительно не знаю, как определить мой вопрос в поисковых терминах.

Я анимирую изображение вдоль UIBezierPath следующим образом:

UIBezierPath *trackPath = [UIBezierPath bezierPath];
[trackPath moveToPoint:P(8, 250)];
[trackPath addCurveToPoint:P(318, 250)
             controlPoint1:P(156, 86)
             controlPoint2:P(166, 412)];
[trackPath addCurveToPoint:P(652, 254)
             controlPoint1:P(488, 86)
             controlPoint2:P(512, 412)];
[trackPath addCurveToPoint:P(992, 254)
             controlPoint1:P(818, 96)
             controlPoint2:P(872, 412)];


CALayer *bee = [CALayer layer];
bee.bounds = CGRectMake(0, 0, 69, 71);
bee.position = P(160, 25);
bee.contents = (id)([UIImage imageNamed:@"bee3.png"].CGImage);
[self.view.layer addSublayer:bee];

Что я хочу сделать, так это анимировать само изображение, когда оно движется по пути. Я могу анимировать изображение, когда оно само b, следующим образом:

    NSArray *blueArray = [NSArray array];
    blueArray = [[NSArray alloc] initWithObjects:
                 [UIImage imageNamed:@"blue1.png"],
                 [UIImage imageNamed:@"blue2.png"], nil];

    blueFly.animationImages = blueArray;
    blueFly.animationDuration = 0.20;
    blueFly.animationRepeatCount = -1;
    [blueFly startAnimating];

Как я могу совместить эти два, так сказать?

Кроме того, я знаю, как нарисовать сам путь на экране следующим образом:

CAShapeLayer *beeline = [CAShapeLayer layer];
beeline.path = trackPath.CGPath;
beeline.strokeColor = [UIColor whiteColor].CGColor;
beeline.fillColor = [UIColor clearColor].CGColor;
beeline.lineWidth = 2.0;
beeline.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:6],   [NSNumber numberWithInt:2], nil];
[self.view.layer addSublayer:beeline];

Но как я могу нарисовать линию только за изображением, поскольку оно анимируется по пути?

xcodeiosobjective-ccore-animationbezier

Ответы

Ответ 1 · рейтинг 3 · Jan Christiansen

Вы можете использовать CAShapeLayer для отображения пути. Слой формы предоставляет два свойства strokeStart и strokeEnd, которые имеют значения между 0 и 1 и определяют видимую часть пути. Анимируя strokeEnd, вы можете создать впечатление, что путь "нарисован" на экране. См. http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer для примера анимации пера, рисующего линию.

Чтобы изменить изображение пчелы, вы можете просто добавить анимацию, которая изменит содержимое вашего слоя с пчелой. Например, чтобы изменить изображение пера в проекте CAShapeLayer выше, мы можем добавить следующий код в метод startAnimation.

CAKeyframeAnimation *imageAnimation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
imageAnimation.duration = 1.0;
imageAnimation.repeatCount = HUGE_VALF;
imageAnimation.calculationMode = kCAAnimationDiscrete;
imageAnimation.values = [NSArray arrayWithObjects:
  (id)[UIImage imageNamed:@"noun_project_347_1.png"].CGImage,
  (id)[UIImage imageNamed:@"noun_project_347_2.png"].CGImage,
  nil];
[self.penLayer addAnimation:imageAnimation forKey:@"contents"];

Это просто добавляет ключевую анимацию к свойству contents слоя, отображающего перо. Обратите внимание, что изображение "noun_project_347_1.png" не является частью проекта, поэтому вам придется добавить изображение, чтобы увидеть эффект. Я просто перевернул изображение, которое идет с проектом, по горизонтали. При установке calculationMode на kCAAnimationDiscrete анимация не интерполируется между двумя изображениями, а заменяет одно другим.

Ответ 2 · Paresh Navadiya

Пока вы можете получить точный путь, по которому вы хотите анимировать выравнивание изображения, вы можете сделать это с помощью Core Animation и CAKeyframeAnimation.

Обратитесь к инструкции -анимировать-одно-изображение-по-необычному-кривому-пути-в-моем-приложении-ipad).

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы