入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

这期主要应用了缓慢和轻快的智能动画效果

制作素材

1.将素材准备好对齐至药丸高度

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

制作音波组件

1.复制两个音波画框,对照第一个画框调整图形的高度

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

2.选中3个画框制作组件集,对三个画框均添加延迟1ms的触发交互

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

制作灵动岛组件

1.复制画框,将黑色背景缩放对齐高度至药丸位置

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效.png

2.将头像和音波组件缩小放入药丸屏,并增大头像的圆角变更为圆形

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

3.将其余素材缩小只药丸屏内,调整素材的位置,并将透明度修改为0

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

制作交互

1.向左侧画框添加单击-智能动画-缓慢-400ms

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

2.向右侧画框添加单击-智能动画-轻快-500ms

入门教程08-iPhone 14 Pro Dynamic lsland灵动岛动效

这样就制作好了

点击上方前往查看→查看视频教程


源文件地址:

https://www.figma.com/community/file/1151803728172810137



标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作