大家好， 【每周一练】已经正式开始，U妹将和要学习的小伙伴们一起进行交互动效设计、插画设计、2.5D插画设计、C4D、一些技法等方面的练习，想一起学习的小伙伴可以加入进来，我们一起学习！

往期教程是：请点击查看往期详情，今天，我们的主题是：制作iOS App Store 首页动效，先来看一下最终的效果图：

iOS App Store 首页动效

1、 操作步骤

第1步：打开protopie，这个交互效果是用protopie软件做的，软件下载地址：https://www.protopie.cn/download/

Protopie软件介绍：《交互动效原型设计其实并没有你想象的那么难》

第2步：点击新建Pie文件按钮，选择界面尺寸（iPhone 8-375x667@2x，默认尺寸也是这个）

第3步：在菜单栏，点击插入-图层-图片，插入所需要的图片素材，并将图片移动到相应的位置

第4步：先搞清楚交互原理：如果你是苹果手机，可打开你的APP store看看具体的效果是如何的，将导入的图片素材摆放如下

第5步：添加滚页容器层（容器层即为承载交互效果的图层），调整滚页容器层大小到如下图，然后将app01、02、03、04、05图层拖入滚页容器层，然后将容器层组置于底层

大家可以看看滚页容器层的具体属性：

我们先来看下预览：

第6步：我们也可以将交互效果，导出为MP4视频格式，也可以将交互效果上传到云端，分享链接给团队人员查看。

第7步：或者也可以在手机上查看交互效果，安装protopie player APP，扫码后即可在手机上预览交互效果

我们来看看导出的MP4视频预览效果：