iOS核心动画CoreAnimation系统进阶(UIView和layer动画基础)
程序员文章站
2022-03-06 17:38:51
...
coreAnimation
coreAnimation的功能包括绘图和动画
UIView:界面的展示以及用户的交互
layer:真正绘制
UIView封装了calayer
动画三步骤:
1.初始化动画对象
2.修改动画属性值
3.将动画添加到layer上面
在核心动画中一共有两个图层:模型图层和显示图层
presentationLayer负责显示
presentationLayer演示层
@property (strong, nonatomic) IBOutlet UIView *redView;
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CGPoint p = [[touches anyObject] locationInView:_redView];
//presentationLayer
if (_redView.layer.presentationLayer == [_redView.layer hitTest:p]) {
NSLog(@"1");
}
//修改模型图层
_redView.frame = CGRectMake(50, 400, 100, 100);
CABasicAnimation * anim =[CABasicAnimation animation];
anim.keyPath = @"position.y";
// anim.toValue = @400;
anim.duration = 1;
anim.removedOnCompletion=NO; //完成是否移除
// anim.fillMode =kCAFillModeForwards;//保持最后的状态
// anim.delegate =self;
[_redView.layer addAnimation:anim forKey:nil];
}
#pragma -CAAnimationDelegate
-(void)animationDidStart:(CAAnimation *)anim{
NSLog(@"%@",NSStringFromCGRect(_redView.frame));
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
NSLog(@"%@",NSStringFromCGRect(_redView.frame));
NSLog(@"%@",NSStringFromCGRect(_redView.layer.presentationLayer.frame));
}
隐式动画
默认时间0.25s,它的动画效果并不突兀
@property(strong,nonatomic)CALayer *layer;
- (void)viewDidLoad {
[super viewDidLoad];
CALayer * layer =[CALayer layer];
layer.frame = CGRectMake(100, 100, 100, 100);
layer.backgroundColor =[UIColor greenColor].CGColor;
_layer = layer;
[self.view.layer addSublayer:layer];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
_layer.frame =CGRectMake(100, 400, 100, 100);
_layer.backgroundColor =[UIColor orangeColor].CGColor;
}
关键帧动画-抖动效果
CAKeyframeAnimation * anim =[CAKeyframeAnimation animation];
anim.keyPath aaa@qq.com"transform.rotation";
//动画平滑化-方式一
// anim.values aaa@qq.com[@angleToRadians(-3),@angleToRadians(3),@angleToRadians(-3)];
//方式二
anim.values aaa@qq.com[@angleToRadians(-3),@angleToRadians(3)];
anim.speed =2;//动画速度
// anim.duration = 1;//持续时间
anim.autoreverses =YES;//动画反转
anim.repeatCount = MAXFLOAT;//重复次数
[_image.layer addAnimation:anim forKey:nil];
关键帧动画-过山车动画
注意:在做view旋转时,它的frame和bound是不一致的
在iOS中,我们改变UIView中的frame,bound,conter分别对应改变layer中的frame,bound,position
anchorpoint是layer中的锚点,取的是单位坐标。默认的是在视图的中间位置(0.5,0.5)
//贝塞尔曲线:1.数据点(起点终点);2.控制点
UIBezierPath * path =[UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 400)];
[path addCurveToPoint:CGPointMake(400, 400) controlPoint1:CGPointMake(100, 100) controlPoint2:CGPointMake(200, 500)];
CAShapeLayer *shapeLayer =[CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor=nil;
shapeLayer.strokeColor =[UIColor purpleColor].CGColor;
[self.view.layer addSublayer:shapeLayer];
CALayer * carLayer =[CALayer layer];
carLayer.frame = CGRectMake(15, 400-18, 36, 36);
//寄宿图 contents属性
carLayer.contents =(id)([UIImage imageNamed:@"car"].CGImage);
carLayer.anchorPoint = CGPointMake(0.5, 0.8);//设置锚点,轮胎的位置
[self.view.layer addSublayer:carLayer];
CAKeyframeAnimation * anim =[CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.path = path.CGPath;
anim.duration = 4.0;
anim.rotationMode = kCAAnimationRotateAuto;//自动切换角度,车头的朝向
[carLayer addAnimation:anim forKey:nil];
效果
上一篇: 提高网站权重小技巧:长尾关键词要多
下一篇: 你知道百度临时权重吗?有什么用?
推荐阅读
-
iOS核心动画CoreAnimation系统进阶(转场动画&组动画)
-
iOS核心动画CoreAnimation系统进阶(自定义转场动画)
-
iOS核心动画CoreAnimation系统进阶(点赞经典动画 CAEmitterLayer 粒子动画详解)
-
iOS核心动画CoreAnimation系统进阶(仿QQ气泡拖拽效果)
-
iOS核心动画CoreAnimation系统进阶(2D物理引擎)
-
iOS核心动画CoreAnimation系统进阶(赛贝尔曲线-菜单侧滑动画拆分动画详解)
-
iOS核心动画CoreAnimation系统进阶(赛贝尔曲线绘制火柴人图形)
-
iOS核心动画CoreAnimation系统进阶(UIView和layer动画基础)
-
iOS核心动画CoreAnimation系统进阶(子图层:富文本+渐变+3D)