参加墨刀新动态公测活动，不才得了二等奖，受官方邀请，分享作品制作教程！本人文字叙述能力不强，第一次写教程，请多包涵~
最终效果图预览

本作品是电影海报预览切换效果，页面分为：展示页与详情页。

丨那么，下面正式开始

一、构图

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

声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)