美文网首页
5.启动页展开动画

5.启动页展开动画

作者: LucXion | 来源:发表于2021-06-16 17:40 被阅读0次

关键帧动画 CAKeyframeAnimation

相当于FLASH里的关键帧动画,给出动画的起始状态和结束状态两个关键帧,中间的过程只需要设置一个补间,剩下的事情软件自动完成

  • keyPath指定动画类型
  • values的个数 = 关键帧个数
  • keyTimes对应的时间点

当你给⼀个 CALayer 添加动画的时候,动画其实并没有改变这个 layer 的实际属性。取⽽代之的,系统会创建⼀个原始 layer 的拷贝。在⽂档中,苹果称这个原始 layerModel Layer ,⽽这个复制的 layer则被称为 Presentation LayerPresentation Layer 的属性会随着动画的进度实时改变,⽽ Model Layer 中对应的属性则并不会改变。所以如果你想要获取动画中每个时刻的状态,请使⽤ layer 的 func presentationLayer() -> AnyObject!

默认情况下系统会在 duration 时间后⾃动移除这个 CAKeyframeAni�mation。 当 remove 了某个动画,那么系统就会⾃动销毁这个 layerPresentation Layer ,只留下 Model Layer 。 ⽽前⾯提到Model Layer 的属性其实并没有变化,所以也就有了你前⾯看到的结果,视图在⼀瞬间回到了动画的初始状态。要解决这种情况,你需要先把 removedOnCompletion 设置为 false ,然后设 置 fillMode 为kCAFillModeForwards

动画执行页面与启动页的无缝衔接

修改keywindow的颜色,给keywindow的NavVc.view设置遮罩,同时在NavVc和HomeVc之间设置一个View隔板,避免HomeVc内容透过遮罩

  • keywindow,项目架构在iOS13后在SceneDelegate中获取
  • view.layer.mask遮罩:只展示遮罩部分内容,其他部分会展示view后面的视图,给HomeVc的View添加遮罩,就会展示keywindow颜色
// 关键帧动画代码
CAKeyframeAnimation *logoMaskAnimaiton = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];
    logoMaskAnimaiton.duration = 1.0f;
    logoMaskAnimaiton.beginTime = CACurrentMediaTime() + 1.0f;//延迟一秒

    CGRect initalBounds = maskLayer.bounds;
    CGRect secondBounds = CGRectMake(0, 0, 50, 50);
    CGRect finalBounds  = CGRectMake(0, 0, 2000, 2000);
    logoMaskAnimaiton.values = @[[NSValue valueWithCGRect:initalBounds],[NSValue valueWithCGRect:secondBounds],[NSValue valueWithCGRect:finalBounds]];
    logoMaskAnimaiton.keyTimes = @[@(0),@(0.5),@(1)];
    logoMaskAnimaiton.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
    logoMaskAnimaiton.removedOnCompletion = NO;
    logoMaskAnimaiton.fillMode = kCAFillModeForwards;
    [navc.view.layer.mask addAnimation:logoMaskAnimaiton forKey:@"logoMaskAnimaiton"];

// 最后移除蒙版,设置遮罩mask = nil

一个好动画,离不开一堆好参数

相关文章

网友评论

      本文标题:5.启动页展开动画

      本文链接:https://www.haomeiwen.com/subject/jydfyltx.html