среда, 2 сентября 2015 г.

21. Анимация

Видео урок находится здесь.
В этом уроке рассматриваются функции применяющиеся для анимации UIView.

Этот метод имеет минимум входных параметров:

    [UIView animateWithDuration:5 animations:^{
        self.testView.center=CGPointMake(CGRectGetWidth(self.view.bounds)-CGRectGetWidth(self.testView.frame)/2, 150);

    }];

В animateWithDuration указывается время в секундах длительности анимации.
self.testView.center указывается центр куда будет анимировано перемещаться UIView.


Эта же функция с расширенным набором параметров:

    [UIView animateWithDuration:10
                          delay:1
                        options:UIViewAnimationOptionCurveEaseInOut |UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse
                     animations:^{
                            self.testView.center=CGPointMake(CGRectGetWidth(self.view.bounds)-CGRectGetWidth(self.testView.frame)/2, 150);
                         self.testView.backgroundColor=[self randomColor];
//                                                  self.testView.transform=CGAffineTransformMakeRotation(M_PI);
//                         self.testView.transform=CGAffineTransformMakeTranslation(800, 0);
                         
                         CGAffineTransform skale=CGAffineTransformMakeScale(2, 0.5);
                         CGAffineTransform rotation=CGAffineTransformMakeRotation(M_PI);
                         CGAffineTransform transform=CGAffineTransformConcat(skale, rotation);
                         self.testView.transform=transform;
                         
                     }
                     completion:^(BOOL finished) {
                         NSLog(@"Animation finished %@",@(finished));
                     }];

Указывается продолжительность анимации (перемещения с текущего положения в новое).
Задержка перед началом анимации.
Опции как будет двигаться UIView разгоняться, замедляться или без ускорения.
options:UIViewAnimationOptionCurveEaseInOut - замедление вначале и в конце.
UIViewAnimationOptionRepeat - повторение анимации.
UIViewAnimationOptionAutoreverse - возврат анимации на начальную позицию.
UIViewAnimationOptionBeginFromCurrentState - если начинается другая анимация, то продолжать с текущего положения.
в проперти transform задается матрица трансформации (вращения  CGAffineTransformMakeRotation и изменения размеров CGAffineTransformMakeScale).
CGAffineTransformConcat - складывает эти матрицы.

после completion можно записать код выполняемый после завершения анимации (или если её прервали (флаг finished).

Функция отмены анимации:
         [self.testView.layer removeAllAnimations];

Рассмотрен клас  UIImageView, он является наследником UIView, поэтому все методы к нему подходят.

   UIImageView *view=[[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    view.backgroundColor=[UIColor clearColor];
    UIImage *image1=[UIImage imageNamed:@"1.png"];
    UIImage *image2=[UIImage imageNamed:@"2.png"];
    UIImage *image3=[UIImage imageNamed:@"3.png"];
    NSArray * images=[NSArray arrayWithObjects:image1,image2,image1, image3, nil];
    view.animationImages=images;
   [view startAnimating];


Создается объект, в него вставляют массив с картинками UIImage и запускают смену картинок (анимацию). 

В итоге получилась занимательная анимация:

Домашнее задание к уроку 21 UIView Animation:

Ученик.
1. Создайте 4 вьюхи у левого края ипада.
2. Ваша задача всех передвинуть горизонтально по прямой за одно и тоже время
3. Для каждой вьюхи используйте свою интерполяцию (EasyInOut, EasyIn и т.д.). Это для того, чтобы вы увидели разницу своими собственными глазами :)
4. Добавте реверсивную анимацию и бесконечные повторения
5. добавьте смену цвета на рандомный

Студент

5. Добавьте еще четыре квадратные вьюхи по углам - красную, желтую, зеленую и синюю
6. За одинаковое время и при одинаковой интерполяции двигайте их всех случайно, либо по, либо против часовой стрелки в другой угол.
7. Когда анимация закончиться повторите все опять: выберите направление и передвиньте всех :)
8. Вьюха должна принимать в новом углу цвет той вьюхи, что была здесь до него ;)

Мастер

8. Нарисуйте несколько анимационных картинок человечка, который ходит.
9. Добавьте несколько человечков на эту композицию и заставьте их ходить 

Текст домашнего задания.

Выполнил домашнее задание Ученик и Студент.
Исходники домашнего задания здесь
Видео с домашним заданием 21 ученик и Студент:





Комментариев нет:

Отправить комментарий