アニメーション効果：Animation_html/css_WEB-ITnose

最初に imageView を作成します

 self.imageView =[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tara4.jpg"]];    self.imageView.frame =CGRectMake(85, 400, 200, 200);    self.imageView.layer.cornerRadius =100;    self.imageView.layer.masksToBounds=YES;    [self.view addSubview:self.imageView];

いくつかのボタンのクリック メソッドを記述します

ボタンにクリック メソッドを記述し、クリックして効果をトリガーします

1. UIView によって提供されるアニメーション

(1).// 最初のものUIView によって提供されるアニメーション

 // Duration 动画的时间间隔(double类型)[UIView animateWithDuration:3 animations:^{   // 动画内容写在block里        self.imageView.frame =CGRectMake(100, 100, 100, 75);    }];使 imageView 移动到新的位置上,并且把size改为新的

(2) の 2 番目のタイプの UIView

は、imageView を新しい位置に移動し、サイズを新しいものに変更し、最後に元の位置

[UIView animateWithDuration:5 animations:^{         self.imageView.frame =CGRectMake(30, 100, 300, 225);        self.imageView.alpha =0;    } completion:^(BOOL finished) {        [UIView animateWithDuration:3 animations:^{        self.imageView.frame =CGRectMake(85, 400, 200, 150);            self.imageView.alpha =1;        }];    }];

(3) に戻します。 2 番目の UIView の 3 つのメソッド

を繰り返すことができます。 2 番目のパラメータ: 遅延、3 番目のパラメータ: アニメーションの種類

アニメーションの内容のみを繰り返します

[UIView animateWithDuration:5 delay:0.1 options:UIViewAnimationOptionRepeat animations:^{        self.imageView.frame =CGRectMake(30, 100, 300, 225);        self.imageView.alpha =0;    } completion:^(BOOL finished) {        [UIView animateWithDuration:3 animations:^{                    self.imageView.frame =CGRectMake(85, 400, 200, 150);                        self.imageView.alpha =1;                    }];    }];

(4) UIView 4 番目の震えるアニメーション

// 3 番目のパラメータ: 設定 値が小さいほど、振動が激しくなります

// 4 番目のパラメータ: 設定が大きいほど、画像の初速度が大きくなります

   [UIView animateWithDuration:5 delay:0.1 usingSpringWithDamping:0.1 initialSpringVelocity:10 options:UIViewAnimationOptionRepeat animations:^{        self.imageView.frame =CGRectMake(30, 100, 300, 225);        self.imageView.alpha =0;    } completion:^(BOOL finished) {        [UIView animateWithDuration:3 animations:^{                                self.imageView.frame =CGRectMake(85, 400, 200, 150);                                    self.imageView.alpha =1;                                }];    }];

2. 変換を通じてビューを操作します

(1)ビューを回転します

// 第二个参数:设置旋转的弧度 (π /4)    self.imageView.transform =CGAffineTransformRotate(self.imageView.transform, M_PI_4);

(2)。 ビューをスケーリングします

 self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);

// 2 番目の 3 つのパラメーター: ビューをオフセットします

    self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 50, 50);

3。レイヤー アニメーション

layer は主に、境界線や円弧などのコントロールの設定情報を表示する役割を果たします。私たちが目にする UIView のアニメーションには、さまざまな種類のレイヤー アニメーション

(1) もカプセル化されています。アニメーション

    CATransition *transition =[CATransition animation];设置动画种类 : cube (), rippleEffect (水波纹) suckEffect oglFlip transition.type =@"rippleEffect";   // 设置动画时长    [transition setDuration:3];    // 设置动画的重复次数    // NSIntegerMax 整数的最大值    [transition setRepeatCount:NSIntegerMax];//向imageView 上添加动画效果, 添加到imageView的layer上    [self.imageView.layer addAnimation:transition forKey:@"transistion"];

(2) の 2 番目のタイプのレイヤー アニメーション (ズームインおよびズームアウト)

CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform.scale"];    // 对layer动画设置需要kvc的方式赋值 ,就是需要通过给定一个key,再去设置    // 动画时长    [basic setDuration:3];    // 动画执行的次数    [basic setRepeatCount:NSIntegerMax];    // 这个动画设置的是一个缩放的效果,需要给一个开始的初始值    缩放的初始倍数    basic.fromValue =[NSNumber numberWithInt:1];    // 在设置一个结束的值   缩放的结束倍数    basic.toValue = [NSNumber numberWithInt:2];    // toValue 和fromvalue 需要一个id类型的对象(需要整数类型,0.5按0算)    //把动画添加到视图上    [self.imageView.layer addAnimation:basic forKey:@"basic"];

(3) を作成します。キーフレーム アニメーション

 CABasicAnimation *basic =[CABasicAnimation animationWithKeyPath:@"transform.rotation"];    // 设置角度    basic.fromValue =[NSNumber numberWithInt:0.0];    basic.toValue =[NSNumber numberWithFloat: -4 *M_PI_2];    // 设置动画时长    [basic setDuration:3];    // 次数    [basic setRepeatCount:NSIntegerMax];    [self.imageView.layer addAnimation:basic forKey:@"basic"];    // 是否回到原位    [basic setAutoreverses:YES];

。著作権に関する声明: この記事はブロガーによるオリジナルです。記事をブロガーの許可なく複製することはできません。