Красивые UIView анимации

2 comments
В IOS появились отличные инструменты - это анимации UIView. Это по факту Cocoa оболочка над CoreAnimation, но с упрощенным интерфейсом. Подробней об этом я писал.
Но в стандартном наборе очень маленький набор функций замедления/ускорения (easing functions), буду их просто называть easing функции.
Для тех кому не понятно, что это за функции немного поясню. Часто нужно, чтоб объект не двигался равномерно, а сначала двигался быстрее, потом замедлялся под конец анимации. Или наоборот. Более наглядно можно на это посмотреть вот тут http://easings.net. Еще их называют tween functions. А эппл это называет Animation Pacing.


Итак, какой набор ease функций есть у нас в стандартном наборе:

UIViewAnimationOptionCurveEaseInOut = 0 << 16, UIViewAnimationOptionCurveEaseIn = 1 << 16, UIViewAnimationOptionCurveEaseOut = 2 << 16, UIViewAnimationOptionCurveLinear = 3 << 16,

Передать их можно в качестве  UIAnimationProperties при анимации.
По факту это отсылка на встроенные CAMediaTimingFunction:

NSString * const kCAMediaTimingFunctionLinear;
NSString * const kCAMediaTimingFunctionEaseIn;
NSString * const kCAMediaTimingFunctionEaseOut;
NSString * const kCAMediaTimingFunctionEaseInEaseOut;
NSString * const kCAMediaTimingFunctionDefault;

Можно добавить свою с помощью функции [CAMediaTimingFunction functionWithControlPoints::::].
Вот тут есть онлайн редактор двух опорных точек для расчета нужной функции:
Как добавить более сложные функций? Самый прямой метод - это создать свою собственную CAMediaTimingFunction и использовать несколько для анимации. Саму анимацию сделать через CAKeyFrameAnimation в которой расчитать каждый шаг анимации. Что-то напободие вот такого:
self.view.layer.anchorPoint = CGPointMake(0.50, 1.0);
CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
bounceAnimation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.05],
[NSNumber numberWithFloat:1.08],
[NSNumber numberWithFloat:0.92],
[NSNumber numberWithFloat:1.0],
nil];
bounceAnimation.duration = 0.3;
[bounceAnimation setTimingFunctions:[NSArray arrayWithObjects:
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
nil]];
bounceAnimation.removedOnCompletion = NO;
[self.view.layer addAnimation:bounceAnimation forKey:@"bounce"];
view raw gistfile1.m hosted with ❤ by GitHub
Но есть более легкий способ. Готовая математика для большинства необходимых ease функций есть в AHEasing и более того, они реализовано с помощью C, которые вы можете использовать не только в Cocoa проектах.
И хорошая библиотека/категория UIView которая позволяет использовать эти функции как UIView анимацию.
Позволяет анимировать все анимируемые свойства UIView.
Вот пример использования:
[view setEasingFunction:ElasticEaseOut forKeyPath:@"center"];
// ........ some code
[UIView animateWithDuration:.6 animations:^{
view.center = CGPointMake(160, 415);
} completion:^(BOOL finished) {}];
view raw gistfile1.txt hosted with ❤ by GitHub
Достаточно просто и наглядно.
Вот даже видеодемонстрация возможностей:

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

2 комментария:


  1. Hey there! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having trouble finding one? Thanks a lot! facebook sign in

    ОтветитьУдалить