Основные анимации iOS, анимации ключевых кадров и реализация физического эффекта анимации с использованием функций сглаживания

iOS базовая анимация/ключевые кадры анимации/реализация физического эффекта анимации с помощью функций сглаживания

Сначала рассмотрим часть базовой анимации

Часть базовой анимации довольно проста, но и эффект анимации, который можно реализовать, также ограничен

Метод использования大致 таков:

#1. Создайте исходное UI или изображение

#2. Создание экземпляра CABasicAnimation и настройка keypart/duration/fromValue/toValue

#3. Установите конечное положение анимации

#4. Добавьте настроенную анимацию в слой layer

Рассмотрим пример, например, реализация движения круга от верха к низу, следующий код:

//Настройка исходного изображения
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //创建基本动画
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  //设置属性
  basicAnimation.keyPath = @"position";
  basicAnimation.duration = 4.0f;
  basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  //Установить конечную точку анимации
  showView.center = CGPointMake(50, 300);
  //Добавить анимацию к слою layer
  [showView.layer addAnimation:basicAnimation forKey:nil];

Давайте поговорим о анимации ключевых кадров

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

#1. Создайте исходное UI или изображение

#2. Создайте экземпляр CAKeyframeAnimation и установите keypart/duration/values, в отличие от базовой анимации, которая может устанавливать только начальную и конечную точки, ключевые кадры могут добавлять несколько точек траектории анимации

#3. Установите конечное положение анимации

#4. Добавьте настроенную анимацию в слой layer

Давайте приведем пример: красный круг колеблется вправо и влево и падает вниз, пример кода:

//Настройка исходного изображения
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Создать анимацию ключевых кадров
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Установить свойства анимации
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
  //Установить конечную точку анимации
  showView.center = CGPointMake(200, 200);
  //Добавить анимацию к слою layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

В конце используется функция сглаживания в сочетании с анимацией ключевых кадров для реализации более сложных физических анимаций

Сначала поговорим о том, что такое функция сглаживания, это когда кто-то создал библиотеку, которая может вычислить путь для имитации физического анимации (например, эффект пружины)

Адрес Github: https://github.com/YouXianMing/EasingAnimation

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

Пример кода:

//Настройка исходного изображения
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Создать анимацию ключевых кадров
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Установить свойства анимации
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
　　　　//Ключевые моменты, здесь используется функция сглаживания для расчета пути точки
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  //Установить конечную точку анимации
  showView.center = CGPointMake(50, 300);
  //Добавить анимацию к слою layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Спасибо за чтение, надеюсь, это поможет вам, спасибо за поддержку нашего сайта!