当前位置:主页 > PS教程 > 设计教程 >

PS制作流畅的动态APP演示动画(3)

  • 2021-05-06 15:46
  • 来源/作者:UICN/MohammadJeprie
  • 己被围观

步骤14:先把主要区域的矩形图层全部隐藏,然后构建一个较大的矩形区域,这将应用到选择具体卡片后的细节界面,做完后,此图层组不透明度设置为

步骤14:先把主要区域的矩形图层全部隐藏,然后构建一个较大的矩形区域,这将应用到选择具体卡片后的细节界面,做完后,此图层组不透明度设置为0%

Photoshop制作流畅的动态APP演示动画

2.、触控点

步骤1:创建新图层,命名为“Tap”,画一个白色形状,不透明度70%

Photoshop制作流畅的动态APP演示动画

步骤2:复制这个圆形,扩大,去掉填充,描边设置为3pt白色,继续复制,扩大,描边2pt,完事后居中对齐

Photoshop制作流畅的动态APP演示动画

隐藏tap图层组,因为刚加载完界面是不会显示触控点的,但是当选择元素产生转场时会出现。

3.、滚动效果

步骤1:现在,终于开始做UI动态演示效果了,打开时间轴面板,创建帧动画,按下图那个红色划线按钮,创建新帧

Photoshop制作流畅的动态APP演示动画

Photoshop制作流畅的动态APP演示动画

步骤2:显示Tap图层组,隐藏两个描边圆,用来代表滚动手势。当开始滚动时,两个描边圈也出现,涟漪效果能够突出滚动手势。

Photoshop制作流畅的动态APP演示动画

步骤3:第一帧1s,第二帧开始帧延迟设置为0.2s

Photoshop制作流畅的动态APP演示动画

步骤4:添加帧

Photoshop制作流畅的动态APP演示动画

步骤5:显示Tap图层组所有突出。使用移动工具,来上移Tap图层组和主要内容图层组

Photoshop制作流畅的动态APP演示动画

步骤6:为了让滚动效果更流畅,选中当前帧和前一帧,点击时间轴面板中得选项,选择过渡,设置如下:

Photoshop制作流畅的动态APP演示动画

现在,便有稍微流畅的效果了。

Photoshop制作流畅的动态APP演示动画

(责任编辑:xiaochuan)

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

分享到:

标签(TAG) GIF 动态图设计 动画教程 

更多精彩内容

  • <font color='#FF0000'>Ps制作照片逼真投影</font> Ps制作照片逼真投影
  • <strong>如何在ps中创建令人敬畏的</strong> 如何在ps中创建令人敬畏的
  • <strong>ps去除水印</strong> ps去除水印
  • <strong>ps惊人新功能、自动着色、</strong> ps惊人新功能、自动着色、