iOS开发——UI进阶篇（十八）核心动画小例子，转盘（裁剪图片、自定义按钮、旋转）图片折叠、音量震动条、倒影、粒子效果

2022-01-31 00:54:17

一、转盘（裁剪图片、自定义按钮、旋转）

1、裁剪图片

将一张大图片裁剪为多张

// CGImageCreateWithImageInRect:用来裁剪图片

        // image:需要裁剪的图片

        // rect:裁剪图片的尺寸,传递是像素

        CGImageRef norImage = CGImageCreateWithImageInRect(norBigImage.CGImage, clipRect);

2、每次点击按钮立马变为选中状态，并且取消上次的按钮的选中状态

只要用个成员变量记录下状态就 ok

当然还要重写- (void)setHighlighted:(BOOL)highlighted

        // 点击按钮的时候调用

- (void)btnClick:(UIButton *)btn

{

    // 1.取消上一次按钮选中状态

    _selectedBtn.selected = NO;

    // 2.让当前按钮选中

    btn.selected = YES;

    // 3.记录当前选中的按钮

    _selectedBtn = btn;

}

3、自定义按钮

由于裁剪出来的照片太大，导致达不到理想效果，这时需要对图片做一些调整就可以自定义按钮

为什么要自定义按钮:因为我想要修改按钮的内部子控件的frame
以后只要想修改系统自带控件内部子控件的位置,第一反应就是自定义控件

#import "WheelButton.h"

@implementation WheelButton

// 想要修改按钮内部UIImageView

// contentRect:按钮的bounds

// 什么时候调用:每次使用按钮内部UIImageView的时候就会调用这个方法判断下尺寸

// 作用:设置按钮内部UIImageView的frame

- (CGRect)imageRectForContentRect:(CGRect)contentRect

{

    CGFloat imageW = ;

    CGFloat imageH = ;

    CGFloat imageX = (contentRect.size.width - imageW) * 0.5;

    CGFloat imageY = ;

    return CGRectMake(imageX, imageY, imageW, imageH);

}

// 设置按钮内部UILabel的frame

//- (CGRect)titleRectForContentRect:(CGRect)contentRect

// 重写按钮的高亮的方法

// 目的:取消高亮状态时候做的事情,比如:让按钮暂时达不到选中状态

- (void)setHighlighted:(BOOL)highlighted

{

//    [super setHighlighted:highlighted];

}

@end

4、旋转

// 点击开始选号的时候调用

- (IBAction)startPickerNum:(id)sender {

    // 快速的旋转,不需要与用户交互

    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.keyPath = @"transform.rotation";

    anim.toValue = @(M_PI *  * );

    anim.duration = 0.5;

    anim.delegate = self;

    [_centerView.layer addAnimation:anim forKey:nil];

}

由于用这种方式做出来的动画实际上位置并没有改变，呈现出来的只是一个假象而已，所以在点击按钮时，并不能准确的选中按钮
为了解决这个问题
添加一个定时器

@property (nonatomic, strong) CADisplayLink *link;

- (CADisplayLink *)link

{

    if (_link == nil) {

        _link = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeChange)];

        // 添加主运行循环

        [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

    }

    return _link;

}

// 1秒调用60次, 假设1秒转45° 45 / 60.0

- (void)timeChange

{

    _centerView.transform = CGAffineTransformRotate(_centerView.transform,  / 60.0 * M_PI / 180.0);

}

只要开启定时器那么转盘就在慢慢的转动（假设1秒转45°）

// 开始旋转按钮

- (void)startRotation

{

    // 需要与用户交互,真实旋转

    // 是否停止定时器旋转

    self.link.paused = NO;

}

// 暂停旋转按钮

- (void)pauseRotation

{

    self.link.paused = YES;

}

那么点击选号按钮时只要停止定时器旋转就可以

// 点击开始选号的时候调用

- (IBAction)startPickerNum:(id)sender {

    // 停止定时器旋转

    self.link.paused = YES;

    // 快速的旋转,不需要与用户交互

    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.keyPath = @"transform.rotation";

    anim.toValue = @(M_PI *  * );

    anim.duration = 0.5;

    anim.delegate = self;

    [_centerView.layer addAnimation:anim forKey:nil];

}

5、根据之前的旋转的形变计算之前旋转的弧度

实现CAAnimationDelegate方法（分类：非正式协议）

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

{

    // 恢复选中按钮之前位置

    // 旋转度数:之前选中按钮旋转了多少度就反向旋转多少度

    // 之前通过修改transform,之前的角度保存到按钮的transform属性里面

    CGAffineTransform transform = self.selectedBtn.transform;

    // 计算下之前旋转的弧度

    // 根据之前的旋转的形变计算之前旋转的弧度

    CGFloat angle = atan2(transform.b, transform.a);

    // 反向旋转整个centerView

    _centerView.transform = CGAffineTransformMakeRotation(-angle);

}

二、图片折叠

原理：

先设置两张图片，并且将空间的宽度和图片的宽度相等，高度等于图片的一半，使用下面的方法实现两张图片的快速合并

    // 设置要显示的内容的范围

    _topView.layer.contentsRect = CGRectMake(, , , 0.5);

    // 设置锚点使之移动

    _topView.layer.anchorPoint = CGPointMake(0.5, );

    // 设置下部分显示内容的范围

    _bottomView.layer.contentsRect = CGRectMake(, 0.5, , 0.5);
    // 设置锚点使之移动

    _bottomView.layer.anchorPoint = CGPointMake(0.5, );

从storyboard可以更直观的看到效果  将两张图片重合就可以达到想要的效果了


效果图：

1、添加阴影效果

// 阴影效果,添加到底部

    CAGradientLayer *layer = [CAGradientLayer layer];

    _layer = layer;

    layer.frame = _bottomView.bounds;

    // 设置渐变颜色

    layer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];

    layer.opacity = ;

