UI基础概念与UI动效

一 UI的概念

UI（user interface）,就是用户界面的意思。不仅仅是界面美化（视觉上），还需要了解用户与界面的交互。

好的交互：学习成本低

使UI规范的是微软，使UI火爆的是苹果

二 UI的分类

PC端（如：360杀毒软件、QQ），移动端（如：微信、QQ音乐、支付宝），智能电视（小米电视、乐视电视），其他(车载系统、ATM、穿戴式设备)，游戏UI

三 UI动效在工作中的作用

1. 在开发时软件中使用（比如加载动画、下拉刷新等等）
2. 和软件开发工程师沟通使用
3. 给客户演示demo（小样）使用

   四 UI动效的制作过
   

4. 写文字脚本
5. 准备素材
6. 新建画布开始制作

   五 帧动画
   

   帧动画就是机械式的动画，至少需要两个画面切换，一个画面就是一帧。

   制作流程：
   

7. 拖入素材或新建画布制作素材
8. 点击窗口（菜单）—时间轴
9. 选择创建帧动画，并点击
10. 
11. 点复制所选帧按钮
12. 
13. 点到第2帧的画面，隐藏图层面板中上面的图层
14. 一次选择成永远，时间改成合适的时间

    

     

    9, 保存成GIF图，要用三键+S，选择GIF

    10, 如果保存GIF报错，ctrl+alt+i，改变图像大小，把图改小一半

     

    Tips:手动改gif后缀名为jpg，图片还能动

    六 视频时间轴动画
    

    视频时间轴动画可以制作相对帧动画复杂一些的效果

    视频时间轴动画制作流程：
    

15. 准备好素材
16. 窗口（菜单）——时间轴
17. 选择创建视频时间轴动画，并点击
18. 
19. 把要动的图层转换为智能对象
20. 选择好对应的内容轨道，点开小三角按钮，出现各种动效按钮
21. 
22. 选择需要使用的效果，点击前面的小秒表（启用关键帧）
23. 移动轨道中的时间线后，再移动或变换素材（会自动添加关键帧）
24. 点击变换前面的小秒表按钮（添加关键帧）
25. 
26. 调节好内容轨道的时间，把不需要的轨道时间去掉（拖拽紫色方块的最右边，一直拖拽到最后一个关键帧那儿）
28. 
29. 把时间线移动到0秒位置

    七 图层蒙板动画
    

    先把素材转换为智能对象，再加图层蒙板，断开链接

    到对应的轨道内容素材效果中调节图层蒙板位置效果

    

    八 添加关键帧：
    

    点击秒表前面的在播放头处添加或移除关键帧按钮

    

    九 删除关键帧：
    

    1、点击在播放头处添加或移除关键帧按钮

    2、右击关键帧删除

    十 复制粘贴关键帧
    

30. 找到需要复制的关键帧右击复制
31. 调整好时间线，点击在播放头处添加或移除关键帧按钮，添加一个关键帧
32. 右击这个关键帧粘贴

    十一 样式动画
    

    1. 先画好所需要的素材，先在100%填充下转智能对象，然后再将填充降为0
    2. 添加图层样式，并打上关键帧，调节时间线，再调节图层样式

    

    十二 融动画
    

33. 最好使用三原色之一的颜色（比如：R:0 G:0 B:255）
34. 两个圆的颜色要一样
35. 两个圆de羽化值要调到最大，然后调整色阶，直到把圆调回原来的形状即可。