__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:00

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


播放一下，不要忘记循环次数选择永远，更好地观摩效果以便调试

http://pic.16xx8.com/allimg/140809/0144194303-32.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:01

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


步骤8
现在我们想让界面滚动回来，我们需要复制第二帧到最后一帧
拷贝单帧
选择粘贴单帧，将其移动到最后一帧。

http://pic.16xx8.com/allimg/140809/0144196493-33.png


http://pic.16xx8.com/allimg/140809/0144191205-34.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:02

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

      
步骤9
同步骤7，选择过渡

http://pic.16xx8.com/allimg/140809/0144195Z8-35.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:03

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


添加新帧，隐藏Tap图层组。

http://pic.16xx8.com/allimg/140809/01441a2P-36.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:04

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


效果演示：

http://pic.16xx8.com/allimg/140809/014419EU-37.gif

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:05

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


点击菜单分类项效果步骤1
现在想要设置点击菜单项后的效果。首先，创建新的帧0.5s。
然后再创建一个帧，在这个帧里面，
将首页加（粗版）不透明度设置为0%，常规从0%->100%
杂志（粗版）不透明度设置为100%。常规从100%->0%

http://pic.16xx8.com/allimg/140809/01441963R-38.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:06

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


步骤2
激活Tap图层组，将其移动到杂志选项附近，然后将帧延迟设置成0.2s

http://pic.16xx8.com/allimg/140809/0144196318-39.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:07

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


步骤3
创建新帧，延迟0.1s，隐藏tap图层组中最细的描边

http://pic.16xx8.com/allimg/140809/0144191F2-40.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:08

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

      
步骤4
再添加一帧，再隐藏剩下的那个描边

http://pic.16xx8.com/allimg/140809/01441912R-41.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:09

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


步骤5
添加新帧，隐藏tap圆

http://pic.16xx8.com/allimg/140809/0144192644-42.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:10

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


步骤6
创建新帧，将和杂志无关的内容项不透明度设置为0%（这里修改了最后一个作品）

http://pic.16xx8.com/allimg/140809/0144191I9-43.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:11

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


步骤7
依旧在这一帧中，将和杂志相关项上移

http://pic.16xx8.com/allimg/140809/01441960V-44.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:12

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


步骤8
在当前帧和上一帧直接选择过渡，为了加速动效，要添加的帧数选择3
步骤9
最后一帧设置延迟1s

http://pic.16xx8.com/allimg/140809/0144194c6-45.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:13

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


效果展示：

http://pic.16xx8.com/allimg/140809/0144194931-46.gif

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:14

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

      
点击具体项效果步骤1
创建关键帧，延迟0.2s，显示Tap图层组（移动到具体项位置）

http://pic.16xx8.com/allimg/140809/0144192O4-47.png
页: 1 2 [3] 4
查看完整版本: Photoshop制作流畅的动态APP演示动画