提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
课前准备
根据这次主题做出ui界面,然后将动效设计传到UI中国后,将其链接放到群文件中
点评后选出最佳作品发放价值200元奖品,希望大家认真对待每次练习
---------------------------------------------------------------------------------
活动时间
6月25号-7月1号下午5点
将会在5点把点评和下一期教程一起发出
有问题可以在群里讨论和交流,不懂也可以来要教程看看
高清播放视频地址
界面设计(上):https://www.bilibili.com/video/av25234228
动效设计(下):由于电脑重装,视频丢失,会附上AE源文件,另外建议尽量听直播
必须下载的素材
本文所需要的素材&源文件 网盘下载
一、确定所需要的操作
1、APP设计的注意事项
2、如何搜集灵感
3、设计App
3、切图后导入AE
4、制作动效
二、设计这个App
从这个界面开始不介绍标注啥的,但是会对其一些主要的细节进行介绍
这个教程的参考放上
首先确认这个小页面的一些规范
字体:Helvetica Neue LT Pro Black / Bold / Light
字号:标题40px 内容32px 其他24px
颜色:主字色#475266 辅助字色#acb3bf 主色调#61d5f4 - #58f2f4
针对界面的一些细节去介绍
首先是第一个界面
然后是第二个界面
三、开始制作AE
由于这次电脑重装系统原因,AE动效的教程丢失,所以会在这尽量用文字进行描述
首先将素材文件夹的切图放入AE中
1, 首先制作banner的切换动效
将2个banner放入AE排列好,分析动画的运动
首先第一个banner滑动走有位置,Y轴旋转,透明度的变化
位置从右到左
Y轴旋转从0度到20度,需要打开3D模式
透明度从100到0
变化前的数据
变化后的数据
接下来看第二张图的变化过程
第二张图的运动稍显复杂
首先位置从右到左
Y轴旋转从-20度到0度
透明度从0到100
在运动完成后会发现过于生硬,所以可以将其Y轴旋转继续运动 “5度 - 0度 - 3度 - 0度”,让其有个回弹效果
2, 接下来看列表页的运动
列表的上划涉及到的动效有以下几个动画
列表的位置从下往上运动
在运动的同时每个小卡片会有一个X轴旋转的动效
当运动到banner的时候,banner会翻转进行消失
难点解析:
首先是列表的运动,从下面滑动的动效很简单,但是需要注意第三排,由于后面的动画需要利用到第三个中的唱片,名字和封套,所以我们需要将其单独处理,但是我们需要做X轴旋转,不能将第三排的4个组件单独进行处理,需要让唱片,名字和封套跟随其基础的组件
运动到banner的时候,banner的X轴旋转的同时需要将位置往上挪动,就可以有向上翻转的效果,并且在翻转的时候需要将其透明度降低到0
3, 接下来是点击后切换到第二个页面的效果
首先是点击后的封套会Y轴旋转消失,然后是字和唱片会放大后挪动到相应位置,然后会加上水波动效,时间变化动效等
难点介绍
首先介绍水波的动效
可以创建一个矩形,修改其颜色,加上“效果 - 扭曲 - 波形变形”的动画,调整其参数即可完成水波动效
然后是时间的变化效果
可以复制粘贴文本
rate = 1;
clockStart = -4;
function minZero(n){ if (n function secZero(n){ if (n clockTime = Math.max(clockStart + rate* (time - inPoint),0);
t = Math.floor(clockTime);
min = Math.floor((t%3600)/60);
sec = Math.floor(t%60);
minZero(min) + ":" + secZero(sec)
需要注意的是clockStart 为其开始的时间
想要了解更多可查看以前的教程:http://www.ui.cn/detail/309118.html
最后再说一个歌词的动效
这里涉及到蒙版,需要复制2层文字,将上层的文字改成蓝色,后层文字改成灰色
然后将上层的文字用蒙版的变化去做歌词的动效
最终效果
上周点评地址:http://www.ui.cn/detail/369351.html
希望大家能一起进步
版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~
也欢迎加入设计群, 一起交流设计
微信公众号:LEO的Blender的课堂
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册