美文网首页
UIView渐变动画

UIView渐变动画

作者: Z了个L | 来源:发表于2017-01-07 16:27 被阅读583次
    
    // ViewController.h
    #import <UIKit/UIKit.h>
    
    @interface ViewController : UIViewController
    
    
    @end
    
    
    // ViewController.m
    #import "ViewController.h"
    
    @interface ViewController ()
    
    @property (weak, nonatomic) IBOutlet UIView *redView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
        // 位移
    //    [self move];
        // 缩放
    //    [self scale];
        // 透明度
    //    [self alpha];
    //    [self move1];
        [self move2];
    }
    
    // 位移
    - (void)move {
    //    // 首尾式
    //    [UIView beginAnimations:nil context:nil];
    //    // 执行动画
    //    CGRect tempFrame = self.redView.frame;
    //    tempFrame.origin.y += 50;
    //    self.redView.frame = tempFrame;
    //    [UIView commitAnimations];
    
    //    // 回调式
    //    [UIView animateWithDuration:1.0 animations:^{
    //        // 执行动画
    //        CGRect tempFrame = self.redView.frame;
    //        tempFrame.origin.y += 50;
    //        self.redView.frame = tempFrame;
    //    }];
    
    //    // 花1秒的时间执行平移动画,执行完之后,1秒之后,
    //    // 花3秒的时间把视图背景色设置成蓝色
    //    [UIView animateWithDuration:1.0 animations:^{
    //        //执行动画
    //        CGRect tempFrame = self.redView.frame;
    //        tempFrame.origin.y += 50;
    //        self.redView.frame = tempFrame;
    //    } completion:^(BOOL finished) {
    //        if (finished) {
    //            [UIView animateWithDuration:3.0 animations:^{
    //                self.redView.backgroundColor = [UIColor blueColor];
    //            }];
    //        }
    //    }];
    
        /*
         UIViewAnimationOptionCurveEaseInOut  开始和结束比较慢,中间比较快
         UIViewAnimationOptionCurveEaseIn     开场比较慢,后面比较快
         UIViewAnimationOptionCurveEaseOut    开场正常,结尾比较慢
         UIViewAnimationOptionCurveLinear     线性----> 匀速
         */
        // 先延迟3秒,等待3秒,3秒之后,花0.5秒的时间执行平移动画,执行完之后
        // 在花3秒的时间把视图背景色设置成蓝色
        [UIView animateWithDuration:0.5 delay:3.0 options:UIViewAnimationOptionCurveLinear animations:^{
            //执行动画
            CGRect tempFrame = self.redView.frame;
            tempFrame.origin.y += 100;
            self.redView.frame = tempFrame;
        } completion:^(BOOL finished) {
            if (finished) {
                [UIView animateWithDuration:3.0 animations:^{
                    self.redView.backgroundColor = [UIColor blueColor];
                }];
            }
        }];
    }
    
    - (void)move1 {
        // 先延迟0秒,等待0秒,0秒之后,花0.5秒的时间执行平移动画,执行完之后
        // 在花0.5秒的时间把视图平移回去
        [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            // 执行动画
            self.redView.transform = CGAffineTransformMakeTranslation(0, 100);
    //        self.redView.transform = CGAffineTransformMakeRotation(-M_PI_4);
    //        self.redView.layer.transform = CATransform3DMakeScale(2.0, 2.0, 1);
    //        self.redView.transform = CGAffineTransformMakeScale(2.0, 2.0);
        } completion:^(BOOL finished) {
            if (finished) {
                // 清空形变
                [UIView animateWithDuration:0.5 animations:^{
                    self.redView.transform = CGAffineTransformIdentity;
                }];
            }
        }];
    }
    
    - (void)move2 {
        /*
         usingSpringWithDamping:        0.0f到1.0f,数值越小「弹簧」的振动效果越明显
         initialSpringVelocity:                 表示初始的速度,数值越大一开始移动越快
         */
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
    
            self.redView.transform = CGAffineTransformMakeTranslation(0, 100);
    
        } completion:^(BOOL finished) {
            if (finished) {
                // 清空形变
                [UIView animateWithDuration:0.5 animations:^{
                    self.redView.transform = CGAffineTransformIdentity;
                }];
            }
        }];
    }
    
    // 缩放
    - (void)scale {
        // 先延迟0秒,等待0秒,0秒之后,花0.5秒的时间执行缩放动画,执行完之后
        // 在花3秒的时间把视图背景色设置成蓝色
        [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            //执行动画
            CGRect tempFrame = self.redView.frame;
            tempFrame.size.width += 30;
            tempFrame.size.height += 30;
            self.redView.frame = tempFrame;
    
        } completion:^(BOOL finished) {
            if (finished) {
                [UIView animateWithDuration:3.0 animations:^{
                    self.redView.backgroundColor = [UIColor blueColor];
                }];
            }
    
        }];
    }
    
    // 透明度
    - (void)alpha {
        // 先延迟0秒,等待0秒,0秒之后,花1.0秒的时间执行透明度动画,执行完之后
        // 在花5.0秒的时间把视图设置成可见
        [UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            //执行动画
            self.redView.alpha = 0;
    
        } completion:^(BOOL finished) {
            if (finished) {
                [UIView animateWithDuration:5.0 animations:^{
                    self.redView.alpha = 1.0;
                }];
            }
        }];
    }
    
    @end
    
    
    

    参考链接

    效果动画

    相关文章

      网友评论

          本文标题:UIView渐变动画

          本文链接:https://www.haomeiwen.com/subject/ajufbttx.html