动画效果

Posted 2020-12-27 jianze

一、设置透明度

在ViewController.m中添加如下方法：

 

//渐变 alpha 0全透明 1不透明
- (void)test1{
　　//先将初始状态改为全透明
　　_redView.alpha = 1;

　　//使用block动画,Duration是动画持续时间
　　[UIView animateWithDuration:1 animations:^{
　　　　//具体属性的变化，就在这里做
　　　　self.redView.alpha = 0;//用self将self对象也拷贝到block区域，可访问redView

　　}];
}

 

 

二、平移

1.frame移动

//frame移动
- (void)test2{
    [UIView animateWithDuration:1 animations:^{
        //移动
        self.redView.center = CGPointMake(self.redView.center.x + 150, self.redView.center.y + 150);
    }];
}

2.transformTranslate平移（常用）

- (void)test{
    
    [UIView animateWithDuration:1 animations:^{
        //平移
　　　　　//只能执行一次，100为偏移值
        self.redView.transform = CGAffineTransformMakeTranslation(100, 100);
　　　　//可以执行多次
        self.redView.transform = CGAffineTransformTranslate(self.redView.transform, 100, 100);
        
    }];
    
}

 

三、缩放

1.frame缩放

- (void)test2{
    [UIView animateWithDuration:1 animations:^{
        //缩放
        self.redView.frame = self.redView.frame = CGRectMake(150, 200, 100*2, 100*2);

    }];
}

2.transformScale缩放（常用）

- (void)test{

    

    [UIView animateWithDuration:1 animations:^{        

        //缩放

　　　　//只能缩放一次，2是倍数

        self.redView.transform = CGAffineTransformMakeScale(2, 2);

　　　　//可缩放多次

        self.redView.transform = CGAffineTransformScale(self.redView.transform, 2, 2);

    }];

    

}

 

 

三、旋转

transformRotation

- (void)test{

    

    [UIView animateWithDuration:1 animations:^{

        //旋转

　　　　//旋转一次，参数以π为单位  M_PI  M_PI_2就是π/2

        self.redView.transform = CGAffineTransformMakeRotation(M_PI_2);

　　　　//可多次旋转

        self.redView.transform = CGAffineTransformRotate(self.redView.transform, M_PI_2);

        

    }];

    

}

 

 

四、动画设置（不常用）

- (void)test3{
    //开始动画设置
    [UIView beginAnimations:nil context:nil];
    //设置动画的时间
    [UIView setAnimationDuration:2];
    //设置代理
    //[UIView setAnimationDelegate:self];
    //动画效果的节奏为慢进慢出
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    //设置具体的动画
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.redView cache:NO];
    //要干什么
    self.redView.alpha = 0;
    //提交动画
    [UIView commitAnimations];
    
}

 

五、弹簧动画

 

//弹簧效果
//Damping:弹簧系数，0-1之间，越小弹得越厉害
//Velocity:弹簧初始速度，越大越快

- (void)test4{
    [UIView animateWithDuration:1 delay:NO usingSpringWithDamping:0.5 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
        self.redView.frame = CGRectMake(150, 200, 100, 100);
    } completion:nil];
}

 

 

六、定时器的使用

 

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //一直旋转效果 第一个参数为定时，在几秒内完成动画
    /*[NSTimer scheduledTimerWithTimeInterval:0.01 repeats:YES block:^(NSTimer * _Nonnull timer) {
        self.redView.transform = CGAffineTransformRotate(self.redView.transform, 2/180.0*M_PI);
    }];*/
    
    //心脏跳动效果
    [NSTimer scheduledTimerWithTimeInterval:1 repeats:YES block:^(NSTimer * _Nonnull timer) {
        [UIView animateWithDuration:0.2 animations:^{
            self.redView.transform = CGAffineTransformScale(self.redView.transform, 1.3, 1.3);
        } completion:^(BOOL finished) {
            self.redView.transform = CGAffineTransformScale(self.redView.transform, 1/1.3, 1/1.3);
            self.redView.transform = CGAffineTransformIdentity;
        }];
    }];
    
    
}

 

七、新浪微博弹簧动画