动效设计实现烟花效果

难寻875

已于 2023-12-12 20:50:55 修改

阅读量505

点赞数 11

文章标签：动画

于 2023-12-12 20:45:14 首次发布

本文链接：https://blog.csdn.net/weixin_73974279/article/details/134958366

版权

动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计与动态设计的结合。

而在Material design 设计规范中，将动效设计这一章命名为「Animation」，意思是动画，活泼的意思。好的动效设计可以帮助引导、取悦用户，减少等待焦虑，是拉近用户与产品之间距离的有效手段。

此类动效一般用于产品设计，通过动态图形向用户传递信息，其中加载/刷新和进度条应该是我们平时接触最多也是最早的动效了，此类动效最开始只是为了告知用户产品的页面状态。随着社会上产品数量的快速增长以及竞争日益激烈，产品的有趣和差异化显得愈发重要，于是便看到越来越多的产品将自己的品牌因素融入动效当中，设计也越来越生动有趣。

除了加载、刷新和进度外，功能型动效还被广泛的运用在产品的其他各种状态当中，如信息报错、二维码扫描等。虽然具体表现不同，但都是通过动态形式帮助用户理解和使用产品。

2. 交互型动效

顾名思义，该类动效的核心是“交互”，其主要的作用是帮助用户理解界面的层级逻辑关系，让产品的使用更加符合现实生活中的认知习惯，从而降低使用成本，提升产品体验。

要注意的是此类动效不能脱离用户的认知模型，只是单纯的炫酷对于整个产品来说是有害的。

其实交互型动效是用户在产品使用中接触最多的一种动效，因为产品的使用是通过不同产品元素串联而完成的，而负责元素串联的就是交互型动效。

一般可分为「单页面交互动效」和「多页面交互动效」。

「单页面交互动效」：就是在当前页面发生的交互动画，比如tab切换、左滑删除、二级菜单展开、返回顶部等等。

「多页面交互动效」：就是不同页面之间的交互动画，其实就是页面的跳转，根据不同的场景会使用到不同的跳转样式，好的跳转动画能够帮助用户理解前后页面的逻辑关系。

3. 展示型动效

此类动效的最大作用就是尽可能的为用户制造视觉上的愉悦，营造活动氛围，让用户觉得有趣生动，使用的场景也十分广泛，常见的如「品牌展示」、「运营活动」、「H5营销」等。

运营活动

动效设计同样也可以使用在运营设计中，作为业务数据转化的重要入口，动效可以极大的吸引用户的注意力，从而提升业务数据。

H5营销

从2014年开始，H5因其丰富的表现形式便开始逐渐走红，每年都会有很多火遍全网的H5活动，如「网易云音乐听歌报告」、「支付宝集五福」、「支付宝年度账单」、「穿越故宫来看你」等等。

动效设计是一门非常重要的设计领域，它可以让设计作品更加生动、有趣、有感染力。以下是一些动效设计的心得：

简洁明了：动效设计应该尽可能地简洁明了，不要过于复杂，否则会让人感到混乱。

弹性让运动更自然：引用中提到的弹性是非常重要的，它可以让运动更加自然，让人感到柔和的美感。

注意节奏：动效设计中的节奏非常重要，它可以让设计作品更加有节奏感，让人感到舒适。

色彩搭配：色彩搭配也是动效设计中非常重要的一部分，它可以让设计作品更加生动、有趣。

创新：动效设计需要不断地创新，不断地尝试新的设计方法和技巧，才能让设计作品更加出色。

动效设计是一门非常重要的设计领域，它可以让设计作品更加生动、有趣、有感染力。以下是一些动效设计的心得：

简洁明了：动效设计应该尽可能地简洁明了，不要过于复杂，否则会让人感到混乱。
弹性让运动更自然：引用中提到的弹性是非常重要的，它可以让运动更加自然，让人感到柔和的美感。
注意节奏：动效设计中的节奏非常重要，它可以让设计作品更加有节奏感，让人感到舒适。
色彩搭配：色彩搭配也是动效设计中非常重要的一部分，它可以让设计作品更加生动、有趣。
创新：动效设计需要不断地创新，不断地尝试新的设计方法和技巧，才能让设计作品更加出色。

以下是一个简单的动效设计示例：

在After Effects中创建一个文本图层，然后添加一个“位置”关键帧，将文本图层移动到屏幕左侧。接着，添加一个“缩放”关键帧，将文本图层缩小到0。然后，再添加一个“位置”关键帧，将文本图层移动到屏幕右侧。最后，再添加一个“缩放”关键帧，将文本图层放大到原来的大小。这样就完成了一个简单的动效设计。

这门课程让我们学会了如何使用父子级链接：首先父子链接是对所有属性都是用的，如果我们将一个图层的父子级链接到另外一个图层上，那么子级就会跟着作为父级的那个图层的变化而变化。选中两个图层，按下s键打开缩放属性，我们在调整蓝色圆的缩放的时候可以同时看到红色圆的大小也跟着变化了，反过来我们单独设置红色这个子级自己的属性值时作为父级的蓝色圆是不会跟着变化的，从而我们可以知道，父子级的关系是不可逆转的，子级会跟着父级的关系是不可逆的，子级会跟着父级的关系是不可逆的，子级会跟着父级的变化而变化，反过来子级发生变化父级是不会跟着一起变化的。随便打开一个属性，然后点击属性前面的小钟表的同时按住ALT键这样可以打开表达方式，这个时候我们就可以直接通过关联器（螺旋线）拉取关联线从而确定父子级关系，我们可以通过点击表达式前面的等于号来开启和取消父子级关系。

MG动画的制作方法：一、重要的加速在mg动画中，通常要拒绝匀速运动。匀速运动在现实生活中并不多见，相反，我们生活的世界到处都是力的互相作用，因此几乎所有的运动都有加速度，速度都是在变化的。因此，请让运动的图形远离匀速运动，这是最基础的。

二、弹性让运动的图形具有弹性，几乎所有优秀的mg作品都会用到的tips之一。这样的运动让你感觉到柔和的美感，而不是突兀的骤然停止。

三、延迟（惯性）物理世界中，有重要的东西就具有惯性。而在mg动画里，我们经常利用惯性或延迟来丰富运动图形的运动。例如拖尾运动。

四、随机随机，物理世界中的群体最常见存在的一种形态。无论是位置、大小、角度、运动，随机给人目不暇而非千篇一律的感觉，有利于丰富画面。

接下来，我们来制作烟花效果

.打开我们电脑上的AE，新建一个固态层，之后点击上方工具栏中的【效果】，在弹出的列表中点击【模拟仿真】，之后在右侧列表中点击【CC粒子仿真世界】然后我们拖动时间轴就可以看到烟花效果，其他一些细节的调整我们可以在左侧的控制面板中完成。