iOS UI_22_html/css_WEB-ITnose のアニメーション

1. iOS で見ることができるコントロールは、UIButton、UILabel、UITextField、UIImageView など、すべて UIView のサブクラスです。

2. CALayer 図が内部で自動的に追加されるため、UIView を画面に表示できます。レイヤーが作成され、このレイヤーを介して画面に表示されると、画面に表示する前に描画を完了するためにdrawRect:メソッドが呼び出されます

3. CALayer自体には表示機能がありますが、応答することはできません。単にグラフィックを表示するだけの場合は、CALayer を使用して作成することも、UIView を使用して作成することもできます。ただし、このグラフィックがユーザー インタラクション イベントに応答する場合は、UIView またはサブクラスを使用する必要があります。アニメーション知識のブロック図は次のとおりです:

#import "ViewController.h"#import "UITextField+Shake.h"@interface ViewController ()@property (retain, nonatomic) IBOutlet UIImageView *balloon;@property (retain, nonatomic) IBOutlet UITextField *TF;@property (retain, nonatomic) IBOutlet UIButton *bounces;@property (retain, nonatomic) IBOutlet UIView *animationView;@property (retain, nonatomic) IBOutlet UIImageView *cloud;@end<span style="font-family: 'STHeiti Light';">@implementation ViewController</span>

