iOS 雷达扫描效果 实现

whiteMu

 关注

阅读 90

2023-05-23


1 rotationAnimation.removedOnCompletion = NO;
2 
3 rotationAnimation.fillMode = kCAFillModeForwards;


fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

下面来讲各个fillMode的意义 
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态 
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态 
kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态 

kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.


//用例1 scale 
 
  
transform"]; 
   
 
   
CATransform3DMakeScale(0.5, 0.5, 1.0);  
     //x,y,z放大缩小倍数
 
   

         NSValue *value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setToValue:value]; 
   
 
   

          
   
 
   

         transform = CATransform3DMakeScale(1.0, 1.0, 1.0); 
   
 
   

         value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setFromValue:value]; 
   
 
   
 
    
 
   
 //原路返回的动画一遍
 
   

         [theAnimation setDuration:1.0]; 
   
 
   

         [theAnimation setRepeatCount:2]; 
   
 
   

          
   
 
   

        [layer addAnimation:theAnimation forKey:nil]; 
   
 
  
 
   
 
  
 
   
 
  
//用例2 rotate 
 
  
 
     
  
 
  
CATransform3DMakeRotation(1.57, 1, 1, 0); 
     //1.57表示所转角度的弧度 = 90Pi/180 = 90*3.14/180
 
   

         NSValue *value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setToValue:value]; 
   
 
   

          
   
 
   

         transform = CATransform3DMakeRotation(0, 1, 1, 0); 
   
 
   

         value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setFromValue:value]; 
   
 
  

      ...... 
  
 
  
 
   
 
  
//用例3 scale+rotate+position
 
  

      CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@" 
    transform"]; 
   
 
   

         CATransform3D rotateTransform = CATransform3DMakeRotation(1.57, 0, 0, -1); 
   
 
   

         CATransform3D scaleTransform = CATransform3DMakeScale(5, 5, 5); 
   
 
   
CATransform3DMakeTranslation(0, 0, 0);  
    //位置移动
 
   
CATransform3DConcat(rotateTransform, scaleTransform); 
     //Concat就是combine的意思
 
   
//再combine一次把三个动作连起来
 
   

         
   
 
   

         [anim setFromValue:[NSValue valueWithCATransform3D: 
    CATransform3DIdentity]]; 
     //放在3D坐标系中最正的位置
 
   

         [anim setToValue:[NSValue valueWithCATransform3D:combinedTransform]]; 
   
 
   

         [anim setDuration:5.0f]; 
   
 
   

          
   
 
   
layer addAnimation:anim forKey:nil];
 
   

        
   
 
   
//如果没有这句，layer执行完动画又会返回最初的state


前几天做动画，使用到了CATransform3D ，由于没有学过计算机图形学，矩阵中m11--m44的各个含义都不清楚，经过几天研究总结如下：(供和我一样的菜鸟学习)



    1. 
          struct CATransform3D 
        
2. {
3. ;
4. ;
5. ;
6. ;
7. } 
         ;



    ps:

    • 整体比例变换时，也就是m11==m22时，若m33>1，图形整体缩小，若0<m33<1，图形整体放大，若m33<0,发生关于原点的对称等比变换。
    • 角度】和【ｍ21=－角度】的时候就是旋转效果了。两个角度值相同。
    • （）空的地方以后补充。
    • 还有，要想使用CATransform3D，必须在工程里导入QuartzCore.framework。然后在文件中

    #import <QuartzCore/CATransform3D.h>。


    iphone 透视效果（perspective）


    1. =  
         CATransform3DIdentity 
         ;
2. m34  
         =  
         0.0005 
         ;  
         // 透视效果
3. =  
         CATransform3DRotate 
         (transform 
         , 
         (M_PI 
         / 
         180 
         * 
         40 
         ) 
         ,  
         0 
         ,  
         1 
         ,  
         0 
         ) 
         ;
4. [piece. 
         layer  
         setTransform 
         :transform 
         ] 
         ;


    第二行一定要写在第三行的前面！自己理解！

    //
//  ViewController.m
//  test_scanAnimation_01
//
//  Created by admin on 1/13/16.
//  Copyright © 2016 jeffasd. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
{
    UIImageView *_bgImageView;
    UIImageView *_scanningImageView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];

    UIImage *bgImage = [UIImage imageNamed:@"zapya_connect_radar"];
    
    NSLog(@"the bgImage size is %@", NSStringFromCGSize(bgImage.size));
    
    _bgImageView = [UIImageView new];
