天天看點

iOS之UIView簡單動畫 知識點1 :UIView 相關動畫知識點2 : layer層動畫實作

/實作動畫,兩大部分可以實作:UIView 和Layer層

知識點1 :UIView 相關動畫

用法1:

   [UIView animateWithDuration:1 animations:^{    //這裡的 “ 1” 是表示執行時間為1秒

        //動畫對象的一些屬性發生變化

        //這裡寫對象變化的屬性

例如:

        變化位置 :self.myView.frame = CGRectMake(0,200, 375,200);

        變化顔色 :self.myView.backgroundColor = [UIColor greenColor];

    }];

用法2:

[UIView animateWithDuration:2 animations:^{   //這裡的 “ 2” 是表示執行時間為1秒

//先執行這裡面的語句

        self.myView.frame = CGRectMake(0,200, 375,200);

        self.myView.backgroundColor = [UIColor greenColor];

    } completion:^(BOOL finished) {

//等上面執行完動畫後,再執行這裡的語句

        self.myView.frame = CGRectMake(0,50, 375,200);

        self.myView.backgroundColor = [UIColor orangeColor];

    }];

用法3:

//optios: 枚舉,設定動畫效果,多個值之間用 | 隔開

    [UIViewanimateWithDuration:8delay:3 options:UIViewAnimationOptionAutoreverse |UIViewAnimationOptionRepeat

                     animations:^{    // 這裡的參數“8”表示執行一次動畫需要多少時間     後面那個參數“3”表示3秒後執行動畫

                         self.myView.frame =CGRectMake(137,100, 100,100);

                     } completion:^(BOOL finished) {

     }];

用法4:

//翻轉效果

[UIView transitionWithView:self.myView duration:2 options:UIViewAnimationOptionTransitionFlipFromTop animations:^{

        self.myView.frame = CGRectMake(0, 100, 135, 80);

    } completion:^(BOOL finished) {

        self.myView.backgroundColor = [UIColor purpleColor];

    }];

用法5:

//建立一個新View

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 100, 100)];

    //從一個View過度到另一個View

    [UIView transitionFromView:self.myView toView:view1 duration:2 options:UIViewAnimationOptionTransitionFlipFromTop completion:^(BOOL finished) {

        view1.backgroundColor = [UIColor blackColor];

    }];

用法6:

[UIView beginAnimations:@"ani" context:nil];

    //動畫效果的相關設定

    [UIView setAnimationDuration:3];  //動畫一次的時間

    [UIView setAnimationRepeatCount:5];  //動畫執行次數

    [UIView setAnimationRepeatAutoreverses:YES];

    //指定View的相關屬性

    self.myView.frame =  CGRectMake(0, 100, 100, 100);

    //送出動畫效果

    [UIView commitAnimations];

知識點2 : layer層動畫實作

用法1:

//将CAAnimation多個對象放入一個數組中,layer執行數組中的動畫

    //建立CAAnimation對象

    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];

    animation1.fromValue = [NSNumber numberWithInt:1];

    animation1.toValue = [NSNumber numberWithFloat:1.5];

    //旋轉

    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];  //旋轉

    animation2.fromValue = [NSNumber numberWithInt:0];

    animation2.toValue = [NSNumber numberWithInt:5];

    //移動

    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];  //移動

    animation3.fromValue = [NSNumber numberWithInt:0];

    animation3.toValue = [NSNumber numberWithInt:100];

    CAAnimationGroup *group = [CAAnimationGroup animation];

    //數組中添加CAAnimation對象

    group.animations = @[animation3,animation1,animation2];

    //動畫的設定以group的設定為準

    group.duration =3;

    [self.myView.layer addAnimation:group forKey:@"cc"];

用法2:

//過度效果

    CATransition *transtion = [CATransition animation];

    //設定過度類型

    transtion.type = @"cube";

    transtion.duration = 2;

    transtion.autoreverses =YES;

    transtion.repeatCount =5;

    //layer層添加動畫

    [self.myView.layer addAnimation:transtion forKey:@"ww"];

用法3:

CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //位置屬性

    //建立一個CGPath 結構體

    CGMutablePathRef path = CGPathCreateMutable();

    //設定初始位置

    CGPathMoveToPoint(path, NULL, self.redView.center.x, self.redView.center.y);

    //path添加經過的點坐标

    CGPathAddLineToPoint(path, NULL, 100, 350);

    CGPathAddLineToPoint(path, NULL, 300, 350);

    CGPathAddLineToPoint(path, NULL, 75, 225);

    //貝塞爾曲線

    CGPathAddCurveToPoint(path, NULL,self.redView.center.x, self.redView.center.y, 100, 350, 300, 350);

    //[NSThread sleepForTimeInterval:3];

    self.view.backgroundColor = [UIColor orangeColor];

    keyFrame.path = path;

    keyFrame.duration = 3;

    //keyFrame.repeatCount = NSIntegerMax;

    keyFrame.repeatCount = 1;

    [self.redView.layer addAnimation:keyFrame forKey:@"rrr"];

繼續閱讀