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. 点到第2帧的画面,隐藏图层面板中上面的图层
  12. 一次选择成永远,时间改成合适的时间

     

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

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

     

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

    六 视频时间轴动画

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

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

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

    七 图层蒙板动画

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

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

    八 添加关键帧:

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

    九 删除关键帧:

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

    2、右击关键帧删除

    十 复制粘贴关键帧

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

    十一 样式动画

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

    十二 融动画

  26. 最好使用三原色之一的颜色(比如:R:0 G:0 B:255)
  27. 两个圆的颜色要一样
  28. 两个圆de羽化值要调到最大,然后调整色阶,直到把圆调回原来的形状即可。

     

     

     

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: