Demo2—动画制作

一.视图跟随手指滑动

1.初始化一个视图，这个视图为全局变量

@interface ViewController ()
@property (nonatomic, strong) UIView *redView;
@end

self.redView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 150)];

2.为这个视图添加颜色为红色

_redView.backgroundColor = [UIColor redColor];

3.把这个红色视图添加到主视图上

[self.view addSubview:_redView];

4.触摸开始，获取触摸事件时，系统在调用这个方法的时候就会将所有的触摸事件用参数的形式传递过来。
用touchesBegan函数：

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;

获取触摸事件：

UITouch *touch = [touches anyObject];

5.获取touch对象在当前界面上面的具体触摸点

CGPoint location = [touch locationInView:self.redView];

6.通过修改红色视图的中心点坐标使红色视图跟随手指滑动

self.redView = location;

7.手指开始滑动用touchesMoved函数，滑动过程中，touchesBegan函数会被多次调用

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self.redView];
    self.redView.center = location;
}

8.手指离开屏幕用touchesEnded函数：

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event;

成果：
在这里插入图片描述

二.UIView动画，实现平移旋转等动画

1.在Main.storyboard中先搭建界面
在这里插入图片描述
2.定义一个属性全局属性变量作为操作视图（或用拖拽方式）

@property (weak, nonatomic) IBOutlet UIView *pinkView;

3.关联按钮事件，按住Ctrl拖拽按钮->拖到ViewController.m文件中适当位置松手->输入标题
平移：

//1.使用frame
self.pinkView.frame = CGRectMake(_pinkView.frame.origin.x + 20, _pinkView.frame.origin.y, _pinkView.frame.size.width, _pinkView.frame.size.height);

//2.使用center属性
self.pinkView.center = CGPointMake(self.pinkView.center.x + 20, _pinkView.center.y);

//3.使用UIView属性 transform
self.pinkView.transform = CGAffineTransformMakeTranslation(20, 0);//只能做一次

self.pinkView.transform = CGAffineTransformTranslate(_pinkView.transform, 20, 0);//可做多次

//4.使用UIView动画
[UIView animateWithDuration:2 animations:^{
        self.pinkView.transform = CGAffineTransformTranslate(_pinkView.transform, 200, 0);
    }];

在这里插入图片描述
4.缩放（等比例）

//1.使用frame属性  
self.pinkView.frame = CGRectMake(_pinkView.frame.origin.x - 0.5 * _pinkView.frame.size.width, _pinkView.frame.origin.y - 0.5 * _pinkView.frame.size.height, 2 * _pinkView.frame.size.width, 2 * _pinkView.frame.size.height);

//2.使用transform属性
self.pinkView.transform = CGAffineTransformMakeScale(2, 2);//只能做一次

self.pinkView.transform = CGAffineTransformScale(_pinkView.transform, 2, 2);//可做多次

//3.使用UIView动画
[UIView animateWithDuration:0.5 animations:^{
        self.pinkView.transform = CGAffineTransformScale(_pinkView.transform, 0.7, 0.7);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.pinkView.transform = CGAffineTransformScale(_pinkView.transform, 10.0/7, 10.0/7);
        }];
    }];

在这里插入图片描述
5.旋转

//1.使用transform
self.pinkView.transform = CGAffineTransformMakeRotation(10.0/180 * M_PI);//只能做一次

self.pinkView.transform = CGAffineTransformRotate(_pinkView.transform, 10.0/180 * M_PI);//可做多次

//2.使用UIView
[UIView animateWithDuration:1 animations:^{
        self.pinkView.transform = CGAffineTransformRotate(_pinkView.transform, 180.0/180 * M_PI);

在这里插入图片描述
6.弹簧

//使用UIView动画
[UIView animateWithDuration:1
                          delay:0
         usingSpringWithDamping:1
          initialSpringVelocity:20
                        options:UIViewAnimationOptionCurveEaseIn animations:^{self->_pinkView.transform = CGAffineTransformMakeTranslation(0, -100);} completion:^(BOOL finished) {
                        }];

在这里插入图片描述
7.翻页

//开始动画
[UIView beginAnimations:nil context:nil];
//设置动画持续时间
[UIView setAnimationDuration:1];
//透明度
self.pinkView.alpha = 1;
//翻页效果
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:_pinkView cache:NO];
//提交动画
[UIView commitAnimations];

在这里插入图片描述

iOS篇—Demo2—动画制作

Demo2—动画制作

一.视图跟随手指滑动

二.UIView动画，实现平移旋转等动画

猜你喜欢