今日は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スキルを上げて、フレアのようなアニメーションをアプリで表現できたらなと思います。
以上、貴重なお時間お読みくださいまして、誠にありがとうございます。
コメントを残す