//    _bgImageView.frame = CGRectMake(0, 200, self.view.frame.size.width, 300);
    _bgImageView.frame = CGRectMake(0, 200, bgImage.size.width, bgImage.size.height);
    
    _bgImageView.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:_bgImageView];
    
    _bgImageView.image = bgImage;
    

    
    UIImage *scanningImage = [UIImage imageNamed:@"zapya_connect_radar_scanning"];
    
    _scanningImageView = [UIImageView new];
    _scanningImageView.frame = _bgImageView.frame;
    
    _scanningImageView.image = scanningImage;
    
    
    [self.view addSubview:_scanningImageView];
    
    CABasicAnimation *scannigAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    
//    angle：旋转的弧度，所以要把角度转换成弧度：角度 * M_PI / 180。
    CATransform3D transform = CATransform3DMakeRotation(90*M_PI/180, 0, 0, 1);//顺时针旋转
    transform.m34 = 0.05;// 透视效果
//    transform.autoreverses = YES;
    
    NSValue *value = [NSValue valueWithCATransform3D:transform];
    [scannigAnimation setToValue:value];
    
    scannigAnimation.autoreverses = NO;//原路返回动画一遍
    scannigAnimation.duration = 2.0;
    scannigAnimation.repeatCount = HUGE_VALF;
    //basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大，起到循环动画的效果
    //    basicAnimation.removedOnCompletion=NO;//运行一次是否移除动画
    
    scannigAnimation.fillMode = kCAFillModeBackwards;
    
    scannigAnimation.cumulative = YES;
    
    scannigAnimation.removedOnCompletion = NO;
    
    scannigAnimation.delegate = self;
    
    [_scanningImageView.layer addAnimation:scannigAnimation forKey:nil];
    
    
    
    
}

#pragma mark - 动画代理方法
#pragma mark 动画开始
-(void)animationDidStart:(CAAnimation *)anim{
//    NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
//    NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通过前面的设置的key获得动画
    NSLog(@"%s", __func__);
}
#pragma mark 动画结束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//    NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
//    _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];
    NSLog(@"%s", __func__);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end



    //用例1 scale 
 
  
transform"]; 
   
 
   
CATransform3DMakeScale(0.5, 0.5, 1.0);  
     //x,y,z放大缩小倍数
 
   

         NSValue *value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setToValue:value]; 
   
 
   

          
   
 
   

         transform = CATransform3DMakeScale(1.0, 1.0, 1.0); 
   
 
   

         value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setFromValue:value]; 
   
 
   
 
    
 
   
 //原路返回的动画一遍
 
   

         [theAnimation setDuration:1.0]; 
   
 
   

         [theAnimation setRepeatCount:2]; 
   
 
   

          
   
 
   

        [layer addAnimation:theAnimation forKey:nil]; 
   
 
  
 
   
 
  
 
   
 
  
//用例2 rotate 
 
  
 
     
  
 
  
CATransform3DMakeRotation(1.57, 1, 1, 0); 
     //1.57表示所转角度的弧度 = 90Pi/180 = 90*3.14/180
 
   

         NSValue *value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setToValue:value]; 
   
 
   

          
   
 
   

         transform = CATransform3DMakeRotation(0, 1, 1, 0); 
   
 
   

         value = [NSValue valueWithCATransform3D:transform]; 
   
 
   

         [theAnimation setFromValue:value]; 
   
 
  

      ...... 
  
 
  
 
   
 
  
//用例3 scale+rotate+position
 
  

      CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@" 
    transform"]; 
   
 
   

         CATransform3D rotateTransform = CATransform3DMakeRotation(1.57, 0, 0, -1); 
   
 
   

         CATransform3D scaleTransform = CATransform3DMakeScale(5, 5, 5); 
   
 
   
CATransform3DMakeTranslation(0, 0, 0);  
    //位置移动
 
   
CATransform3DConcat(rotateTransform, scaleTransform); 
     //Concat就是combine的意思
 
   
//再combine一次把三个动作连起来
 
   

         
   
 
   

         [anim setFromValue:[NSValue valueWithCATransform3D: 
    CATransform3DIdentity]]; 
     //放在3D坐标系中最正的位置
 
   

         [anim setToValue:[NSValue valueWithCATransform3D:combinedTransform]]; 
   
 
   

         [anim setDuration:5.0f]; 
   
 
   

          
   
 
   
layer addAnimation:anim forKey:nil];
 
   

        
   
 
   
//如果没有这句，layer执行完动画又会返回最初的state


    前几天做动画，使用到了CATransform3D ，由于没有学过计算机图形学，矩阵中m11--m44的各个含义都不清楚，经过几天研究总结如下：(供和我一样的菜鸟学习)



    1. 
          struct CATransform3D 
        
