187、AE脚本-控制关键帧的变化曲线（二）

运营营销 2023-1-30 19:49 6445人围观脚本

上次分享，指导启发你自己写一个控制关键帧的缓动值函数。此次呢，我供给一个自界说贝塞尔曲线函数给你。然后我们试着写一个随机变化曲线函数，竣事这一系列的分享。

先看一下原始数据结构：

{
"Curves": [
{
"name": "Smooth Operator",
"curve": [
0.64,
0.03,
0.07,
0.97
]
},
{
"name": "Endless Bummer",
"curve": [
0.99,
0.03,
0.42,
0.97
]
},
{
"name": "Get Around",
"curve": [
1,
0.07,
0.11,
1
]
},
{
"name": "Unknown soldier",
"curve": [
0.33,
0.02,
0.11,
1
]
},
{
"name": "Spanish caravan",
"curve": [
0.76,
0,
0.43,
0.94
]
},
{
"name": "Five to one",
"curve": [
0.32,
0.05,
0.27,
1
]
},
{
"name": "Wild in the streets",
"curve": [
0.5,
1,
0.35,
1
]
},
{
"name": "Daniel",
"curve": [
0,
0.1,
0.53,
1.34
]
},
{
"name": "Crocodile tears",
"curve": [
0.47,
1.35,
0.53,
1.33
]
},
{
"name": "Crystal ship",
"curve": [
0.99,
-0.55,
0.73,
1
]
},
{
"name": "10CC",
"curve": [
0.14,
-0.14,
0,
1
]
},
{
"name": "Bishop",
"curve": [
1,
-0.66,
0.42,
0.97
]
},
{
"name": "Scarborough Fair",
"curve": [
1,
0.06,
0.73,
0.98
]
},
{
"name": "Tulsa time",
"curve": [
0.19,
2.51,
0.43,
1
]
},
{
"name": "Norwegian skog",
"curve": [
0.25,
0.51,
0.35,
0.95
]
},
{
"name": "Weird fishes",
"curve": [
0.88,
0.04,
0.88,
0.95
]
},
{
"name": "Brave strangers",
"curve": [
0,
0.01,
0,
1
]
},
{
"name": "Stranger than diction",
"curve": [
1,
0,
0.74,
1
]
},
{
"name": "The gambler",
"curve": [
0.47,
-0.48,
0,
1.03
]
},
{
"name": "Cracklin' rose",
"curve": [
0.05,
0.03,
0,
1.16
]
},
{
"name": "Standard",
"curve": [
0.4,
0,
0.2,
1
]
},
{
"name": "Deceleration",
"curve": [
0,
0,
0.2,
1
]
},
{
"name": "Acceleration",
"curve": [
0.4,
0,
1,
1
]
},
{
"name": "Sharp",
"curve": [
0.4,
0,
0.6,
1
]
},
{
"name": "50-50",
"curve": [
0.5,
0,
0.5,
1
]
},
{
"name": "0-70",
"curve": [
0,
0,
0.3,
1
]
},
{
"name": "0-80",
"curve": [
0,
0,
0.2,
1
]
},
{
"name": "0-90",
"curve": [
0,
0,
0.1,
1
]
},
{
"name": "0-100",
"curve": [
0,
0,
0,
1
]
},
{
"name": "60-60",
"curve": [
0.6,
0,
0.4,
1
]
},
{
"name": "70-70",
"curve": [
0.7,
0,
0.3,
1
]
},
{
"name": "80-80",
"curve": [
0.8,
0,
0.2,
1
]
},
{
"name": "90-90",
"curve": [
0.9,
0,
0.1,
1
]
},
{
"name": "100-100",
"curve": [
1,
0,
0,
1
]
},
{
"name": "50-90",
"curve": [
0.5,
0,
0.1,
1
]
},
{
"name": "50-80",
"curve": [
0.5,
0,
0.2,
1
]
},
{
"name": "10%",
"curve": [
0.1,
0,
0.9,
1
]
},
{
"name": "20%",
"curve": [
0.2,
0,
0.8,
1
]
},
{
"name": "30%",
"curve": [
0.3,
0,
0.7,
1
]
},
{
"name": "40%",
"curve": [
0.4,
0,
0.6,
1
]
},
{
"name": "50%",
"curve": [
0.5,
0,
0.5,
1
]
},
{
"name": "60%",
"curve": [
0.6,
0,
0.4,
1
]
},
{
"name": "70%",
"curve": [
0.7,
0,
0.3,
1
]
},
{
"name": "80%",
"curve": [
0.8,
0,
0.2,
1
]
},
{
"name": "90%",
"curve": [
0.9,
0,
0.1,
1
]
},
{
"name": "100%",
"curve": [
1,
0,
0,
1
]
},
{
"name": "back",
"curve": [
0.68,
-0.55,
0.27,
1.55
]
},
{
"name": "circ",
"curve": [
0.88,
0.14,
0.12,
0.86
]
},
{
"name": "cubic",
"curve": [
0.66,
0,
0.34,
1
]
},
{
"name": "ease",
"curve": [
0.42,
0,
0.58,
1
]
},
{
"name": "expo",
"curve": [
0.9,
0,
0.1,
1
]
},
{
"name": "linear",
"curve": [
0,
0,
1,
1
]
},
{
"name": "quad",
"curve": [
0.48,
0.04,
0.52,
0.96
]
},
{
"name": "quart",
"curve": [
0.76,
0,
0.24,
1
]
},
{
"name": "quint",
"curve": [
0.84,
0,
0.16,
1
]
},
{
"name": "pause",
"curve": [
0,
1,
1,
0
]
},
{
"name": "fs",
"curve": [
0,
0.45,
0.45,
1
]
},
{
"name": "ffs",
"curve": [
0,
0.9,
0.45,
1
]
},
{
"name": "fss",
"curve": [
0,
0.45,
0.1,
1
]
},
{
"name": "sf",
"curve": [
0.45,
0,
1,
0.45
]
},
{
"name": "sff",
"curve": [
0.45,
0,
1,
0.15
]
},
{
"name": "ssf",
"curve": [
0.9,
0,
1,
0.45
]
},
{
"name": "Ant S1",
"curve": [
1,
-0.51,
0,
1.51
]
},
{
"name": "Ant S2",
"curve": [
0.99,
-2.18,
0.01,
3.18
]
},
{
"name": "Ant Q1",
"curve": [
0.5,
-1,
0.5,
2
]
},
{
"name": "Ant Q2",
"curve": [
0.5,
-1.5,
0.5,
2.5
]
},
{
"name": "scale in",
"curve": [
1,
0,
0.73,
0.98
]
},
{
"name": "circle burst",
"curve": [
0.8,
0,
0.73,
0.98
]
},
{
"name": "path_end",
"curve": [
0.17,
0.17,
0,
1
]
},
{
"name": "Y_Rotation",
"curve": [
0,
0.1,
0,
1
]
},
{
"name": "rotate-left",
"curve": [
0.455,
0.03,
0.515,
0.955
]
}
]
}

