AEJoy —— 表达式之如何制作滑块控制效果【JS】

最新推荐文章于 2025-03-26 19:18:00 发布
最新推荐文章于 2025-03-26 19:18:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： AEJoy ——  设计与技术的结合 Code&Art 文章标签： javascript AE After Effect
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/panda1234lee/article/details/121593635
版权
本文介绍了如何使用JavaScript在After Effect中创建滑动控制效果，包括新建合成、设置控制器和编写表达式。通过创建预设，可以方便地在不同项目中复用这些表达式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图

123333.gif

设计思路

很简单，一共分三步

1. 新建合成并排版

导入制作（分层）好的美术素材

image.png

加入合成并调整好各个图层的位置（可以利用右侧的对齐工具进行辅助）和尺寸（初始大小都是 100%）

image.png

2. 新建空对象作为控制器

为空对象添加滑动条控件

image.png

设置滑动条的范围（本例有 9 个图层，所

了解本专栏 订阅专栏 解锁全文
AEJoy —— 值得收藏的常用 29 个 AE 表达式实例
ShaderJoy 的兴趣技术杂货铺
09-14 6231
1] Numbers: Add a slider and name to 'Value' places = 3; //number of decimal places desired val = effect("Value")("Slider"); //sub in the name of your slider here factor = Math.pow(0.1, places) ; sign = ""; if (val < 0) sign = "-"; val = Math.abs(...
AEJoy —— 表达式之基础音频动画【JS】
ShaderJoy 的兴趣技术杂货铺
11-05 1274
效果图 想法 为了更好地利用音频和表达式控制动画，我们将着眼于一些简单的内容。我们在这里所要做的就是拉伸一个层以响应音频信号的振幅。 设计 由于表达式不能直接访问音频数据，我们必须添加一个中间步骤。我们首先必须选择我们的音频层和使用关键帧助手 -> 转换音频到关键帧。 这将创建一个名为 “音频振幅”(Audio Amplitude) 的新层。如果原图层的音频是立体声的，新图层将应用三个表达式控制滑块: “左通道”，“右通道” 和 “双通道”。在每个滑块的每一帧，将创建一个代表音频振幅的关键帧。下图
Ae 效果详解：滑块控制
最新发布
qq_41176800的博客
03-26 473
比如，“滑块”值设为 200，表示图层初始弹跳 200 像素，然后随时间衰减。常用于控制透明度、运动速度、弹跳幅度等，提高动画的可调整性和自动化程度。比如，“滑块”值设为 30，则图层每秒旋转 30 度；如果设为负值，则反向旋转。为图层的“位置”属性添加表达式，让“滑块”值决定图层弹跳的幅度，使对象上下弹跳。比如，“滑块”值从 0 到 100，对应图层不透明度 0% 到 100%。一个可调整的数值控件，用户可以通过滑块修改数值，并在表达式中引用该数值。控制图层的“旋转”速度，每秒旋转“滑块”属性值（度）。
Ae 效果快速参考：表达式控制
qq_41176800的博客
01-13 3122
表达式控制Expression Controls下拉菜单控件Dropdown Menu Control通过下拉菜单的子菜单项来控制表达式。//文本图层的源文本属性表达式a = thisC...
ae万能弹性表达式_AE实用表达式整理及表达式合集脚本
weixin_39570530的博客
11-27 5005
表达式是AE中非常好用的工具，它可以帮助我们节省大量的制作时间。如果你对表达式掌握的比较好，那么很多看似复杂、繁琐的效果，利用表达式都可以轻松的实现。但是表达式的学习是有一定门槛的，简单的运用还好，一旦涉及到复杂点的运用，就对数学能力、逻辑能力有一定的要求了。为此，我整理了一些工作中常用、实用的表达式效果。无需理解背后的语义，只要直接套用即可。并且已经将它们集成进了我编写的“常用表达式合集”脚本中...
较简单的滑动验证破解
qq_38250124的博客
12-18 2072
from https://blog.youkuaiyun.com/chenxiao17301/article/details/82911155   一、新旧版对比 以前的滑动验证码可以得到原背景图和有缺口的背景图，两图比较，就可以计算出需要滑动的距离。 新版的验证码，没有背景图片作参考，一点开就是带有缺口的图片，那么，我们怎么计算需要滑动的距离呢？ 二、解析过程      在检查页面源码时怀疑滑块...
AEJoy —— 表达式之速度和频率控制（四）【JS】
ShaderJoy 的兴趣技术杂货铺
11-25 1214
线性关键帧积分器 定格（Hold）关键帧 可能在某些情况下，你宁愿使用定格关键帧来控制速度控件滑块。线性关键帧积分器表达式几乎是可行的，但并不完全可行。这里有一个微小的变化，使其适用于定格关键帧: spd = effect("Slider Control")("Slider"); n = spd.numKeys; if (n > 0 && spd.key(1).time < time){ accum = spd.key(1).value*(spd.key(1).time -
AEJoy —— 表达式之速度和频率控制（二）【JS】
ShaderJoy 的兴趣技术杂货铺
11-25 1164
理解产生问题的原因 学习如何解决问题的第一步是理解为什么显而易见的解决方案不起作用。问题的根源在于表达式没有记忆。在前面的示例中，表达式在每一帧检索速度控制滑块的当前值，并使用该值来计算当前旋转 —— 而不考虑滑块的以前值。如果滑块一直在它的当前值，结果(对于每一帧)是相同的。所以当滑块最终返回 0 时（例如，表达式将总旋转计算为 0），这显然不是我们想要的。我们的表达式需要计算由于滑块的所有先前值的累积旋转。然后，当滑块返回 0 时，表达式将计算旋转的总角度，而不是本身返回 0 。现在我们有了一个计划，但
AEJoy —— 表达式之速度和频率控制（三）【JS】
ShaderJoy 的兴趣技术杂货铺
11-25 1068
效果图 通过计算滑块控件曲线下的面积得到了很大的改进 线性关键帧积分器 这很有趣，但现在怎么办? 我们需要一个表达式来计算过去发生的所有曲线段的面积加上当前段的面积，直到当前时间。例如(使用之前的Slider Control 动画)，在两秒钟内，我们期望表达式计算第一个片段(180 度)的面积加上第二个片段(360 度)的一半面积，到那时总共是 540 度。这里有一个表达可以完成这项工作: spd = effect("Slider Control")("Slider"); n = spd.numKeys;
html5 文字滑动效果,jQuery滑动文字特效
weixin_29215391的博客
06-03 457
这是一个很简单的jQuery滑动文字效果。插件中使用了 Lettering.js，你可以在 Github 上找到它。HTMLIllustrations使用data-hover来表示鼠标滑过的元素。CSS.sl_examples{float:left;font-family: 'Bevan', arial, serif;font-size:50px;line-height:50px;color:#f...
AEJoy —— 详解 AE 如何将 png 序列帧导出为 SVGA 动画文件
热门推荐
ShaderJoy 的兴趣技术杂货铺
09-02 2万+
1.导入 png 序列帧至AE 从菜单栏“导入” -> “文件”，选择存放序列帧的文件夹 然后导入，接着看到如下界面，直接确定。 此时，窗口中就显示了我们所导入的所有序列帧，如下所示 2. 对序列帧进行裁剪【关键】 我们刚导入的序列帧默认是占据了整个时间线的 所以我们需要手动对它进行截取，windows 上的快捷键是 alt + [ 和 alt + ] 来分别进行前后的裁剪。 裁剪的结果如下所示，这里我们只保留一帧的时间。 3.将序列帧进行错位 ...
AEJoy —— 彻底搞懂 AE 各种 loop* 表达式【一】
ShaderJoy 的兴趣技术杂货铺
09-10 1万+
通过阅读本文，您将收获以下知识点loopInloopOut以及它们各自在不同type和duration下的区别；本文默认您已经具备了 AE 中关键帧（KeyFrame）的基础概念，并且以下的演示都是基于 4 个关键帧（依次从左到右）小车，如下所示4 个关键帧，当前小车处在第三个关键帧的 Position我们先从比较简单loopOut开始（loopIn的思维稍稍有点反人类，但是转过弯来就容易理解了）
AEJoy —— 如何让你的 AE 插件 适应每通道 8,16,32 位颜色
ShaderJoy 的兴趣技术杂货铺
11-24 4240
在前一篇文章 AEJoy —— 开发第一个 After Effects 插件（一） 中，我实现了一个简单的 After Effects 插件。本文是对它的补充。 什么是颜色（位）深度 在计算机中，颜色被表示为数字。在 RGB 颜色系统中，颜色表示为 (R, G, B)，如 (100,120,144) 或(0.5,0.2,0.7)。在灰度模式下，颜色表示为一个值，例如从 0 到 255 的整数或从 0.0 到 1.0 的浮点数。 颜色位深度是每个值的分辨率。当颜色为每个通道 8 bpc(每通道位)，R/G/B
AEJoy —— Duik （MG 动画插件）极简入门
ShaderJoy 的兴趣技术杂货铺
08-06 4103
我们知道，After Effects 是视频编辑软件，同时也是动画制作软件。在这个软件中，我们可以在一些插件的帮助下制作一些给人印象深刻的动画。Duik 是一个插件，有助于任何角色设计的装配，以制作出该角色最好的动画，并提供了一些预先设计的运动部分来辅助使用。这里我们将在这个软件中使用 Duik 插件制作一个动画，并分析 Duik 插件的参数，以便我们更好的理解这个主题。 如何在 AE 中使用 Duik Duik 是让我们更加方便操作 AE 的一个插件。我们将逐步了解 Duik 插件。在开始我们的学习之前.
AEJoy —— 彻底搞懂 AE 各种 loop* 表达式【二】
ShaderJoy 的兴趣技术杂货铺
09-10 3343
在前一篇文章《AEJoy —— 彻底搞懂 AE 各种 loop* 表达式【一】》，我们讲解了 loopIn/loopOut 在不同 numKeyframes 的情况下的一些区别，但是 type 类型都是默认的 cycle，那么这篇文章则来辨析一下它们在不同 type 下会产生哪些变化。 首先，我们来看一下 type 支持的几种类型的定义 cycle(默认) 简单重复特定的关键帧片段 pingpong 前后往复地重复指定的关键帧片段 offset 重复特定的关键帧片段，但每.
AEJoy —— 彻底搞懂 AE 各种 loop* 表达式【三】
ShaderJoy 的兴趣技术杂货铺
09-11 3000
继之前的这两篇文章 ——《AEJoy —— 彻底搞懂 AE 各种 loop* 表达式【一】》《AEJoy —— 彻底搞懂 AE 各种 loop* 表达式【二】》挖了坑之后，还剩两个表达式没介绍，那么这篇就负责把它们给填上。 loopInDuration(type,duration) loopOutDuration(type,duration) loopOut 1. cycle duraiton = 0 从上图可知，小车每次都从第一帧的位置开始运动到最后一帧，同时速度也是从头...
AEJoy —— 三分钟了解 AE 相关的颜色空间和颜色管理
ShaderJoy 的兴趣技术杂货铺
11-25 2844
目标 了解色彩空间和色彩管理器 什么是颜色管理器 色彩管理器(又称 “色彩管理系统” 或 “色彩管理解决方案” )是一种改变图像和视频的色彩空间的应用程序。 在视觉特效制作中，许多颜色空间是根据数码电影相机、渲染 CG 、照片和哑光涂料等工具使用的。色彩空间的统一或转换是必要的。色彩空间转换是视觉特效制作中的一个重要过程。 什么是颜色空间 颜色空间是一种特定的颜色组织，其中颜色被表示为坐标。 颜色模型 颜色模型是用一些通道(如RGB、CMYK)描述颜色的抽象数学模型。虽然颜色模型和颜色空间不是一回事，但一些
AEJoy —— 表达式之闪烁光标的打字机效果（一）【JS】
ShaderJoy 的兴趣技术杂货铺
12-02 2582
效果图 前言 在任何视频和运动图形项目中，您可能需要弄清楚如何使用光标制作一个打字机文本动画。你可能会惊讶地发现，这并不像看上去那么容易。出于这个原因，我决定写这个博客，这样就没有人需要花几个小时在 After Effects 中制作一个打字动画了。 在这篇文章中，我将向你展示多种方法来制作有闪烁光标和没有闪烁光标的打字机效果动画????。 基础-打字机效果预设 让我们从初学者的基础开始。这是在 AE 中创建不带光标的打字机效果的最简单和最快的方法。按照这些步骤 —— 只需要 20 秒。 创建一个新的合
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShaderJoy

您的打赏是我继续写博客的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值