//    // 设置渐变的方向

//    layer.startPoint = CGPointMake(0, 0);

//    layer.endPoint = CGPointMake(1, 0);

//

//    // 设置颜色渐变的开始位置

//    layer.locations = @[@0.5];

    [_bottomView.layer addSublayer:layer];

2、增加立体感

    CATransform3D transform = CATransform3DIdentity;

    // d:人的眼睛和屏幕的垂直距离

    CGFloat d = ;

    // 设置形变的m34就可以增加立体感,立体感(近大远小)

    transform.m34 = - / d;

    // 描述形变的旋转的度数

    transform = CATransform3DRotate(transform, angle, , , );

    // 开始旋转

    _topView.layer.transform = transform;

3、还原形变动画

    if (pan.state == UIGestureRecognizerStateEnded) {

        // 还原

        // Damping:值越小,弹簧效果越明显

        // options:描述动画执行过程,匀速,快入快出

        [UIView animateWithDuration: delay: usingSpringWithDamping:0.2 initialSpringVelocity: options:UIViewAnimationOptionCurveEaseInOut animations:^{

            _topView.layer.transform = CATransform3DIdentity;

        } completion:^(BOOL finished) {

        }];

        // 弹簧效果

        // 上部分形变清空

        // 阴影透明

        _layer.opacity = ;

    }

三、音量振动条

知识点：
复制层 CAReplicatorLayer

    // 复制层:复制里面的子层

    CAReplicatorLayer *repL = [CAReplicatorLayer layer];

    repL.frame = _contentView.bounds;

    // instanceCount:表示复制层中有多少份子层,拷贝是instanceCount - 1份

    repL.instanceCount = ;

    // 设置复制子层偏移量,每个子层都会相对上一次偏移

    repL.instanceTransform = CATransform3DMakeTranslation(, , );

    // 延迟每个子层的动画,相对于上一个子层延迟

    repL.instanceDelay = 0.2;

    // 设置子层的颜色

    repL.instanceColor = [UIColor colorWithWhite: alpha:0.8].CGColor;

    [_contentView.layer addSublayer:repL];

    // 红色的图层

    CALayer *layer = [CALayer layer];

    layer.backgroundColor = [UIColor redColor].CGColor;

//    layer.frame = CGRectMake(0, 100, 30, 100);

    layer.anchorPoint = CGPointMake(, );

    layer.position = CGPointMake(, );

    layer.bounds = CGRectMake(, , , );

    // 把红色图层添加到复制层中

    [repL addSublayer:layer];

    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.keyPath = @"transform.scale.y";

    anim.toValue = @;

    anim.duration = 0.5;

    // 设置动画反转

    anim.autoreverses = YES;

    anim.repeatCount = MAXFLOAT;

    [layer addAnimation:anim forKey:nil];

四、倒影

    CAReplicatorLayer *repL = (CAReplicatorLayer *)self.view.layer;

    repL.instanceCount = ;

    repL.instanceTransform = CATransform3DMakeRotation(M_PI, , , );

    // 倒影效果

    repL.instanceRedOffset -= 0.1;

    repL.instanceBlueOffset -= 0.1;

    repL.instanceGreenOffset -= 0.1;

    repL.instanceAlphaOffset -= 0.1;

但是要自定义view 设置view里面根层的类型为CAReplicatorLayer

// 设置view里面根层的类型

+ (Class)layerClass

{

    return [CAReplicatorLayer class];

}

五、粒子效果

注意点：
1、创建复制层
2、手动创建图层，将图层添加到复制层
3、创建帧动画，并给图层添加动画

#import "DrawView.h"

@interface DrawView ()

@property (nonatomic, strong) UIBezierPath *path;

@property (nonatomic, weak) CALayer *dotL;

@end

@implementation DrawView

- (void)awakeFromNib

{

    // 1、创建复制层

    CAReplicatorLayer *repL = [CAReplicatorLayer layer];

    repL.frame = self.bounds;

    repL.instanceCount = ;

    repL.instanceDelay = 0.3;

    [self.layer addSublayer:repL];

    // 2、手动创建图层

    CALayer *dotL = [CALayer layer];

    _dotL = dotL;

    dotL.backgroundColor = [UIColor redColor].CGColor;

    dotL.frame = CGRectMake(-, , , );

    dotL.cornerRadius = ;

    // 3、将图层添加到复制层

    [repL addSublayer:dotL];

     UIBezierPath *path = [UIBezierPath bezierPath];

    _path = path;

}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

    // 获取UITouch

    UITouch *touch = [touches anyObject];

    // 获取当前的触摸点

    CGPoint curP = [touch locationInView:self];

    [_path moveToPoint:curP];

}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

{

    // 获取UITouch

    UITouch *touch = [touches anyObject];

    // 获取当前的触摸点

    CGPoint curP = [touch locationInView:self];

    // 只是保存点路径

    [_path addLineToPoint:curP];

    // 重绘

    [self setNeedsDisplay];

}

- (void)drawRect:(CGRect)rect {

    // Drawing code

    [_path stroke];

}

// 开始动画的时候调用

- (void)startAnim

{

    // 创建帧动画

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.keyPath = @"position";

    anim.duration = ;

    anim.path = _path.CGPath;

    anim.repeatCount = MAXFLOAT;

    // 给图层添加动画

    [_dotL addAnimation:anim forKey:nil];

}

// 重绘

- (void)reDraw

{

    // 清除界面上的所有线,都是通过路径的点连接,移除路径中所有点

    [_path removeAllPoints];

    [self setNeedsDisplay];

    // 移除图层中所有动画

    [_dotL removeAllAnimations];

}

@end

码农公寓

相关文章