做设计的时候如果只是依赖设计感觉，在输出设计观点的时候，就会缺乏理论支撑从而无法说服别人，所以，了解一定的设计模型方法论，可以让你的设计更加有理有据，同时设计师在思考设计的过程中，也可以通过一些设计模型帮助我们开拓思维，突破瓶颈。
要想看起来毫不费力，你就需要非常努力，每一个领域，都会有很多专业的人。你必须马不停蹄的学习，才有能保持和他们的距离，不努力不学习，一不留神就会掉队。特别在设计这个青春行业，新知识、新风格、新技能更新的很快，更需要我们保持警惕心，时刻迎接新的挑战，敢于突破自己。
动效有多重要? 动效可以帮我们提升UX(用户体验),使UI界面显得更加一致和真实,并给整个产品带来创新的感觉。
温馨提示：以下图片均来源网络，GIF格式文件需要加载，感谢耐心阅读～
以上视频、图片均来源网络，若侵可联系修改删除，欢迎交流探讨，谢谢～
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初是用来为动画片这种传统的形式设计的，然而，这些原则也同样适用于 UI设计。所以，我想在这里做一个有趣的尝试，看能否将这些动画原则联系起来。
在动画中，挤压和拉伸代表了物体的重力，质量，重量和灵活性。举例来说，当一个弹球在它撞击地面时会发生形态变化，就是挤压和拉伸。
在界面中，挤压和拉伸很容易就联想到按钮。当一个按钮被按下时，就可以理解为受到了挤压，通过控制按钮的挤压和拉伸，我们可以很轻易地做好一个按钮的交互动画。除了按钮之外，这种原则也可以应用于 UI 中的任何交互元素上。
△ 按钮在交互时的挤压和拉伸
△ 挤压和拉伸被应用于侧边栏
让观众能预先知道接下来将会发生什么，它是先于下一步会发生的动作。举例来说，迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳，正在跑步的人要停止跑步前会逐渐变慢步伐等等。
在界面中，悬停状态就是很好的例子。当我们把鼠标悬停在元素上时，元素会提供反馈，表明它是可以点击的，并且在点击时，又会有一些别的反馈。
△ 悬停的交互通常会暗示这个按钮是可以点的
在有水平滚动界面里，通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子，因为它是在告知用户下一步的一些信息。
在传统动画中，时间会决定关键帧的绘制方式。帧数越多，动画就越流畅，同时也更慢，时间能够给动画赋予情绪和性格。
时间的节奏感是任何动画的基础，速度在元素编排中起着非常重要的作用。速度太慢，用户会不耐烦；速度太快，用户又会错过一些内容。一般来说，大多数 UI动画在200-600ms之间，其中悬停和反馈交互时长大约为300ms，精细的转场动画大约在500ms。也可以去参考谷歌的动画规范（https://material.io/design/motion/speed.html#duration），里面非常详细地解释了每种动画类型的持续时间。
一些设计系统，如 Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、 Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把运动的节奏感视为一个很重要的方面，并为每种类型的过渡都制定了严格的规范。
△ 右边的过渡动画显得太过于漫长，繁琐。
在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才会变快。
△ 左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。
给 UI 中的元素加上缓动会让它看起来更加自然，缓动和节奏感都是可以有效的提升动画的品质。
舞台中的表演需要合适的编排才会精彩。也就是说，对象在场景中如何摆放，每个动画又如何出现，关乎演出的质量。通过这种编排，能够将注意力引向最重要的角色。
在界面中，呈现方式能够决定元素的位置，以及在交互时，它应该如何编排才能将用户的注意力引向预期的元素。
比如现在有一个基于兴趣的音乐APP，对这个应用来说，最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操作与其他元素分开编排，有目的的引导用户。
一个从高处抛出的小球，运动轨迹会做抛物线轨迹运动，弧线能使物体的运动更加自然。
在界面中，沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时，多尝试使用弧线轨迹。
△ 通过对比，能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。
在动画中，次要动作能够起到烘托主要动作，比如动画中的角色在走路时，头部的晃动就是次要动作，却能够让角色行走显得更加自然。
在界面中，次要操作能够起到强化关键动作，当元素需要向用户提供反馈时，这个方法非常管用。所有的微交互都是基于这个附属动作原理。
△ 按钮边上的粒子效果强化了主按钮的点击效果
场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。
在界面中，重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的 FAB按钮就是一个很好的例子，FAB按钮在不动的时候也比较能引起注意，因为它通常会带有比较鲜明的颜色，并且是独立悬浮在界面元素之上的。当它被点击时，FAB的动画被放大，把整个界面都占满，使得它完全占据用户的注意力。
△ FAB夸张的交互形式
△ 对于支付这么重要功能的按钮，通过夸张的动效引起用户的注意
想象一只兔子从高处跳下来，当兔子开始起跳时，它的耳朵动作会与身体动作发生错位。然后当它着陆时，它的身体停下来了，但是耳朵还在动。前者称之为跟随动作，后者被称为重叠动作。其原理说的就是：没有任何一种物体会突然停止，物体的运动是一个部分接着另一个部分的。
在界面中，可以使元素在停止之前超过它们原本的位置，使得元素运动更加自然。（译者注：大白话就是我们常说的回弹效果。）
△ 界面有一定的回弹，会显得更加自然。
△ 当界面滚动时，文字会跟随图片的运动，图片与文字以不同的速度运动会更加自然。（译者注：像是被拖着走的那种感觉）
界面中的每一次交互都必须在适当的场景中精心设计，让整个体验更具沉浸感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。
这些原则正在以不同的形式应用于当今的数字产品中，值得敬畏的是，30年前设计的一套规则到今天仍然适用。
（译者注：这又应了迪特·拉姆斯的设计十诫，好的设计是不会过时的。）
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文字，是最常见的动效对象之一。我们可以通过对透明度、位置或者角度的改变，制作出丰富的动态效果。但你可能不知道的是，AE内置了超多的文字预设，只需用鼠标点击几下，就可以完成复杂丝滑的文字动效。
在AE的窗口中打开“效果和预设”面板，所有和文字有关的效果都在动画预设中的Text文件夹内，共十七种动效类型
将动效预设拖动到对象上，即可应用动效。
十七种类型分别为：3D文字动效、入场动效、离场动效、模糊动效、曲线动效、表达式动效、填充与描边动效、图形动效、亮度与透明度动效、机械化动效、多样化动效、多行文案动效、拟态化动效、路径动效、旋转动效、缩放动效以及字间距动效。
有些效果可以相互叠加组合，理论上我们能做出成百上千种不同的效果。
文章来源：UI中国 作者：设计师深海
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
迪士尼的12条动画基本原则是传统动画中最有价值的原理之一。它出自Johnston和Frank的书《生命的幻觉》。虽然这些原理最初是为传统动画（例如角色动画）设计的，但在本文中，我们将探讨如何将其中的一些原理应用于UI动效上。
在动画中，挤压和拉伸表示对象的重力，质量，弹性。当场景中的弹球撞击地面时会被挤压。在UI界面中，挤压和拉伸非常适合与按钮相结合。
例如，按钮的按下状态为挤压。通过控制挤压和拉伸，我们可以轻松地定义按钮的状态。除此之外，它还可以应用于界面上的所有的交互式元素。
应用于按钮上的挤压和拉伸
应用于侧边栏的挤压和拉伸
预备动作为用户展示了即将发生的事情。就像奔跑开始时，我们的身体会先向后倾，然后才是加速跑，这就是预备动作。在UI动效中，悬停状态就是很好的例子。每当我们将鼠标悬停在元素上时，某些元素都会做出反应，表明它是可单击的，并且当您单击它时会发生某些事情。
悬停互动通常会告诉我们接下来有一个动作发生
涉及水平滚动的界面通常会显示下一个元素的一部分，该元素会出现在滚动/滑动中
在传统动画中，时间由绘制的帧动画来控制。帧数越多，动画将越流畅和越慢。时间还可以表现对象的情绪和性格。
时间也是所有UI动效最基本的属性。定时和缓动功能在动效设计中起着重要的作用。漫长的过渡会使您的用户等待太久。另一方面，如果动画太快，用户可能会错过一些东西。通常，大多数界面动画在200到600毫秒之间。诸如悬停和反馈之类的交互约为300毫秒，而诸如过渡之类的复杂动作约为500毫秒。您可以参考Material Design，其中对每种类型的动画的持续时间都有很好的解释。
右侧的过渡会使用户等待太久
现实世界中的大多数对象都遵循缓动效果。换句话说，物体的运动并不突然。就像自由下落的物体会在运动过程中逐渐加速。
向UI元素添加缓动效果可以使它们看起来更生动自然。制定时间节奏和缓动标准可以让你建立一个高效的动效库。
右侧添加了缓动效果，所以看起来更自然
转场，它包括如何将对象放置在场景中，如何以及何时进行每个动画等等。它将用户的注意力引向场景中最重要的对象。
对于UI界面，转场决定了元素的放置位置以及在发生交互时如何对元素进行排版。它将用户的注意力引向最关键的元素。
这是一个音乐类的APP，转场动画将歌曲封面和名称放大置顶，并让“喜欢”按钮单独出现，让用户一目了然
从高处抛出的球遵循了抛物线的路径——弧线会让事物更自然。在UI界面中，使用弧线运动会比使用直线运动更加的自然，要突出元素运动的路径时可以使用弧线。
弧线运动更加生动自然
在动画中，辅助动画用于强调场景中发生主要动作。例如，角色的头发在行走时的微妙移动，或者是面部表情的微妙变化。
在UI界面中，辅助动画可以使主要动作更加突出，这在向用户反馈信息时非常有帮助，所有微交互的作用均基于此原理。
辅助的例子动画让点赞效果更饱满
场景中的重要角色必须具有吸引力，通常会将某些动作进行夸大以引起更多关注。
在UI界面中，重要的交互作用也需要更夸张一些，以引起用户的注意。下图的设计就是一个很好的例子，悬浮的按钮在静态状态很显眼，因为它的颜色更重，并且悬浮在所有元素之上。当发生任何交互时，夸张的动画让它可以占据整个屏幕，使其吸引力更上一层楼。
占满全屏的夸张动画
夸张的支付按钮更吸引人的眼球
试想，如果你坐在三轮车上，当车前进的时，身体会短暂后仰，然后也会随之前进，我们称之为延时。突然刹车时，又会由于惯性运动身体向前倾然后回来 。
在UI界面中，同样可以在元素静止之前添加惯性运动，以使它们感觉更自然。不同元素直接也可以添加延时效果，让动效更细腻~
窗口放大时添加了惯性效果
图像和文本添加了短暂的延时效果
文章来源：UI中国 作者：设计师深海
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天我们来聊一聊动画法则与动画曲线，做动效不但要遵循物理规律还要结合人们的视觉体验，想让动效更自然更符合实际，对于动画法则与动画曲线的学习是必不可少的，希望此篇文章能帮助到你~
首先我们说一说动画法则，动画有12项基本法则，源自于迪士尼动画师经累积数十年的动画制作经验所整理出来的，我们逐一来分析学习
01.挤压与拉伸（Squeeze and stretch）
当有力作用到物体身上时，物体将会产生一定的形变，比如你在拍球时，球落地后会被挤压，弹起时会产生拉伸，对于具体的挤压与拉伸的强度，与物体的硬度和用力的大小有关。做动画要遵循运动规律让动画更自然。
如下图小球的弹跳，左侧是无挤压与拉伸的效果，右侧是加入挤压与拉伸后的效果，明显右侧更自然一些
从挤压与拉伸的程度上，我们还可以看出物体的硬度，挤压与拉伸的程度越明显，物体越柔软，反之，物体越硬,如下图我们做一个夸张点的对比，可以看出右侧小球硬度更高一些。
02.预备动作(anticpation )
当物体要发生运动或者人物要做动作之前会有一个预备动作，比如向前方扔东西，一般都会抬手向后然后在向前。或者人在跳高之前会先下蹲发力，然后在高高跳起，做动画也是一样，预备动作可以让用户知道即将发生什么。例如下图中的蓝色小球会看起来更有活力和冲劲。
03.布局（staging）
staging是表演；展现；分阶段进行；筹划的意思，我们可以理解为布局或者构图，例如看动画时，有些表达人物特性的画面会静止几秒，有些场景素材过于复杂的地方会对突出的人物打聚光灯，来引导用户的视觉走向。
04.连续与关键(straight & pose to pose)
我们可以理解成是两种动画制作方法，第一种是连续，也就是根据连续的动作逐一来制作每一帧的画面；第二种叫做关键，也就是先制作好关键的动画，然后再制作关键动画之间的画面。(连续与关键适用于手绘动画，而用AE或者一些动画软件在制作时可以结合使用)举个例子，比如你想做由于矩形逐步变幻成三角形的动画，如下图
05.跟随动作与重叠动作（follow through & overlapping）
跟随动作意思是动作的一个延续性，比如人物戴着红领巾向前跑然后停止，在停止的时候，红领巾是向前飘动的；重叠动作是指人物在运动的时候身体的关节并不是同一时间开始同一时间结束的，而是两者有重叠，如果同时开始和结束的话会很机械。
06.缓入缓出(slow in & slow out )
这个是最常用的动画法则，后面的动画曲线中也会详细说明这部分的，因为所有物体从静止到开始运动再到最后停止，都是一个逐步加速在逐步减速到停止的一个状态，当然机械物体的运动除外，比如传送带上的货物，就属于匀速运动。
07.动作弧线（action arc）
人物运动时会受到骨骼的影响，会呈现弧线运动，如果是直线运动就会生硬很多，举个例子
如果你看到了很明显的区别，却还是不知道为什么的话，我们来这样看
是不是瞬间豁然开朗
08.次要动作（secondary action）
次要动作我们可以理解为细节，主要是点缀主要动作的，比如用右手敲门，左手自然下垂，会给人感觉很放松，如果左手握拳会给人气愤的感觉，如果眼睛四处张望看起来就比较像小偷，这里的左手和眼睛就属于次要动作，可以丰富主要动作，但是不要太过，适当即可。
09.节奏(rhythm)
节奏可以使画面更有张力。有快有慢，有急速，有慢镜头，这些都可以使画面充满节奏感，很平均的画面就会很机械。
10.夸张（exaggeration）
夸张是可以增加对用户的吸引力的，和现实一模一样不是最优的选择，合理的讲动画夸张化往往可以呈现出更好的效果。（可以用挤压与拉伸，加快或放慢等等）
11.实体图（real figure）
可以理解为立体的形态，一个圆很平，但是立体的球就会有空间感，同时要保持画面的平衡。
12.吸引力（apparl）
画面有创新，独特，可以让用户过目不忘，吸引力强
以上要合理的运用才会达到最好的效果，不要机械的使用，说完了动画法则，我们看一下动画曲线。
首先动画曲线有什么作用？在哪里可以调节呢？
动画曲线可以现实对象运动的仿真效果，比如加速运动、减速运动、匀速运动、自由落体等等；在图表编辑器中为某个属性添加动画时，可以在速度图表中查看和调整动画曲线，从而影响对象的变化速率，使其更真实。
正式学习动画曲线之前我们先说一个小知识
关键帧
时间轴上的关键帧会有一些不同的形状，关键帧图标形态取决于关键帧之间的时间间隔的插值方法。当图标的一半为深灰色时，颜色较深的一半表示这一侧附近没有关键帧，或者其插值由应用于前一关键帧的定格插值所取代。
我们一起来看下有几种图标类型
让我们来一一解释，先看最简单的四个
圆形：
自动贝塞尔曲线（对两侧速度不同的关键帧进行柔和的连接）下面动图可以看出两者的不同对比
正方形:
定格（硬性变化）在文字变换动画中常用
凹三角和凸三角都是停止关键帧，可以通过右键点击切换保持关键帧来调整
凹三角是曲线关键帧转换为停止关键帧后的状态；凸三角是普通线性关键帧转换为停止关键帧后的状态
了解了关键帧之后我们来看看速度曲线与值曲线
最后我们来学习下动画曲线，动画曲线可以分为：线性动画，缓入动画，缓出动画，缓入缓出动画，我们逐一来举例说明
线性动画（linear）
动画从开始到结束一直是同样的速度运动，也就是匀速直线运动，看起来不是很自然，例如现实生活中的传送带就是匀速直线运动。
缓入动画(ease-in) -加速运动
动画的速度先慢后快，动画曲线先是陡峭再平缓，例如现实生活中汽车启动，但是缓入动画会在速度最快的时候停止，会很突然，有点像被磁铁吸住的感觉。
缓出动画（ease-out）-减速运动
与缓入动画正好相反，缓出动画的速度先快后慢，例如现实生活中汽车慢慢停止
缓入缓出动画(ease-in-out )
速度由慢变快再变慢，例如现实生活中的汽车启动加速到停止。但是默认的F9对于实际效果来讲并不够，还需要我们把对比调节的更强，如下图我们可以看到调整前后的不同节奏感。
总结一下，单纯的线性动画与缓入动画和缓出动画并不太符合正常的运动规律；当缓入缓出动画相互结合时才会更符合正常的运动规律，但是时间上的掌握也是需要慢慢琢磨的，希望此篇文章可以给你带来一些启发
文章来源：站酷 作者：凌旬
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多朋友面对AE表达式望而生畏，不过再难的东西都会有它最本质的规则，如果你理解了基本的原理和常用的表达式命令，这也许会提高你的工作效率。我通过自己对AE表达式的理解，尝试用最简单的语言解释一些看似复杂的操作，如果此篇文章能给你带来一些启发，不胜荣幸~
表达式就是AE内部基于JS编程语言开发的编辑工具，可以理解为简单的编程，不过没有编程那么复杂。其次表达式只能添加在可以编辑的关建帧的属性上，不可以添加在其他地方；表达式的使用根据实际情况来决定，如果关键帧可以更好的实现你想要的效果，使用关键帧就可以啦，表达式大部分情况下是可以更节约时间，提高工作效率的。
A.表达式开关 B.表达式图表 C.表达式关联器 D.表达式语言菜单
由于AE里不同的属性的参数不同，常用的我们可以分为：数值（旋转/不透明度）、数组（位置/缩放）、布尔值（true代表真、false代表假/0代表假、1代表真）这三种形式来进行书写表达式。对于表达式AE也有很多内置的函数命令，直接可以在表达式语言菜单里面进行调用。
原理:
time表示时间，以秒为单位，time*n =时间（秒数）*n （若应用于旋转属性，则n表示角度）
举例:
若在旋转属性上设置time表达式为time*60，则图层将通过1秒的时间旋转60度，2秒时旋转到120度以此类推（数值为正数时顺时针旋转，为负数时逆时针旋转）
注意事项:
time只能赋予一维属性的数据。(位置属性可进行单独尺寸的分离，从而可单独设置X或Y上的time)
wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)
原理:
freq=频率（设置每秒抖动的频率）；amp=振幅（每次抖动的幅度）；octaves=振幅幅度（在每次振幅的基础上还会进行一定的震幅幅度，很少用）；amp_mult=频率倍频（默认数值即可，数值越接近0，细节越少；越接近1，细节越多）；t=持续时间（抖动时间为合成时间，一般无需修改）；一般只写前两个数值即可
举例:
若在一维属性中，为位置属性添加wiggle(10,20)，则表示图层每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，为缩放添加n=wiggle(1,10);[n[0],n[0]]，则表示图层的缩放XY在每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，想单独在单维度进行抖动，需要将属性设置为单独尺寸后添加wiggle(10,20)，表示图层的缩放X轴在每秒抖动10次，每次随机波动的幅度为20。
注意事项:
可直接在现有属性上运行，包括任何关键帧
原理:
为每间隔多少数值来产生多少变化
举例:
若为图层1的旋转属性添加表达式index*5 ，则第一个图层会旋转5度，之后按Ctrl+D去复制多个图层时，第2个图层将旋转10度，以此类推；若想第一层图形不产生旋转保持正常形态，复制后的图形以5度递增，表达式可写为(index-1)*5
原理:
在当前时间输出当前属性值
举例:
若对位置属性添加表达式为value+100，则位置会在关键帧数值的基础上对X轴向右偏移100（正数向右侧，负数像左侧）；若想控制Y轴的位置属性，则可对位置属性进行单独尺寸的分割，从而可单独控制Y轴（正数向下，负数向上）
注意事项:
更多的使用场景是结合其他表达式一起应用
5. random表达式（随机表达式）
原理:
random(x,y)在数值x到y之间随机进行抽取，最小值为x，最大值为y
举例:
若为数字源文本添加表达式random(20)，则数据会随机改变，最大值不会超过20；
若为数字源文本添加表达式random(10,100)，则数据会在10<数值<100之间随机改变； 若为数字源文本添加表达式seedRandom(5, timeless = false)，random(50)，则数据会在50以内随机改变（前面的5是种子数，如一张画面中需要多个相同区间的数值做随机变化，就要为他们添加不同的种子数，防止两者随机变化雷同）,若希望数字随机变化为整数则应添加表达式为Math.round(random(2,50))，表示在2和50之间随机改变无小数
注意事项:
随机表达式不仅局限于数据上的使用，其他属性也可以应用，若数值为整数Math的M要大写
原理:
以此类推
举例:
如下图gif
原理:
timeRemap*n，n以帧为单位
举例:
将图层设置为timeRemap*10，代表每隔10帧就抽掉1帧画面，(根据要抽取的速率决定)
注意事项:
使用timeRemap表达式之前要启用时间重映射，否则无法使用此表达式
原理:
举例:
见下图均以(time,0,3,131,1000)为例，若为数字的源文本属性添加此表达式可以制作出倒计时的效果n=linear(time, 0, 3, 3, 0)表示从0-3秒数字从3到0，希望数字为整体需添加Math.floor(）
注意事项:
倒计时的用法比较常用，整数M要大写
原理:
degreesToRadians(degrees) 角度转为弧度（degrees度的变量或表达式）radiansToDegrees(radians)弧度转为角度（radians弧度的变量或表达式）
举例:
常用语数学中的一些计算sin，cos，tan，sec，csc，cot等
原理:
layer(index)中index 是数值，按照编号检索图层；layer(name)中name 是一个字符串，按照名称检索图层（若没有图层名称，则根据源名称）；layer(otherLayer, relIndex)中otherLayer 表示图层对象，relIndex 表示数值，检索属于图层对象的数值图层
举例:
原理:
marker.key(index)中index 是数值；marker.key(name)中name 是一个字符串
举例:
thisComp.marker.key(1).time表示返回第一个合成标记的时间;thisComp.marker.key(“我叫注释名称”).time表示返回具有名称”我叫注释名称”的合成标记的时间
原理:
width表示返回合成宽度；height表示返回合成高度
举例:
[thisComp.width/2, thisComp.height/2]表示宽度和高度为合成的一半也就是居中的位置
原理:
param(name)中name表示字符串；param(index)表示数值
举例:
effect(“高斯模糊”).param(“模糊度”)效果控制点始终位于图层空间中
原理:
复制粘贴表达式使用就可以，amp表示振幅,freq表示频率,decay表示衰减（根据不同需求做不同的调整）
举例:
n = 0; if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n–;}}
if (n == 0){t = 0;}else{
t = time – key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time – thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述内容复制粘贴使用即可
注意:motion2脚本也带此功能，方法不唯一
原理:
k表示反弹最终结果，a表示反弹阻力，b表示反弹变化时间
举例:
k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根据不同情况调节kab的数值即可）
原理:
StartNumber表示开始时的数值，EndNumber表示结束时的数值，StartTime表示开始的时间，EndTime表示结束的时间，和前面的linear表达式相对应
举例:
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
原理:
spd表示挤压拉伸的速度，maxDev表示挤压拉伸的大小，decay表示衰减
举例:
spd =20;maxDev =10;
decay = 1;
t = time – inPoint;
offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX = scale[0] + offset;scaleY = scale[1] – offset;
[scaleX,scaleY]
原理:
delay表示要延迟的帧数
举例:
为位置属性添加表达式delay = 0.5;
d = delay*thisComp.frameDuration*(index – 1);
thisComp.layer(1).position.valueAtTime(time – d)；
如想要实现不透明度拖尾需为不透明度属性添加表达式opacityFactor =.80;
Math.pow(opacityFactor,index – 1)*100(调整好一个图层后复制多个)
文章来源：优设 作者：凌旬
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一直有很多朋友会问一些关于移动端实现动效的方法，平时也会给大家做一些解答，但是可能没有那么系统性，这次抽点时间总结归纳下这方面的内容，跟大家分享下我日常设计中是如何完成动画实现的。
设计输出的方式大概可以分为位图和矢量两种，与常规的图片输出并无太大的差异。位图方式：PNG序列帧、APNG、GIF；矢量方式：Lottie、SVG动画。
当然除了以设计提供的方式之外，还可以设计完成好demo，开发通过代码进行实现例如：javascript直接实现、SVG（可伸缩矢量图形）、CSS3 transition、CSS3 animation、Canvas动画、requestAnimationFrame由于超出个人能力范畴就不展开讲了。
实现动画，首先还是得了解有哪些工具可以制作及合成相关的动效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等软件。另外最近准备学习一个新的专门制作svg动画的软件-KeyShape。
接下来讲解下各个软件输出对应格式的方法，实际上操作并不会太难，动效本身更重要的还是在于创意本身，因此当你把握了这些方式之后可以考虑进行创意设计。
由于GIF文件多种工具都可以输出，这里就不再作详细说明
1. PNG序列
具体如下视频
2. APNG
如上导出到PNG序列帧，拖拽到iSparta软件中，合成即可。合成时可以选择帧率、循环次数（0为无限循环）、导出质量等。如下视频
3. Lottie
更多Lottie相关可以前往https://lottiefiles.com/学习，里面有丰富等Lottie动画效果和一些插件下载，去研究下吧
4. SVG动画
建议大家自己下载软件后尝试
5. 格式大小比
通过试验几种格式的大小大概是排序依次为：PNG序列>APNG>GIF(质量较差)>Lottie / SVG，json文件和SVG动画文件比较接近，因此可以根据实际考虑决定即可，GIF虽然可以压缩到比较小，但是本身图片质量也较差，因此建议慎重考虑。
动效在UI设计中的应用场景很多，这里梳理了一下，之前我在项目中尝试过的动效，给大家分享下一些案例，希望可以对大家有所启发。
学习用什么工具导出什么格式的文件只是第一步，更重要的还是如何制造出一个有创意的动效，因此不要过于强调工具，更多应该培养自己思考设计的习惯。
文章来源：优设 作者：ID设计站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com