墨刀公测&设计大赛「二等奖」- 电影海报切换效果教程

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

最终效果图预览

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

丨那么,下面正式开始

一、构图

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 效果完成~我们来预览一下

亲自体验交互原型:

https://v5test.modao.cc/app/df03c89b0075afa89cdc9ee60d989b288dc8f61a

Powered by Froala Editor

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章