注册

iOS swiftUI 视图动画和转场 1.1

第二节 把视图的状态改态转化成动画效果

已经学会了给单个视图添加动画的方法,现在可以学习怎么在视图的状态发生改变时添加动画效果。当用户点击按钮时会切换showDetail状态的值,在视图变化过程中添加动画效果。

state change

步骤1 把showDetail.toggle()包裹在withAnimation函数调用块中。showDetail的改变影响了视图HikeDetail和详情切换按钮,在显示/隐藏详情的过程中都有了过滤动画效果。

with_animation block

放慢动画速度,可以观察SwiftUI动画在被中断下是怎么运作的

步骤2 给withAnimation传入一个时长4秒的基本动画参数.easeInOut(duration:4),可以指定动画过程时长,给withAnimation传入的动画参数与.animation(_:)修改器可用参数一致。

with animation duration block

步骤3 在动画过程进行中点击按钮切换视图状态,查看对应的动画被中断时的效果

with animation interrupt

步骤4 读下一节之前,把动画时长参数(.easeInOut(duration: 4))去掉,让动画不再缓慢进行。

第三节 定制视图转场动画

默值情况下,视图离屏和入屏时的动画效果是渐隐/渐现, 这个默认的转场效果可以使用transition(_:)修改器进行定制。

transitions

步骤1 给HikeView视图添加transition(_:)修改器,并定制转场参数为.slide,转场动画为滑入/滑出

transition slide

步骤2 可以把滑入/滑出这种转场动画封装起来,方便其它视图复用同样的转场效果

custom transition effect

步骤3 在moveAndFade转场效果的定义中使用move(edge:),让滑入/滑出从屏幕的同一边进行

move and fade custom

步骤4 使用asymmetric(insertion:removal:)修改器来定制视图显示/消失时的转场动画效果

custom move and fade slide scale

第四节 组合复杂的动画效果

点击图表下面的三个按钮,会在三个不同的数据集间进行切换并展示。本节中会使用组合动画,让图表在不同数据集间切换时的转换动画流畅自然。

combine animation

步骤1 把showDetail的默认值改为true,并把HikeView的预览模式视图固定在画布上。这样可以在编辑其它文件时,依然看到动画效果的变化。

pin canvas

步骤2 在HikeGraph.swift中定义了一个新的波动动画,并把它与滑入/滑出动画一起应用到图表视图上。

hike graph ripple

步骤3 把动画切换为弹簧动画(spring),并设置弹簧阻尼系数为0.5,动画过程中产生了逐渐回弹效果

spring animation

步骤4 加速弹簧动画的执行速度,缩短切换图表的时间

spring animation speed

步骤5 以当条形在图表中的位置为参数,添加延迟效果,图表中的每个条形会顺序动起来

spring animation index based delay

步骤6 观察一下自定义波动(rippling)效果是怎么作用在视图转场中的

检查是否理解

问题1 怎样从一串动画效果调用中,去掉其中的一种动画效果。以下面的代码为例,怎样去掉旋转动画

problem 1

  • a1
  • a2
  • a3

问题2 当你开发动画的过程上,为什么要把预览视图固定在画布上?

  •  为了固定动画过程中的当前帧
  •  为了在多个设备配置开发中预览动画效果
  •  为了在切换到其它不同文件时,固定显示当前视图的预览

问题3 在视图状态改变时,如何快速测试一个动画在被中断时的表现

  •  在包含animation(_:)修改器的代码行上打一个断点,然后单步按动画帧进行测试
  •  调整动画的持续时长,让动画在足够长的时间内完成,这样就可以调整动画的细节
  •  重复的调用sleep(100)来减慢动画的执行

0 个评论

要回复文章请先登录注册