Home About Blogs Products
2025-04-10

カスのPDCAサイクル

現状：頭では（作業しなきゃ……）と思いつつ実際は作業してないカスみたいな時間と謎の後ろめたさを抱えた意味不明な精神状態

続きを読む

2025-04-07

AEでテキスト下揃えアニメーション

ちょっと工夫が要るのでメモ。TypeAnimeJPを作ったときの知識が役に立った。

ソーステキストにエクスプレッションを追加

以下のテキストをアニメーションさせるとする。

ああああ
いいい
うう
ええええ
おおおおお

改行部分に「\n」を追加する。

ああああ\n
いいい\n
うう\n
ええええ\n
おおおおお

改行を無くして1行にする。

ああああ\nいいい\nうう\nええええ\nおおおおお

空のテキストレイヤーを作成し、ソーステキストに以下のエクスプレッションを書く。（text変数にさっきのテキストをぶち込む）

var text = "ああああ\nいいい\nうう\nええええ\nおおおおお";

スライダー制御エフェクトを追加して、その値を取得するエクスプレッションを追記。
Math.roundで整数値にまとめる。文字数を指定するための値なので。

var s = Math.round(effect("スライダー制御")("スライダー"));

slice関数でスライダー制御の値の文字数だけ表示されるようにする。

text.slice(0, s);

これでスライダー制御の値にキーフレームを打てばアニメーションするようになる。

アンカーポイントにエクスプレッションを追加

このままでは上揃えのままなので、下揃えにするためにアンカーポイントにエクスプレッションを追加していく。

sourceRectAtTimeでこのレイヤーの縦横のサイズを得る。
さっきわざわざテキストをエクスプレッション内に記述したのは、普通にテキストを書いてアニメーターの不透明度でアニメーションさせると、レイヤーのサイズが変化しないから。

ちなみに「time - thisLayer.startTime」がちょっと工夫ポイント。startTimeの説明がややこしいので意味は割愛。

var r = thisLayer.sourceRectAtTime(time - thisLayer.startTime, true);

レイヤーの縦横のサイズが取得できたので、その値を使って位置を補正。もともとのアンカーポイントの値にレイヤーの高さを追加するだけ。

[value[0], value[1] + r.height];

エクスプレッションまとめ

ソーステキスト

var text = "ああああ\nいいい\nうう\nええええ\nおおおおお";
var s = Math.round(effect("スライダー制御")("スライダー"));
text.slice(0, s);

アンカーポイント

var r = thisLayer.sourceRectAtTime(time - thisLayer.startTime, true);
[value[0], value[1] + r.height];
2025-01-09

長方形パスに対するパスのトリミングの挙動をエクスプレッションでいい感じに

https://twitter.com/ALINCO2020/status/1877327428147724429

パスのトリミングの終了点とオフセットをいじって実現。長方形のサイズを変更しても追従する。横方向と縦方向でエクスプレッションが違う。

横方向

↓終了点

var size = thisProperty.propertyGroup(1).propertyGroup(1)(1)(2); // 長方形パスのサイズを取得できればなんでもいい
var x = size[0];
var y = size[1];
var ratio = x / (x + y);
value * ratio + 100 * (1 - ratio) / 2;

↓オフセット

var end = thisProperty.propertyGroup(1)(2); // パスのトリミングの終了点を取得できればなんでもいい
var size = thisProperty.propertyGroup(1).propertyGroup(1)(1)(2); // 長方形パスのサイズを取得できればなんでもいい
var x = size[0];
var y = size[1];
var ratio = x / (x + y);
var trueEndValue = (end - 100 * (1 - ratio) / 2) / ratio;
-360 * trueEndValue / 100 / 2 * ratio;

縦方向

↓終了点

var size = thisProperty.propertyGroup(1).propertyGroup(1)(1)(2); // 長方形パスのサイズを取得できればなんでもいい
var x = size[0];
var y = size[1];
var ratio = 1 - (x / (x + y));
value * ratio + 100 * (1 - ratio) / 2;

↓オフセット

var end = thisProperty.propertyGroup(1)(2); // パスのトリミングの終了点を取得できればなんでもいい
var size = thisProperty.propertyGroup(1).propertyGroup(1)(1)(2); // 長方形パスのサイズを取得できればなんでもいい
var x = size[0];
var y = size[1];
var ratio = 1 - (x / (x + y));
var trueEndValue = (end - 100 * (1 - ratio) / 2) / ratio;
-360 * trueEndValue / 100 / 2 * ratio - 360 * (1 - ratio) / 2