LottieJsonFile_PostAPI

今日はEveryDaySoft代表の永田です。

今回はAfterEfectsで作成したJsonFileをs3にアップロードして、LambdaとAPIGateWayでPythonのbot3でAPIを作成して、iOSアプリでデータを取得して、Lottieのライブラリーを改造して、アプリで表示した内容を記載します。<- 2020年12月19日記述Animation.filepathというメソッドがあり、対応できました。

AfterEfectsで作成するデザインはIllustratorです。

デザインのパーツごとにレイヤーを作成します。

作成したAIファイルをAfterEfectsに読み込みます。

ベクトルレイヤーを作成します。選択してベクトルレイヤーのみにし、bodymovinの拡張機能を使用してjsonFIleを作成します。

作成したJsonFileをS3にアップロードし、Lambda関数でファイルをダウンロードするコードを作成し、IAMの権限手順などを設定します。Pythonでは保存ではなく、取得だけでできますね。

import json
import boto3
bucket_name = 'backetName'
fileName = 'FileName'
def lambda_handler(event, context):
    s3_get = boto3.client('s3')
    objkey = fileName
    obj = s3_get.get_object(Bucket=bucket_name, Key=objkey)
    body = obj['Body'].read()
    bodystr = body.decode('utf-8')
    js = json.loads(bodystr) 

    return {
        'body': json.dumps(js)
    }

レスポンスは確認

アプリでも確認

アプリではJson取得して、アプリケーションの階層に保存する処理を行なっています。

Lottieライブラリーで表示

https://github.com/airbnb/lottie-ios

lottieライブラリーの構造がローカルのmainbundleを読むようにライブラリー内でなっていたのですが、改造できたので、保存したディレクトリURLのPathを読み込ませるようにしました。<- 2020年12月19日記述Animation.filepathというメソッドがあり、対応できました。

出来ました。　

AfterEfectsでフレア系の光沢あるアニメーションをLottieで再生が可能なら動的なエフェクトを自在に扱えると思い、アーキテクチャを掴むところから始めました。

結果　出来たので、AfterEfectsスキルとIllustratorスキルを上げて、フレアのようなアニメーションをアプリで表現できたらなと思います。

以上、貴重なお時間お読みくださいまして、誠にありがとうございます。