2. {
3. ;
4. ;
5. ;
6. ;
7. } 
         ;



    ps:

    • 整体比例变换时，也就是m11==m22时，若m33>1，图形整体缩小，若0<m33<1，图形整体放大，若m33<0,发生关于原点的对称等比变换。
    • 角度】和【ｍ21=－角度】的时候就是旋转效果了。两个角度值相同。
    • （）空的地方以后补充。
    • 还有，要想使用CATransform3D，必须在工程里导入QuartzCore.framework。然后在文件中

    #import <QuartzCore/CATransform3D.h>。


    iphone 透视效果（perspective）


    1. =  
         CATransform3DIdentity 
         ;
2. m34  
         =  
         0.0005 
         ;  
         // 透视效果
3. =  
         CATransform3DRotate 
         (transform 
         , 
         (M_PI 
         / 
         180 
         * 
         40 
         ) 
         ,  
         0 
         ,  
         1 
         ,  
         0 
         ) 
         ;
4. [piece. 
         layer  
         setTransform 
         :transform 
         ] 
         ;



    第二行一定要写在第三行的前面！自己理解！

    //
//  ViewController.m
//  test_scanAnimation_01
//
//  Created by admin on 1/13/16.
//  Copyright © 2016 jeffasd. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
{
    UIImageView *_bgImageView;
    UIImageView *_scanningImageView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];

    UIImage *bgImage = [UIImage imageNamed:@"zapya_connect_radar"];
    
    NSLog(@"the bgImage size is %@", NSStringFromCGSize(bgImage.size));
    
    _bgImageView = [UIImageView new];
//    _bgImageView.frame = CGRectMake(0, 200, self.view.frame.size.width, 300);
    _bgImageView.frame = CGRectMake(0, 200, bgImage.size.width, bgImage.size.height);
    
    _bgImageView.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:_bgImageView];
    
    _bgImageView.image = bgImage;
    

    
    UIImage *scanningImage = [UIImage imageNamed:@"zapya_connect_radar_scanning"];
    
    _scanningImageView = [UIImageView new];
    _scanningImageView.frame = _bgImageView.frame;
    
    _scanningImageView.image = scanningImage;
    
    
    [self.view addSubview:_scanningImageView];
    
    CABasicAnimation *scannigAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    
//    angle：旋转的弧度，所以要把角度转换成弧度：角度 * M_PI / 180。
    CATransform3D transform = CATransform3DMakeRotation(90*M_PI/180, 0, 0, 1);//顺时针旋转
    transform.m34 = 0.05;// 透视效果
//    transform.autoreverses = YES;
    
    NSValue *value = [NSValue valueWithCATransform3D:transform];
    [scannigAnimation setToValue:value];
    
    scannigAnimation.autoreverses = NO;//原路返回动画一遍
    scannigAnimation.duration = 2.0;
    scannigAnimation.repeatCount = HUGE_VALF;
    //basicAnimation.repeatCount=HUGE_VALF;//设置重复次数,HUGE_VALF可看做无穷大，起到循环动画的效果
    //    basicAnimation.removedOnCompletion=NO;//运行一次是否移除动画
    
    scannigAnimation.fillMode = kCAFillModeBackwards;
    
    scannigAnimation.cumulative = YES;
    
    scannigAnimation.removedOnCompletion = NO;
    
    scannigAnimation.delegate = self;
    
    [_scanningImageView.layer addAnimation:scannigAnimation forKey:nil];
    
    
    
    
}

#pragma mark - 动画代理方法
#pragma mark 动画开始
-(void)animationDidStart:(CAAnimation *)anim{
//    NSLog(@"animation(%@) start.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
//    NSLog(@"%@",[_layer animationForKey:@"KCBasicAnimation_Translation"]);//通过前面的设置的key获得动画
    NSLog(@"%s", __func__);
}
#pragma mark 动画结束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//    NSLog(@"animation(%@) stop.\r_layer.frame=%@",anim,NSStringFromCGRect(_layer.frame));
//    _layer.position=[[anim valueForKey:@"KCBasicAnimationLocation"] CGPointValue];
    NSLog(@"%s", __func__);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end




    相关推荐

    Android实现雷达扫描效果

    奋斗De奶爸 86 0 0

    两个DIV实现雷达扫描效果

    Gaaidou 119 0 0

    CSS3雷达扫描效果

    棒锤_45f2 47 0 0

    CSS版的雷达扫描效果

    才德的女子 59 0 0

    【Android进阶】Flutter 雷达扫描效果、Flutter旋转扫描

    乐百川 58 0 0

    cesium 雷达扫描 （线行扩散效果）

    余寿 79 0 0

    arcgis for js 3.X绘制雷达扫描效果

    泠之屋 126 0 0

    css 雷达扫描图

    司马吹风 30 0 0

    Flutter-实现扫描线移动效果

    向上的萝卜白菜 25 0 0

    CSS 雷达监测效果

    幸福的无所谓 36 0 0

    精彩评论（0）

    0 0 举报