← Back

ofxAEEasingLoader

github.com/ffunatsu/ofxAEEasingLoader · @ffunatsu
OF 0.12 Animation Bridges

After Effects easings loader for openFrameworks

0 1 Last commit 4mo ago Created 1y ago

README

ofxAEEasingLoader



animation.gif

After Effects easings loader for openFrameworks.

You can load selected keyframes (curves/easings) from After Effects.

Tested on oF 0.12.0

Usage (AE)



1. Select curves (easings) or keyframes which you want to export

screenshot

2. Export it by using tools/exportSelectedEasing.jsx on File > Script > Execute menu.

Example1: single value



#include "ofxAEEasingLoader.h"

ofxAEEasingLoader ae_easing;

void ofApp::setup(){
    ae_easing.load("test.json");
}

void ofApp::draw(){
    float t = std::fmodf(ofGetElapsedTimef(), 14.0f);
    float y = ae_easing.get<float>(t);

    // NOTE:
    // - you can also specify property name: ae_easing.get(t, "prop name")
    //    - property name also matches match_name.
    // - alternatively, specify property index: ae_easing.get(t, 0) ( .get(t) is short for .get(t, 0) )

    ofDrawBitmapString("t: " + ofToString(t, 2), 50, 50);

    ofDrawRectangle(100, y - 600, 50, 50);
}


see example/src/ofApp.cpp or example/src/ofApp.h for detail.

Example2: multiple value



Situation that multiple values exported (in this case, X and Y).

screenshot_multiple

#include "ofxAEEasingLoader.h"

ofxAEEasingLoader ae_easing;

void ofApp::setup(){
    ae_easing.load("test2.json");
}

void ofApp::draw(){
    float t = std::fmodf(ofGetElapsedTimef(), 6.0f);
    ofVec2f p = ae_easing.get<ofVec2f>(t);

    // NOTE:
    // - you can also use vector: ae_easing.get<vector<float>>(t)
    // - if values count are among 2~4, you can use ofVec2f, ofVec3f, ofVec4f.
    // - if exceeds it, you should use vector.

    ofDrawBitmapString("t: " + ofToString(t, 2), 50, 50);

    ofDrawRectangle(p.x - 400, p.y - 100, 50, 50);
}


see example2/src/ofApp.cpp or example2/src/ofApp.h for detail.

Example3: multiple tracks



Situation that multiple values of multiple tracks exported (in this case, X and Y in Layer "A", Rotation in Layer "B").

screenshot_tracks

#include "ofxAEEasingLoader.h"

ofxAEEasingLoader ae_easing;

size_t property_index1;
size_t property_index2;

void ofApp::setup(){
    ae_easing.load("test3.json");
    ae_easing.dumpTracks();
    
    //  dumpTracks() shows:
    //    [notice ] ------------
    //    [notice ] property_name: 'Position'
    //    [notice ] layer_name: 'A'
    //    [notice ] parent_name: 'Transform'
    //    [notice ] ( match_name: 'ADBE Position' )
    //    [notice ] ------------
    //    [notice ] property_name: 'Rotation'
    //    [notice ] layer_name: 'B'
    //    [notice ] parent_name: 'Transform'
    //    [notice ] ( match_name: 'ADBE Rotate Z' )

    property_index1 = ae_easing.getPropertyIndex("Position", "A");
    property_index2 = ae_easing.getPropertyIndex("Rotation", "B");
    
//    ofSetRectMode(OF_RECTMODE_CENTER);
}

void ofApp::draw(){
    float t = std::fmodf(ofGetElapsedTimef(), 6.0f);
    ofVec2f p = ae_easing.get<ofVec2f>(t, property_index1);
    float deg = ae_easing.get<float>(t, property_index2);

    // NOTE:
    // - you can also write directly: .get(t, property_name, layer_name, [parent_name])

    ofDrawBitmapString("t: " + ofToString(t, 2), 50, 50);

    ofDrawRectangle(p.x - 400, p.y - 100, 50, 50);
    
    ofPushStyle();
    ofSetColor(255, 0, 0);
    ofTranslate(200, 50);
    ofRotateDeg(deg);
    ofDrawRectangle(0, 0, 200, 50);
    ofPopStyle();
}


see example3/src/ofApp.cpp or example3/src/ofApp.h for detail.

Notes



Appendix: json editor



Simple p5.js json file editor (works on web browser): source: ./docs/editor.

:warning: Almost created by GitHub Copilot. Please use with care.

screenshot_editor

License



0BSD or WTFPL

Get this addon

HTTPS
SSH