- (void)viewDidLoad {    [super viewDidLoad];    //取到当前视图控制器自带view的图层    CALayer *layer = self.view.layer;//    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];//    button.layer //button的图层    //layer 的color必须是CGColor    self.animationView.layer.backgroundColor = [UIColor greenColor].CGColor;}

//TF のカテゴリを作成します:

UITextField+Shake.h#import <UIKit/UIKit.h>@interface UITextField (Shake)- (void)shake;@endUITextField+Shake.m#import "UITextField+Shake.h"@implementation UITextField (Shake)//震动的方法- (void)shake{    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];    keyFrame.values = @[@(self.center.x + 10),@(self.center.x),@(self.center.x - 10)];    keyFrame.repeatCount = 10;    keyFrame.duration = 0.03;    [self.layer addAnimation:keyFrame forKey:nil];  }@end

アニメーション開始ボタンクリックイベント

りー

/ /UIView の属性アニメーション アニメーション化可能な属性: フレームの中心境界、アルファ背景の色変換

//アニメーションの属性を変更します。アニメーションが終了すると、属性変更の結果は実際にアニメーション ビューに適用され、以前の状態に戻すことはできません

。

- (IBAction)handleAnimation:(UIButton *)sender {    //UIView的属性动画    [self handlePropertyAnimation];     //UIView的属性动画 Block形式    [self handlePrepertyAnimationBlock];       //UIView的过渡动画    [self handleTrabsitionAnimation];        //CALayer动画    [self handleCALayer];        //CALayer 的基础动画    [self handleBasicAnimation];    //CALayer的关键帧动画    [self handleKeyFrameAnimation];    //UITextField 调用输入震动框方法    [self.TF shake];        //CALayer的过渡动画    [self handleLayerCATransactionAnimation];    //CAAinmationGroup 分组动画    [self handleAnimatonGroup];    }

//ビューの前の状態に復元します

- (void)handlePropertyAnimation{    //iOS4.0之前必须把要修改的可动画属性写在begin 和 commit 之间    //开始动画    [UIView beginAnimations:nil context:nil];    //指定代理 动画的代理不需要遵循协议,因为此代理就没有制定协议    [UIView setAnimationDelegate:self];    //设置动画的持续时间    [UIView setAnimationDuration:3.0];    //设置动画的重复次数 给重复效果旋转效果立即消失    [UIView setAnimationRepeatCount:3.0];    //设置动画的反转效果    [UIView setAnimationRepeatAutoreverses:YES];    //设置动画的变化速度    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];    //如果要实现这个方法必须设置代理,此方法在动画结束后触发    [UIView setAnimationDidStopSelector:@selector(makeAnimationBack)];        //修改属性做动画    //1.center 修改中心点    CGPoint center = self.animationView.center;    center.y += 10;    self.animationView.center =center;    //2.修改透明度 alpha    self.animationView.alpha = 0.0;    //3.变形 tranform    //<#CGAffineTransform t#> 之前形变量    //旋转的角度180/4    self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4);        self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 0.5, 0.5);        //提交动画    [UIView commitAnimations];}

//UIView 遷移アニメーション

- (void)makeAnimationBack{    //        self.animationView.center = self.view.center;        self.animationView.alpha = 1.0;    //恢复到tranform最初状态,最初状态就在CGAffineTransformIdentity记录    self.animationView.transform = CGAffineTransformIdentity;    }//UIView的属性动画 Block形式- (void)handlePrepertyAnimationBlock{    //iOS4.0之后使用block的形式做动画            __block typeof(self)weakSelf = self;    //1.block 的第一种形式    //01.动画的持续时间//    [UIView animateWithDuration:2 animations:^{//        //1.修改中心点//        CGPoint center = weakSelf.animationView.center;//        center.y += 50;//        weakSelf.animationView.center = center;//        //2.透明度//        weakSelf.animationView.alpha = 0.0;//        //3.变形//        weakSelf.animationView.transform = CGAffineTransformRotate(weakSelf.animationView.transform, M_PI_4);//}];        //2.block的第二种形式    [UIView animateWithDuration:2 animations:^{        //1.获得中心点        CGPoint center = weakSelf.animationView.center;        //改变中心点        center.y += 50;        weakSelf.animationView.center =center;        //2.透明度        weakSelf.animationView.alpha = 0.0;        //3.形变修改transform        weakSelf.animationView.transform = CGAffineTransformScale(weakSelf.animationView.transform, 0.5, 0.2);                    } completion:^(BOOL finished) {        //返回动画之前的状态        [weakSelf makeAnimationBack];    }];        //3.block的第三种形式    //01:持续时间    //02:动画执行的延迟时间    //03:设置动画的特效    //04:修好的动画属性    //05:动画执行结束后的block块    [UIView animateWithDuration:3 delay:1 options:UIViewAnimationOptionAllowAnimatedContent animations:^{        //1.获得中心点        CGPoint center = weakSelf.animationView.center;        //改变中心点        center.y += 50;        weakSelf.animationView.center =center;        //2.透明度        weakSelf.animationView.alpha = 0.0;        //3.形变修改transform        weakSelf.animationView.transform = CGAffineTransformScale(weakSelf.animationView.transform, 0.5, 0.2);            } completion:^(BOOL finished) {         //返回动画之前的状态        [weakSelf makeAnimationBack];    }];        //block的第四种形式    //参数1:动画持续时间    //参数2:动画的延迟时间    //参数3:设置弹簧的强度 范围(0.0~1.0)    //参数4:设置弹簧的速度    //参数5:动画效果    //参数6:改变动画的属性写在这里    //参数7:结束动画的时候调用的block    [UIView animateWithDuration:2 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:500 options:UIViewAnimationOptionCurveEaseInOut animations:^{        CGPoint center = weakSelf.bounces.center;        center.y += 10;        weakSelf.bounces.center = center;        //transform        weakSelf.bounces.transform = CGAffineTransformScale(weakSelf.bounces.transform, 1.2, 1.2);    } completion:^(BOOL finished) {        CGPoint center = weakSelf.bounces.center;        center.y -= 10;        weakSelf.bounces.center = center;        weakSelf.bounces.transform = CGAffineTransformIdentity;            }];}

//CALayer アニメーション、アニメーション化するレイヤーのプロパティを変更することはできません本当にこのビューに影響を与えるアニメーションの知識は幻想です

- (void)handleTrabsitionAnimation{            __block typeof(self)weakSelf = self;    //01:对哪个视图添加过渡动画    //02:动画时常    //03:动画效果    [UIView transitionWithView:self.animationView duration:2 options:UIViewAnimationOptionAllowAnimatedContent animations:^{                weakSelf.animationView.transform = CGAffineTransformRotate(weakSelf.animationView.transform, M_PI_4);            } completion:nil];    }

// CALayer のアニメーション基本クラス: CAAnimation

//CABasicAnimation 基本アニメーション

- (void)handleCALayer{    //CALyer 动画就是对layer做动画    //边框的宽    self.animationView.layer.borderWidth = 10.0;    //边框颜色    self.animationView.layer.borderColor = [UIColor redColor].CGColor;    //切圆角//    self.animationView.layer.cornerRadius = 100;    //取出layer多余的部分//    self.animationView.layer.masksToBounds = YES;    //减掉layer多出的部分//    self.animationView.clipsToBounds = YES;    //背景图片    self.animationView.layer.contents = (id)[UIImage imageNamed:@"WDGJ785Q{`CKL4J}1{_4{(Y.jpg"].CGImage;            //视图一创建出来的时候  锚点 基准点  中心点三个点是重合的    //锚点 anchorPoint  决定layer层上的哪个点是position 锚点默认是(0.5,0.5),跟视图的中心点重合    self.animationView.layer.anchorPoint = CGPointMake(0.5, 0);    self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, M_PI_4);        //基准点 Position 决定当前视图的layer,在父视图的位置,它以父视图的坐标系为准    self.animationView.layer.position = CGPointMake(160, 184);}

//CAKeyFrameAnimation キーフレーム アニメーション

れーれー

//CATrans ition CALayer のトランジション アニメーション

- (void)handleBasicAnimation{    //CA动画是根据KVC的原理,就修改layer的属性,以达到做动画的效果    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position.x"];        basic.fromValue = @(-80);    basic.toValue = @(400);    //设置动画持续的时间    basic.duration = 5.0;    //设置动画重复的次数    basic.repeatCount = 1000;    [self.cloud.layer addAnimation:basic forKey:nil];}

//CAAinmationGroup グループ アニメーション

- (void)handleKeyFrameAnimation{    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];    CGPoint point1 = self.cloud.center;    CGPoint point2 = CGPointMake(160, 100);    CGPoint point3 = CGPointMake(270, self.cloud.center.y);        //把一组要播放的动画需求的数值,按顺序放到数组中,此时动画执行的效果,就会按照数组中数据的顺序发生变化;    //转化point结构体类型 转化成对象类型    NSValue *value1 = [NSValue valueWithCGPoint:point1];    NSValue *value2 = [NSValue valueWithCGPoint:point2];    NSValue *value3 = [NSValue valueWithCGPoint:point3];    keyFrame.repeatCount = 1000;    keyFrame.duration = 15.0;    keyFrame.values = @[value1,value2,value3,value1];    [self.cloud.layer addAnimation:keyFrame forKey:nil];}

最終効果:

著作権表示: この記事はブロガーによるオリジナル記事であり、許可なく複製することはできません。ブロガー。