AEJoy —— 表达式之无缝循环摆/扭动【JS】

效果图

通过一点数学技巧，我们可以让 wiggle() 无缝循环

白色物体的循环路径是通过混合蓝色和红色物体的路径创建的

想法

毫无疑问，wiggle() 是为项目添加随机性的一种非常方便和通用的工具。有时候，如果能够让摆动运动循环起来，那将是非常有用的。在这里，我们将通过使用一些巧妙的数学运算和利用一个很少使用的 wiggle() 参数来实现这一点。

设计

假设我们想要创建一个三秒的摆动循环。可视化一个图表，显示我们的图层从时间 0 到 3 秒随机移动的路径。如果你看上方第二幅动图，你会看到蓝点描绘出的路径。它从左下角开始，三秒钟后在右边缘的中间附近结束。然后重复。

现在检查红点所描绘的路径。注意，它从右边缘附近开始，但在左下角结束-正是蓝点开始的地方。这听起来很巧合，对吧? 这里有一个小技巧这是让这一切顺利的关键。事实证明，红点和蓝点实际上是在追踪同一条随机的摆动路径。关键在于红点追踪的是时间零点之前的三秒路径。

让我们好好想想。红点正在追踪从 -3 秒到 0 秒之间的路径。蓝点在追踪 0 到 +3 秒之间发生的部分。我们可以通过使用很少使用的 wiggle() 的第五个参数 —— 负 time 来访问 wiggle() 的这些

AEJoy —— 表达式之无缝循环摆/扭动【JS】相关推荐

AEJoy —— 表达式之模拟弹簧【JS】
效果图一层链接一层,就像用一根松紧带连接起来一样想法那些使用 After Effects 足够长时间并记得 Motion Math 的人可能还记得一个非常酷的脚本 spring.mm .这个脚本 ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
表达式和返回值（JS）
表达式和返回值(JS) <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
AEJoy ——表达式之彩色文字尾随特效【JS】
效果图彩色尾随的效果加了马赛克的效果步骤一建立空对象制作基础动画,添加滑块控制器步骤二输入你想要的的文字(比如, AEJoy),并点击在位置属性 "秒表"图标,添加表达 ...
AEJoy —— 表达式之闪烁光标的打字机效果（二）【JS】
效果图打字机效果之红色闪烁的鼠标光标一旦您知道在哪里添加表达式,为键入动画的光标添加颜色实际上是很容易的. 演示的打字机动画与闪烁的彩色光标下面下面我创建了 4 种方法来学习这个 After E ...
AEJoy —— 表达式之自动对焦【JS】
效果图使用从相机到目标的距离来建立焦距,导致层在离轴时失焦使用从相机到目标层的距离到相机的 z 轴上的投影,保持层在焦平面上想法这里的想法很简单.我们希望能够在场景中使用一个对象(图层,N ...
AEJoy —— 表达式之速度和频率控制（七）【JS】
效果图线性关键帧积分表达式被用于将时间重映射的镜头提前,以跟随音频轨道的节拍其他应用程序事实证明,线性关键帧积分器在除了速度和频率控制以外的事情上也可以非常方便.例如,当你将音频转换为关键帧时, ...
AEJoy —— 表达式之模拟超越与反弹（四）【JS】
效果图超越表达式已应用于关键帧 X 旋转属性超越表达式被应用到关键帧的位置属性深入超越(Overshoot) 关键帧超越(Overshoot) 也许一个更常见的超越应用程序是在关键帧动画中添加超 ...
AEJoy —— 表达式之模拟超越与反弹（二）【JS】
效果图超越动画的振幅与传入动画的速度相匹配深入超越(Overshoot) 看一下指数衰减正弦波的基本表达式: amp = 80; freq = 1; decay = 1;t = time - in ...

AEJoy —— 表达式之无缝循环摆/扭动【JS】

效果图

想法

设计

AEJoy —— 表达式之无缝循环摆/扭动【JS】相关推荐

最新文章

热门文章