核心动画是一组非常强大的处理动画的API,简单的使用就能做出非常绚丽的动画效果。每当使用核心动画的时候都需要和UIVIew的动画来个对比,确定最合适的方案
- 核心动画的一切都是假象,并不会真正的改变图层的结构,当不需要和用户交互的时候,通常使用核心动画
- UIVIew的动画必须通过修改属性的真实值,才能做出想要的动画效果
贴一张核心动画的继承结构,虽然这张图到处可见
这里跳过简单的基本使用,直接上效果。
主要代码在这里:
主要思路就是动态的获取触摸点的位置用
UIBezierPath
给画出来,然后设置CAKeyframeAnimation
的path
是当前的路径,然后把动画添加到要作用的view
的layer
上。
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//移除上一个动画
[self.subviews.firstObject.layer removeAnimationForKey:@"DrawView"];
//获取触摸起始点的位置
CGPoint startPoint = [touches.anyObject locationInView:self];
self.path = [UIBezierPath bezierPath];
//设置起点
[self.path moveToPoint:startPoint];
}
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CGPoint touchPoint = [touches.anyObject locationInView:self];
[self.path addLineToPoint:touchPoint];
[self setNeedsDisplay];
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.path = self.path.CGPath;
animation.duration = 3;
animation.repeatCount = MAXFLOAT;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.subviews.firstObject.layer addAnimation:animation forKey:@"DrawView"];
}
- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self touchesCancelled:touches withEvent:event];
}
- (void)drawRect:(CGRect)rect{
[self.path stroke];
}
- (UIBezierPath *)path{
if (!_path) {
_path = [UIBezierPath bezierPath];
}
return _path;
}
下一个动画:
有没有感觉很熟悉,就是过年很火的支付宝抢福卡,点击当前福卡的转场效果,代码也是很简单
- (void)buttonClick{
static int i = 3;
[self.customButton setImage:[UIImage imageNamed:[NSString stringWithFormat:@"img0%d",i]] forState:UIControlStateNormal];
i = (i == 3)? 2:i + 1;
CATransition * animation = [CATransition animation];
animation.type = @"flip";
animation.subtype = kCATransitionFromLeft;
animation.duration = 1.0;
[self.customButton.layer addAnimation:animation forKey:nil];
}
最关键的就是animation
的type
设置动画的类型 subtype
是设置动画的方向。找了一下资料动画的类型type
有以下这些,效果不一一展示,
基本型:
kCATransitionFade 交叉淡化过渡
kCATransitionPush 新视图把旧视图推出去
kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionReveal 将旧视图移开,显示下面的新视图
用字符串表示的类型:
fade push moveIn reveal 和系统自带的四种一样
pageCurl 向上翻页效果
pageUnCurl 向下翻页效果
rippleEffect 水滴效果
suckEffect 收缩效果,如一块布被抽走
cube 立方体翻滚效果
alignedCube 立方体翻滚效果
flip 翻转效果
alignedFlip 翻转效果
oglFlip 翻转效果
rotate 旋转
cameraIrisHollowOpen 相机镜头打开效果
cameraIrisHollowClose 相机镜头关闭效果
cameraIris 相机镜头打开关闭效果