Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

UIで放物運動!

この二つのエントリーをマージしました。

[After Effects]スクリプトで放物運動

[After Effects]User Interfaceを作る!(基礎)

UIで放物運動の初期値を設定すると、

Pola01

 

設定した値の放物運動を自動で生成します。

Pola02

 

わかりやすくするとこんなイメージ。

pola03

 

ソースはもうちょっと整理したい気はするもののとりあえずこんな感じです。

// ----------------------------------------------------------------------
// UIの生成
// ----------------------------------------------------------------------
var w =new Window ('dialog', 'Parabola');

w.alignChildren = "right";

// Frame var group1 = w.add ("group"); group1.add ("statictext", undefined, "Frame:"); //var slider_frame = group1.add ('slider {minValue: 0, maxValue: 120, value: 50}'); var slider_frame = group1.add ("slider", undefined, 24, 0, 120); var value_frame = group1.add ('edittext {text: 0, characters: 5, justify: "center", active: true}'); value_frame.text = Math.round(slider_frame.value) ;//初期値設定 slider_frame.onChanging =function (){value_frame.text = Math.round(slider_frame.value) } value_frame.onChanging =function (){slider_frame.value =Number(value_frame.text)}

// x0 var group2 = w.add ("group"); group2.add ("statictext", undefined, "x0:"); var slider_x0 = group2.add ("slider", undefined, 300,-2000, 2000); var value_x0 = group2.add ('edittext {text: 0, characters: 5, justify: "center", active: true}'); value_x0.text = Math.round(slider_x0.value);//初期値設定 slider_x0.onChanging =function (){value_x0.text = Math.round(slider_x0.value) } value_x0.onChanging =function (){slider_x0.value =Number(value_x0.text)}

// y0 var group3 = w.add ("group"); group3.add ("statictext", undefined, "y0:"); var slider_y0 = group3.add ("slider", undefined, 650,-1000, 1000); var value_y0 = group3.add ('edittext {text: 0, characters: 5, justify: "center", active: true}'); value_y0.text = Math.round(slider_y0.value);//初期値設定 slider_y0.onChanging = function () {value_y0.text = Math.round(slider_y0.value)} value_y0.onChanging =function (){slider_y0.value =Number(value_y0.text)}

// vx var group4 = w.add ("group"); group4.add ("statictext", undefined, "vx:"); var slider_vx = group4.add ("slider", undefined, 30,-1000, 1000); var value_vx = group4.add ('edittext {text: 0, characters: 5, justify: "center", active: true}'); value_vx.text = Math.round(slider_vx.value);//初期値設定 slider_vx.onChanging = function () {value_vx.text = Math.round(slider_vx.value)} value_vx.onChanging =function (){slider_vx.value =Number(value_vx.text)}

// vy var group5 = w.add ("group"); group5.add ("statictext", undefined, "vy:"); var slider_vy = group5.add ("slider", undefined, -100,-1000, 1000); var value_vy = group5.add ('edittext {text: 0, characters: 5, justify: "center", active: true}'); value_vy.text = Math.round(slider_vy.value);//初期値設定 slider_vy.onChanging = function () {value_vy.text = Math.round(slider_vy.value)} value_vy.onChanging =function (){slider_vy.value =Number(value_vy.text)}

// a var group6 = w.add ("group"); group6.add ("statictext", undefined, "a:"); var slider_a = group6.add ("slider", undefined, 9.8,-10, 10); var value_a = group6.add ('edittext {text: 0, characters: 5, justify: "center", active: true}'); value_a.text = slider_a.value;//初期値設定 slider_a.onChanging = function () {value_a.text = slider_a.value} value_a.onChanging =function (){slider_a.value =Number(value_a.text)}

var group7 = w.add ("group"); var ok_button = group7.add ("button", undefined, "OK"); var cancel_button = group7.add ("button", undefined, "Cancel");

// OKボタンがクリックされたとき ok_button.onClick = function () { $.writeln (this.text + " clicked.");

// 新規コンポジションを追加
// app.project.items.addComp(name, width, height, pixelAspect, duration, frameRate)
var mycomp = app.project.items.addComp("マイコンポ2", 1280, 720, 1, 10, 30);

//指定したファイル名の 画像を取得
var imgItem;
for(var i=1;i<app.project.items.length;i++){
    if(app.project.items[i].name == "circle_image.png"){
        imgItem = app.project.items[i]; 
        // alert(imgItem.name);
    }
}

// コンポジションに画像を追加
// app.project.item(index).layers.add(item, duration)
var myLayer = mycomp.layers.add(imgItem, 2);
//alert("width : " + app.project.items.[1].width + "\nheight : " + app.project.items.[1].height);

// レイヤーの(位置)プロパティの取得
var myProperty = myLayer.position;

// コンポジションのフレームレートを取得
var fRate = mycomp.frameRate;

// 放物線の描画
// parabola(frame, x0, y0, vx, vy, a);
parabola(myProperty, fRate, slider_frame.value, slider_x0.value,slider_y0.value,
              slider_vx.value, slider_vy.value, slider_a.value);

w.close();

} / END OF ok_button.onClick function /

// キャンセルボタンがクリックされたとき cancel_button.onClick = function () { $.writeln (this.text + " clicked."); w.close(); }

w.show();

// ---------------------------------------------------------------------- // 放物運動 // myProperty : レイヤーの位置プロパティー // fRate : コンポジションのフレームレート // frame : フレーム数 // x0, y0 : 初期位置 // vx, vy : 速度 // a : 加速度 // ---------------------------------------------------------------------- function parabola(myProperty, fRate, frame, x0, y0, vx, vy, a) { // x方向の距離は「x= x0 + v x * t」 // y方向の距離は「y = y0 + vy * t + 1/2 * a * t2

for(var i=0; i<frame;i++){
    var x, y;
    x = x0 + vx * i;
    y = y0 + vy * i + 1/2 * a * i * i;

    // 指定された時間(time)にキーレフームの値を設定
    //   time     時間(秒)。コンポジションの開始は0になる。
    //  newValue   プロパティに応じたタイプの値。
    myProperty.setValueAtTime(i/fRate, [x , y]);
}

}