参加墨刀新动态公测活动，不才得了二等奖，受官方邀请，分享作品制作教程！本人文字叙述能力不强，第一次写教程，请多包涵~
最终效果图预览
本作品是电影海报预览切换效果，页面分为：展示页与详情页。
丨那么，下面正式开始
一、构图
1、首先在大脑中或者草稿本上构想整个项目的流程及交互方式。
（为了配图，随便画了一个）
2、因为是做的高保真图，所以需要先用PS将海报图与背景图处理一下。
3、分别将需要用的素材切图，导出来备用
二、创建应用
1、创建一个375*667 苹果6尺寸的项目
三、布局
1、将海报图片以及背景调整好位置，建议拉好标尺线固定，可以很好的辅助快捷布局
2、输入好电影介绍以及评分图标
3、先将电影介绍文案做好动效
（为什么要先做文案介绍的动效？因为文案会做一个整体的上滑效果，如果每个页面都重新做一次太麻烦！先做好，直接复制粘贴过去，再修改文案就行了！）
1）星星评分效果
5个星全部设置为：逐渐放大效果，分别设置延迟为：100ms、200ms、300ms、500ms、500ms，然后组合。
2）文字效果
全选择文字，全部设置为：渐现效果，延迟200ms，时长：1s。
3）电影文案介绍做整体效果
将文案与五颗星组合，设置为：下滑入效果，时长：1s。
四、制作页面切换
1、将每个电影展示页面调整好
（想要实现切换效果，其实就是不同的页面状态下的预览。）
首先，将每个电影海报，背景图，文案介绍，调整好。记住好海报的两个尺寸，前面大图为：268*377，侧边小图为：227*320。调整每页海报大小时，直接输入尺寸，再移动到预定地方。
（ps：也许有人会问，为什么不直接替换图片？因为我们要做连贯式切换效果，如果直接替换的话，就没神器移动的动态效果了！）
2、设置海报出场效果以及元件事件
1）将《我和我的祖国》大海报设置为：跳动效果，时长：1s；
2）将《攀登者》海报设置：单击事件，跳转至下一页面状态，动效：神奇移动效果，时长400ms；
3）将全局事件设置为：左滑，跳转至下一页面状态，动效：神奇移动效果，时长400ms；
4）将全局事件设置为：右滑，跳转至上一页面状态，动效：神奇移动效果，时长400ms。（首页没有上一页面，固不设置。尾页没有下一页面，固不设置）
5）按照上1-4，将所有页面状态设置一遍。
3、设置完后预览效果
五、详情介绍页
1、复制一个对应页面，进行修改，保留大图海报和背景图，删除其他不要的元件。
（保留大图海报是做神奇移动效果动效，如果另外重新添加一张，将没有这个移动效果）
2、演员人员设置
这里做一了个可以左右滑动的效果，使用动态组件制作。
3、设置页面切换效果
1）将《我和我的祖国》页面的大海报，做单击事件，跳转至《我和我的祖国-点击》页面，动效为：神奇移动效果，时长：400ms；
2）将《我和我的祖国》将全局事件设置为：上滑，跳转至《我和我的祖国-点击》页面，动效：神奇移动效果，时长400ms；
3）将《我和我的祖国-点击》页面，将海报与取消按钮，做单击事件，跳转至《我和我的祖国》页面，动效为：无。（为什么不设置神奇效果，哈哈~ 因为文案消失的效果太丑了。自己可以试试看）
4、设置文案效果
1）将文案全部组合，设置为：下滑入效果，时长：750ms
5、分别按照（第五步：1-4）将对应电影介绍做好，就完成啦！
Duang duang duang 效果完成~我们来预览一下
亲自体验交互原型：
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册