然后供给一个自界说贝塞尔曲线函数给你。

我们面临的题目，就是按照供给给你的数据结构，机关一个方式，从数据里随机取一项，放入到自界说贝塞尔函数曲线参数的最初一项，它的数据范例应当是一个数组。

然后把此机关好的函数，转换为字符串，也即表达式。指定给你确当前挑选属性。

就这么点事，先看终极结果：

挺好玩的吧，但这个功用仅限于你测试，现实工作中这么玩，设备一个曲线跟开盲盒一样，估量能把你逼疯。

然后给出这个功用的代码：

//当前所选属性
var prop = $.getProp();
//读取桌面上Json文件
var curves = $.readJson(new File($.desktop("Curves.json")));
//从文件中Curves数组里随机取一项，这一项是个工具，挑选此工具curve键下的值，这个值是个数组，转换为字符串
var bezier = (((curves.Curves).randomValue()).curve).toString();
//机关表达式内容，牢记上一项是个字符串，需要机关成数组，前面加[]
var expString = "/* ---------- Flow Function Declarations ---------- */\r\nfunction customBezier(t,tMin,tMax,value1,value2,bezierPoints){if(arguments.length!==6)return value;var a=value2-value1;var b=tMax-tMin;var c=clamp((t-tMin)/b,0,1);if(!(bezierPoints instanceof Array)||bezierPoints.length!==4)bezierPoints=[0,0,1,1];return a*h(c,bezierPoints)+value1;function h(f,g){var x=3*g[0];var j=3*(g[2]-g[0])-x;var k=1-x-j;var l=3*g[1];var m=3*(g[3]-g[1])-l;var n=1-l-m;var d=f;for(var i=0;i<5;i++){var z=d*(x+d*(j+d*k))-f;if(Math.abs(z)<1e-3)break;d-=z/(x+d*(2*j+3*k*d));}return d*(l+d*(m+d*n));}}\r\n/* ---------- Flow Function Declarations ---------- */\r\n/* ---------- Flow Expression Template ------------ */\r\nvar animationStartTime = 1;\r\nvar animationEndTime = 2;\r\nvar startValue = value;\r\nvar endValue = value * 2;\r\nif (numKeys > 0) {\r\n\tvar nearestKeyIndex = nearestKey(time).index;\r\n\tif (key(nearestKeyIndex).time > time) nearestKeyIndex--;\r\n\tif (nearestKeyIndex === 0 || nearestKeyIndex === numKeys) {\r\n\t\tstartValue = endValue = value;\r\n\t} else {\r\n\t\tanimationStartTime = key(nearestKeyIndex).time;\r\n\t\tanimationEndTime = key(nearestKeyIndex + 1).time;\r\n\t\tstartValue = key(nearestKeyIndex).value;\r\n\t\tendValue = key(nearestKeyIndex + 1).value;\r\n\t}\r\n}\r\ncustomBezier(time, animationStartTime, animationEndTime, startValue, endValue, [" + bezier + "])";
try {
if (prop.canSetExpression) {
prop.expression = expString;
}
} catch (error) {

}

数组中随机取一项的方式：

// 数组中随机取一个值
if (!Array.prototype.randomValue) {
Array.prototype.randomValue = function () {
var len = this.length
return this[(Math.floor(Math.random() * len))]
}
}

就这样，以上就是本次分享的全数内容，感激您的耐心阅读，我们下次分享再会。