恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE动效制作四大基础属性:位置、旋转、缩放、透明度
0.0°
2022-07-26 原创文章 经验/观点 举报 2546 10 14 0



对「用户而言」动效的作用有:

便于用户理解,降低使用成本;

增强用户的带入感和操作体验;

操作及时反馈,减少用户等待的焦虑和失落感;

建立用户与产品之间的互动。


对「产品而言」动效的作用有:

清晰地展现产品层级关系,使界面间自然过渡;

营造视觉焦点,引导用户操作;

提升产品易用性,增加用户黏性;

为产品注入活力,提升品质和竞争力


今天,本文介绍AE动效制作的四大基础属性:位置、旋转、缩放、透明度。

99%的动效软件基本参数都一样,分别是位置、缩放、旋转和透明度。通过这四个参数的结合、变化、交替和反复,可以制作非常出色的动画效果。

如果是新手动效设计师,AE基础较薄弱的同学,建议仔细学习。


一、位置

快捷键:P

随着时间的变化,物体位置发生移动,就是产生动画的过程。

位置移动的方式包括:横向、纵向、圆、不规则形。

图片来源于网络

前半部分,卡片流的上下滑动,用到最主要的属性就是位置。上下滑动,卡片以及卡片内容位置依次发生变化,整个过程流畅自然。增强了用户的带入感和操作体验;


位置移动最重要的原则是缓动。

缓动指的是物体在物理规则下,加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然,符合实际情况,这是运动的基本原则之一。

缓动的方式为:缓入、缓出

缓入的方式:先快后慢,曲线由陡峭变为舒缓。


缓出的方式:先慢后快,曲线由舒缓变为陡峭。


实际案例

图片来源于网络

底部弹窗缓慢出现,不会给用户突兀的感受,待相应操作完成之后,迅速离开,符合日常的使用习惯。


二、旋转

快捷键:R

旋转最重要的是确认中心点,中心点可以在物体内部,也可以在物体外部,视情况而定。确认之后所有的运动将围绕中心点进行。

旋转速度、旋转对象外观不同,整体效果看起来也会大大不同。可以对多边形,Logo,卡片等各种各样的东西做旋转,通用性非常高。

旋转的方式包括:二维,三维。

二维:即平面,在X、Y两个象限内旋转


三维:即立体,会在X、Y、Z三个象限内旋转。


设计案例

图片来源于网络

二维旋转

圆点和圆角矩形,分别朝不同方向旋转180度,同时配合背景色的变化,一个完美的按钮切换动画就搞定了。


图片来源于网络

三维旋转

黑胶唱片的切换即应用三维旋转的方式。为产品注入活力,提升品质和竞争力。


三、缩放

快捷键:S

缩放的意思为:缩小或放大,能够使物体的大小发生变化。

在日常生活中,物体发生挤压、碰撞、外力作用时,形状都会产生变化,动效制作过程也是如此。

缩放的方式包括:形状缩放、连续缩放、对称缩放、点缩放。

形状缩放、连续缩放


对称缩放、点缩放


实际案例

图片来源于网络

黄色封面唱片点击之后放大,然后消失,用到的就是缩放属性。


图片来源于网络

数据线插头与地面接触时,利用缩放属性,纵向产生压缩,模拟真实场景。


四、不透明度

快捷键:T

不透明度的变化好比日夜交替的过程。事物的出现或消失,不可能突然发生,必然有其逐渐变化的过程。

不透明度的作用:创造视觉趣味,对比元素,创造深度、区隔空间、区分状态、突出焦点。

透明度变化方式为:从无到有、从有到无。

实际案例

图片来源于网络

圆环逐渐放大,透明度缓慢变为0,模拟雨滴落下消失的过程。

图片来源于网络

点击列表后,利用透明度的变化,展现卡片的出现和消失,突出卡片内容,建立用户与产品之间的互动。

以上就是对AE动效制作四大基础属性:位置、旋转、缩放、透明度的全部介绍。如果觉得有帮助,点个赞

Powered by Froala Editor

更新:2022-07-26

收藏

10人已收藏

西城门设计

合作&交流:WGDesign009

  • 2

    作品

  • 1

    粉丝

  • 25

    关注

  • 近2000字干货,UI设计师必须掌握的四个设计原则
相关标签

    猜你喜欢

      2022-07-26 原创文章 经验/观点 举报 2546 10 14 0

      AE动效制作四大基础属性:位置、旋转、缩放、透明度

      0.0°

      你确定要举报AE动效制作四大基础属性:位置、旋转、缩放、透明度

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年07月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      10
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录