pi币为什么那么低调,pi币为什么显示loading

  

     

  

  在UI设计中,一个好的动态设计可以增强UI界面与用户的交互体验,让枯燥的界面变得生动,甚至给用户一种“心跳骤停”的感觉。   

  

     

  

  优秀的UI动态设计对提升产品体验和用户粘性有重要作用。动态设计越来越受欢迎。在企业招聘中,具有动态设计技能的设计师更具竞争力。   

  

     

  

     

  

  趋势是不断变化的。可以说,掌握更多的技能,会给你更多的保障。之前数码一君分享过UI动态设计的文章(点这里),很多朋友都说不喜欢。所以今天,我将带给你另一个例子。记得试试看。   

  

  实例:时间轴动画――旋转   

  

  在实际的动画中,创意是比技术更重要的环节。不要为了炫技叠加太多特效。艺君分享一个时间轴动画的案例。这个案例的思路很简单,但是视觉效果很好。可以通过下面的链接下载资源,观察完成后的动画效果,自己尝试制作。然后,回到案例,看看步骤分解,找出自己没有注意到或者做不到的地方。下图显示了“时间轴动画-旋转”案例的完成情况。   

  

     

  

  (最终效果)   

  

  案例资源下载:   

  

  https://pan.baidu.com/s/1UDKu25e8JjPi_gQgLK4LxA   

  

  提货代码:yjqu   

  

  绘制01,的动画背景创建一个800像素 600像素的空白文档,命名为“旋转动画”。如图所示设置参数,点击“确定”。通过油漆桶工具或者颜色叠加将背景色设置为浅灰色#f5f6f8。   

  

     

  

  02绘制动画基本图形。动画主体通过简单几何图形的旋转实现分层,因此先建立动画的基本图形部分,并为每一层添加颜色渐变和外部光线。   

  

  用圆角矩形工具在画布中央创建一个200像素 200像素,圆角80像素的圆角矩形,如图。如下图所示调整图层样式。   

  

     

  

  圆角矩形样式   

  

     

  

  梯度叠加参数   

  

     

  

  梯度参数   

  

     

  

  投影参数   

  

     

  

  投影颜色值   

  

  使用03圆角矩形工具创建一个新的圆角矩形180像素乘180像素。圆角大小统一设置为60像素,旋转角度使用自由变换在属性栏中设置为“45度”。执行菜单栏中的“对齐图层”命令,使其与前一个圆角矩形的中心对齐。在图层样式中设置圆角矩形的渐变叠加参数,使圆角矩形的颜色由深蓝色#3a6bfa变为浅蓝色#6df3fd,此时的视觉效果如图所示。参数设置如下图所示。   

  

     

  

  第二层圆角矩形   

src="https://tupian.lamuhao.com/pic/img.php?k=pi币为什么那么低调,pi币为什么显示loading13.jpg">

  

渐变叠加参数

  

  

渐变参数

  

  

投影参数

  

  

投影色值

  

04 最上层选择“多边形工具” ,然后设置为五边形同时勾选平滑拐角,如图所示。在画布中央画一个五边形,也是与之前的图形中心对齐,颜色设定为#1f2122,此时的视觉效果如图所示。

  

  

多边形设置

  

  

叠加后的图形

  

05 在画布的中央使用微软雅黑24号字输入合适的文字。这里我们做的是加载界面,因此可以输入“LOADING…”,如图所示。这样一来,静态页面的图层部分就全部完成了。接下来我们可以开始进行动画的设计,让这个加载图标动起来。

  

  

静态设计稿定稿

  

06 创建时间轴。如果没有打开时间轴面板的话,先在菜单栏中执行“窗口>时间轴”命令,打开时间轴面板,如图所示。单击创建视频时间轴按钮,创建时间轴动画后的默认设置如图所示。

  

  

时间轴面板

  

  

创建时间轴动画后的默认设置

  

