0
0

AfterEffects expression よく使うものまとめ

Posted at

いいものがあれば追記していきます。

Adobe Expressionの詳細はこちら

有志作のリファレンスページ

数値系

16:9画面内で16:9画像をはみ出さないように回転させるときの倍率

1080pの画面内で1080pの素材を回転するときなど

203.972886119 %

ちなみに逆数は
49.026123963 %

算出方法
image.png

ぼよよん推移

0.0…1.0の推移をぼよよんとする関数。

ぼよよん推移
// _time: 時間(推移スタートが0), _transitionDuration: 何秒かけて推移するか
let rate = Math.min(1, _time / _transitionDuration ));
rate==0? 0: rate==1? 1: Math.pow(2, -8 * rate) * Math.sin((rate * 6 - 0.75) * ((2 * Math.PI)/3)) + 1;

反動で1.28くらいまでいくので注意。

image.png

このサイトにいろんなイージイーズのjs関数も書いてあって便利すぎる。
https://easings.net/ja#

positionのlerp

意外と標準装備されてない。

positionのlerp
add(_pos2, mul(sub(_pos1, _pos2), _rate))

_pos2(_rateが1のときのposition)から書き始めることに注意。
rateは0.0…1.0だが、それを超えた値でも正常に動きます。
それが嫌なら事前にclampしといてください。

ちなみに浮動小数のclampも無いので置いとくね。

数字のclamp

浮動小数のclamp
Math.min(1, Math.max(0, _rate))

minの直後に最大値、maxの後に最小値を書くので注意。

キーフレーム系

現在時間の直前のキーフレームを取得する

デフォルトでは、「nearestKey(time)」(一番近くのキーを取得)しか無いので、取得したキーが現在時間の後ろだったら1個前のキーを参照するようにした。

指定時間の直前のキーフレームを取得する
let checkEffect = thisComp.layer("レイヤー").effect("*エフェクト*");
let lastKey = (checkEffect.nearestKey(time).time > time)? checkEffect.key(checkEffect.nearestKey(time).index-1): checkEffect.nearestKey(time);

発展形

直前のキーフレームからの経過秒数を取得する。

指定時間の直前のキーフレームを取得する
let checkEffect = thisComp.layer("レイヤー").effect("*エフェクト*");
let lastKey = (checkEffect.nearestKey(time).time > time)? checkEffect.key(checkEffect.nearestKey(time).index-1): checkEffect.nearestKey(time);
let timeFromLastKey = time - lastKey.time;

動画レイヤー系

動画をいい感じにループする

動画の、時間制御を有効にして、いい感じにループする。
レイヤーの長さの最初と最後がつながるように、一番速度変化が少なくなるように繰り返す。

タイムリマップ : 動画をいい感じにループする
let src_d = source.duration;
let layer_d = outPoint - inPoint;
let speed = src_d / (layer_d / Math.max(1, Math.round(layer_d/src_d)));
(time * speed) % src_d

おまけ

テキストエディタでキーフレームを作って貼付けする

キーフレームをコピーしてメモ帳にペーストすると以下が取得できる。
※タブ区切りのテーブル形式データなので、スペースに置換されないように注意!

Adobe After Effects 8.0 Keyframe Data

	Units Per Second	30
	Source Width	1082
	Source Height	1594
	Source Pixel Aspect Ratio	1
	Comp Pixel Aspect Ratio	1

ADBE Layer Overrides	Pseudo/@@OugYOmhGQIOl48G2UifXZA-0001 #2
	Frame		
	0	1	
	352	7	
	602	9	


End of Keyframe Data

つまり、テキストエディタで一斉置換したり、はたまた別のプログラムから生成することができるのだ。

ちなみに、Units Per Second ...から、...Comp Pixel Aspect Ratio 1までは無くても貼り付けできるが、想定フレームレートが変わって、微妙なフレームにキーが生成されてずれていく可能性も。
(30fpsのコンポジションに29.97fps計算で配置されるなど)

SVGで作ったネームタグに大量の名前を複製する

SVGで作ったネームタグに大量の名前を複製する
anchorElem = document.getElementsByTagName('g')[0];
offsetY = 50;

boothList = [
    {index:"1" ,name:"XXXXXXXX"},
    {index:"2" ,name:"XXXXXXXX"},
    {index:"3" ,name:"XXXXXXXX"},
    // ......
];

boothList.forEach((v,i)=>{
    let elem = document.createElementNS('http://www.w3.org/2000/svg','g');
    elem.innerHTML = anchorElem.innerHTML;
    [...elem.children].forEach(vv=>{
        if (vv.hasAttribute('y')) vv.setAttributeNS(null, 'y', vv.getAttribute('y')-0 + offsetY*(i+1));
        else if (vv.hasAttribute('transform')) {
            let y = vv.getAttribute('transform').match(/[\d\.]+/g)[1];
            vv.setAttributeNS(null, 'transform', vv.getAttribute('transform').replace(/\s[\d\.]+\)/, ` ${y-0 + offsetY*(i+1)})`))
        }
    });
    [...elem.getElementsByTagName('tspan')].forEach((vv,ii)=>{
        if (ii==0) {
            vv.innerHTML = (v.name.trim().replace(/&/g, '&'));
        }
        if (ii==1) {
            vv.innerHTML = (v.index.trim());
        }
    });
    document.getElementsByTagName('svg')[0].appendChild(elem);
})

グループ化したネームデザインを1つ用意し、そのSVGをブラウザで開いた状態でこのスクリプトを動かす。
目録とか作るのに便利。
僕はこれで150項目くらいのタグを生成しました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0