07 设置智能对象,让底层的圆角矩形旋转起来。形状图层是没有办法做变换记录的,因此先把底层的矩形设置为智能对象,如图所示。

  

  

转换智能对象

  

08 拆解动画。大家可以先尝试自己做一下旋转的动画,在尝试中会发现,如果直接旋转360度的话,这个圆角矩形是转不起来的,因此我们需要把旋转的动画拆分为3段,每段用时1秒,旋转120度。然后循环两次。

  

09 延长层的持续时间。默认的时间轴给出的时间是5秒,而旋转两次需要6秒,因此需要延长时间。而上侧的时间段是没有办法直接延长的,因此需要延长层的持续时间,这样整个动画的时间段就会自动延长,如图 所示。

  

  

延长动画时间轴

  

10 第1个循环做好之后,第2个循环可以通过复制粘贴帧的方式来完成,记得调整背景层的时间长度。做好之后的时间轴面板应该如图所示。

  

  

调整时间轴长度后的面板

  

11 完成layer2的旋转动画。为了区分层次,layer2的旋转动画需要慢一点,而且需要在某个时间点上,layer2和layer1在同一个时间点回到初始状态,这样才能做循环动画。因为layer1的旋转周期为3秒,因此这里我们设置layer2的旋转周期为6秒,当然,也可以设置为9秒或者1.5秒,大家可以自行尝试。

  

12 在Photoshop中如果动画的形式一致,即使是跨图层,关键帧也是可以复制粘贴的。除了上述方法,读者还可以尝试把layer1的关键帧复制过来,然后调整位置,完成之后的时间轴面板如图所示。

  

  

时间轴面板

  

13 完成layer3的旋转动画。用上述同样的思路来完成即可。由于五边形在旋转过程中视觉中心不一定是物理重心,因此在旋转的时候需要手动调整位置,使图形的视觉中心位于画面中心。旋转部分完成后的时间轴面板如图所示。

  

  

旋转部分完成

  

14 预览动画效果。这时可以单击时间轴面板的“播放” 按钮来看下动画效果。由于这个动画比较大,时间也比较长,因此第1遍播放速度会比较慢,因为Photoshop需要进行预渲染,第2遍的速度会正常一些。播放的时候尽量勾选循环播放按钮,如图所示,这样可以观察这个可循环动画在循环时会不会有衔接上的不顺畅感。

  

  

播放时勾选循环播放按钮

  

15 调整文字动效。动画主要的部分已经实现了,但是在背景有变化、而前景文字没有变化的情况下,会略显死板,因此我们可以给前景文字加入透明度的变化,让整个动画有一种呼吸感。这里让文字从100%不透明度渐变到10%不透明度,然后再回归。完成后的全部关键帧如图所示。

  

  

全部关键帧

  

16 调整光晕动效。此时动画部分基本完成了,但可以更进一步地塑造节奏感,就是光晕的变化部分,通过最外层光晕的大小变化来强化呼吸感。双击layer1图层,然后在样式栏下增加关键帧记录,如图所示。投影参数大小由40像素经过1秒过渡到10像素,然后经过1秒回归到40像素,总计动画时长修改为6秒,如图所示,跟外部的动画持续时间长短一致。

  

  

投影参数

  

  

光晕动画时间轴

  

17 保存预览。保存layer1.psd之后关闭,回到之前的动画PSD,保存并预览,观察效果是否符合预期。可以使用同样的方法为layer2增加同样的光晕变化动画,这里就不再重复介绍了。

  

提示:动画完成之后,保存PSD文档,然后导出GIF格式。这个动画保存时会发现,体积非常大,默认参数下可以达到1.5MB左右,这主要是由于光晕这类元素比较占空间。这种动画就不太适合逐帧输出资源了,而更适合把每个单独的图层导出为PNG图像,然后拿着GIF动画效果图,跟研发人员一起沟通研究这个动画的实现方式,用程序的方法来实现,可以有效地降低动画尺寸。

相关文章