abalol.com – node.jsとかflutterとか.net coreとか

Web Animations APIをもっと触ってみたお話 2

前回の投稿で１個のアニメーションを実行するのに三行にまとめることができた。

Web Animations APIをもっと触ってみたお話

var key = { transform: ['translateX(-120px)', 'translateX(120px)'] };
 
// タイミング
var timing = { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' };
 
// DOMにアニメーションを割り当てる 第四引数は即実行するか
singleDomAnimation('#utan', key, timing, true);

var key = { transform: ['translateX(-120px)', 'translateX(120px)'] };

// タイミング

var timing = { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' };

// DOMにアニメーションを割り当てる第四引数は即実行するか

singleDomAnimation('#utan', key, timing, true);

でもまだこのコードの中にKeyframeEffectとTimingを毎度記述しているのが気持ち悪い。
なのでこいつらも外に切り出してみた。

const ANIMATIONS = {
    BG: {
        SUNNY: {
            key: [{ backgroundColor: '#666' }, { backgroundColor: '#94dfff' }],
            timing: { duration: 1000, iterations: 1, direction: 'alternate', fill: 'forwards' }
        },
        RAINY: {
            key: [{ backgroundColor: '#94dfff' }, { backgroundColor: '#666' }],
            timing: { duration: 1000, iterations: 1, direction: 'alternate', fill: 'forwards' }
        },
    },

〜略〜

const ANIMATIONS = {

BG: {

SUNNY: {

key: [{ backgroundColor: '#666' }, { backgroundColor: '#94dfff' }],

timing: { duration: 1000, iterations: 1, direction: 'alternate', fill: 'forwards' }

RAINY: {

key: [{ backgroundColor: '#94dfff' }, { backgroundColor: '#666' }],

timing: { duration: 1000, iterations: 1, direction: 'alternate', fill: 'forwards' }

〜略〜

一つのアニメーションに関する情報を一つの構造にすることでなるべくシンプルにしてみた。
さらに関数側もkeyとtimingを別に分ける必要がなくなったので引数も１個減らすことができた

    // 背景色を変更する
    singleDomAnimation('body', ANIMATIONS.BG.RAINY, true);

1 2	// 背景色を変更する singleDomAnimation('body', ANIMATIONS.BG.RAINY, true);

とはいえ使いまわしたい時用にkeyとtiming等をもっと使い回す関数も用意しておく。
非エンジニアにオーバーロードを意識させるのはいやなので別な関数にした

// 特定のDOMを動かす関数 Keyframeとtimingは別で設定可能
function singleDomAnimationWithOption(targetDom, key, config, start) {
    var elem = document.querySelector(targetDom);
    var effect = new KeyframeEffect(
        elem,
        key,
        timing);
    const animation = new Animation(effect, document.timeline);
    if (start) {
        animation.play();
    }
}

// 特定のDOMを動かす関数 Keyframeとtimingは別で設定可能

function singleDomAnimationWithOption(targetDom, key, config, start) {

var elem = document.querySelector(targetDom);

var effect = new KeyframeEffect(

elem,

key,

timing);

const animation = new Animation(effect, document.timeline);

if (start) {

animation.play();

}

Web Animations APIをもっと触ってみたお話

非エンジニアでもアニメーションを作れるWeb Animations API Wrapperを作りたいなとおもって
まずはゴリゴリと自分用のポートフォリオを作り始めていた中で気づいたこと。
１イベントで複数DOMを同時に動かすようなアニメーションを書いていると

    const keyframeEffect = new KeyframeEffect(
        document.querySelector('#utan'),
        { transform: ['translateX(-120px)', 'translateX(120px)'] },
        { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' }
    );
    const animaton = new Animation(keyframeEffect, document.timeline);
    animaton.play();

const keyframeEffect = new KeyframeEffect(

document.querySelector('#utan'),

{ transform: ['translateX(-120px)', 'translateX(120px)'] },

{ duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' }

);

const animaton = new Animation(keyframeEffect, document.timeline);

animaton.play();

結局こんなアニメーションの記述がずらずらと並んでくることになる。
冗長な記述は省きたい。

大きく分けるとすれば
・KeyFrameEffect
・Event
なのだがアニメーション終了後などのイベントを伴わない場合の記述的には
・動かしたい対象
・動き
・アニメーション設定
以外の記述が冗長になるので関数にしてしまえる。
まずは一旦関数化

// アニメーションの動きを設定
var key = { transform: ['translateX(-120px)', 'translateX(120px)'] };

// タイミング
var timing = { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' };

// DOMにアニメーションを割り当てる 第四引数は即実行するか
singleDomAnimation('#utan', key, timing, true);

// 特定のDOMを動かす関数
function singleDomAnimation(targetDom, keyframeEffect, timingOption, start) {
    var elem = document.querySelector(targetDom);
    var effect = new KeyframeEffect(
        elem,
        keyframeEffect,
        timingOption);
    const animation = new Animation(effect, document.timeline);
    animation.play();
}

// アニメーションの動きを設定

var key = { transform: ['translateX(-120px)', 'translateX(120px)'] };

// タイミング

var timing = { duration: 2000, iterations: 1, direction: 'alternate', fill: 'forwards', easing: 'ease-out' };

// DOMにアニメーションを割り当てる第四引数は即実行するか

singleDomAnimation('#utan', key, timing, true);

// 特定のDOMを動かす関数

function singleDomAnimation(targetDom, keyframeEffect, timingOption, start) {

var elem = document.querySelector(targetDom);

var effect = new KeyframeEffect(

elem,

keyframeEffect,

timingOption);

const animation = new Animation(effect, document.timeline);

animation.play();

}

一旦これで関数化はできたが、アニメーションに関する設定の記述が
他の処理と並ぶのは楽しくないので外部に切り離したい。
次の記事にまとめていく。

Web Animations APIを触ってみたお話。

アニメーションというかお絵かきはそもそも絶望的にセンスのない私が
Web Animations Apiを触ってみたお話。

うぇぶあにーめしょんあーぴーあいってなに？

ウェブアニメーション API

「ウェブアニメーション API を使うことで、Web ページの見た目の変更を同期させたり時間を調整すること、
つまり DOM 要素のアニメーションが可能です。
これらはタイミングモデル及びアニメーションモデルという2つのモデルの組み合わせによって実現されます。」

CSS Animationじゃだめなの？とおもったけど
コードでかけるなら直感的に連続的なアニメーションがかけるのでは！？とおもって
なんとなくコードを書いてみました。

Flashとかやったことのある人だとキーフレームっていうのが伝わりやすいけど
簡単にいうと１フレームずつパラパラ漫画が動くなかで
変化の起点になるフレームのこと。

３０枚で１秒のパラパラ漫画を書いてその中で人が右に向かって歩いていたのを
0.5秒経過したときに方向転換したい！ってなったら15フレーム目がキーフレーム。
なんだけど15なんていう指定はせずにアニメーションをさせて
その変化の50%まで行った時！みたいな指定ができる。

そんな感じでひとつの動きの中にいくつかのキーを作ることができるんだけど
実際には複数のDOMをこのDOMのアニメーション終わったら次こっちみたいな感じで
動かしたい時どうするんだろうとおもってやってみたのが
このブログのロゴのぶるぶるしてるアニメーションです。

window.onload = function () {
    const logoChr = ['a', 'b', 'a', 'l', 'o', 'l', '.', 'c', 'o', 'm'];
    var index = 0;
    var aniArr = [];
    logoChr.forEach(function (v, i, ar) {
        var div = document.createElement('div');
        div.className = "logoChr";
        div.id = 'lc_' + i;
        div.textContent = v;
        document.querySelector('#logo').appendChild(div);
        const keyframes = new KeyframeEffect(
            document.querySelector('#lc_' + i),
            { transform: ['translateY(0)', 'translateY(-' + (Math.floor(Math.random() * 10) + 2) + 'px)'] },
            {
                duration: (Math.floor(Math.random() * 100) + 50),
                iterations: 1,
                direction: 'alternate',
                easing: 'cubic-bezier(.77,2.55,.15,-1.45)'
            }
        );
        const anim = new Animation(keyframes, document.timeline);
        anim.onfinish = function () {
            aniArr[i < logoChr.length - 1 ? i + 1 : 0].play();
        };
        aniArr[i] = anim;
    });
    aniArr[0].play();
}

window.onload = function () {

const logoChr = ['a', 'b', 'a', 'l', 'o', 'l', '.', 'c', 'o', 'm'];

var index = 0;

var aniArr = [];

logoChr.forEach(function (v, i, ar) {

var div = document.createElement('div');

div.className = "logoChr";

div.id = 'lc_' + i;

div.textContent = v;

document.querySelector('#logo').appendChild(div);

const keyframes = new KeyframeEffect(

document.querySelector('#lc_' + i),

{ transform: ['translateY(0)', 'translateY(-' + (Math.floor(Math.random() * 10) + 2) + 'px)'] },

{

duration: (Math.floor(Math.random() * 100) + 50),

iterations: 1,

direction: 'alternate',

easing: 'cubic-bezier(.77,2.55,.15,-1.45)'

}

);

const anim = new Animation(keyframes, document.timeline);

anim.onfinish = function () {

aniArr[i < logoChr.length - 1 ? i + 1 : 0].play();

};

aniArr[i] = anim;

});

aniArr[0].play();

}

ここでまず文字数分のdivを用意

        var div = document.createElement('div');
        div.className = "logoChr";
        div.id = 'lc_' + i;
        div.textContent = v;

var div = document.createElement('div');

div.className = "logoChr";

div.id = 'lc_' + i;

div.textContent = v;

動きを指定

const keyframes = new KeyframeEffect(
            document.querySelector('#lc_' + i),
            { transform: ['translateY(0)', 'translateY(-' + (Math.floor(Math.random() * 10) + 2) + 'px)'] },
            {
                duration: (Math.floor(Math.random() * 100) + 50),
                iterations: 1,
                direction: 'alternate',
                easing: 'cubic-bezier(.77,2.55,.15,-1.45)'
            }
        );

const keyframes = new KeyframeEffect(

document.querySelector('#lc_' + i),

{ transform: ['translateY(0)', 'translateY(-' + (Math.floor(Math.random() * 10) + 2) + 'px)'] },

{

duration: (Math.floor(Math.random() * 100) + 50),

iterations: 1,

direction: 'alternate',

easing: 'cubic-bezier(.77,2.55,.15,-1.45)'

}

);

transform : translateY

1	transform : translateY

は単純にY座標の相対的な動きを指定できる。座標0から乱数で作った座標まで

duration: (Math.floor(Math.random() * 100) + 50)

1	duration: (Math.floor(Math.random() * 100) + 50)

は0.1〜0.15秒かけて動かす。

easing: 'cubic-bezier(.77,2.55,.15,-1.45)'

1	easing: 'cubic-bezier(.77,2.55,.15,-1.45)'

この部分は動きの変化の具合を指定しているんだけどベジェ曲線が使える。
数値だと何しているかわからないし逆に動きを数値化するのが難しいのだけど
こちらでその変化の具合を可視化してくれるよと教えていただきました。
koutar0さんありがとうございます！
cubic-bezier.com

この .onfinishはアニメーションが終わった時に呼ばれるので
そこで次のdomのアニメーションをplayするように設定。
最後まで行ったらまた最初の文字からループするようにしている

        anim.onfinish = function () {
            aniArr[i &lt; logoChr.length - 1 ? i + 1 : 0].play();
        };

anim.onfinish = function () {

aniArr[i < logoChr.length - 1 ? i + 1 : 0].play();

};

そんな感じで全体としては無限ループになってるアニメーションなんだけど
１個１個のエレメントは

                iterations: 1,

1	iterations: 1,

で繰り返しはせず１回に設定されています。

連続的で複数のDOMをより直感的にダイナミックにアニメーションさせたい時は
圧倒的にCSS Animationより楽そうでした。

もっとかっこいいもの作りたい

.net core + MySQLでEF coreしてみる

Macから.net coreでWeb API を作ろうとしたらハマったので備忘録。
Visual Studio for Mac上ではできずコマンドでやることになった。

環境は .net core 2.1 + MySQL 5.x 古いのは実業務に寄せたため。
たぶん8だと最初は認証周りであれこれしないといけない。

プロジェクトの作り方とかはこちらを参考にしました。
ASP.NET Core 2.0 EntityFrameworkCoreでMySQLを使う CodeFirst

まずはモデルを設計してテーブルを生成 & ALTERするケース（コードファースト）。

コードファーストってナーニって人はこちら。
早い話がモデル（クラス）設計したらテーブル自動でできてほしいよねってこと。
EF 4.1の目玉機能「コード・ファースト」を理解しよう（1/3） – ＠IT

①ビルドする当たり前だけどビルド通らないとうごかない

dotnet build

1	dotnet build

②migrationする　正解がわからないけどテーブル設計変更するたびにコードレベルで別物として残るのでなんとなーくバージョンみたいなの付与してみた

dotnet ef migrations add Drabbit_v0.0.4

1	dotnet ef migrations add Drabbit_v0.0.4

ちなみにこんなふうに全部過去のやつのこってる

③更新する

dotnet ef database update

1	dotnet ef database update

ここまで問題なく動くと

こんな感じになる。

MyPc:Drabbit abalol$ dotnet build
.NET Core 向け Microsoft (R) Build Engine バージョン 15.8.166+gd4e8d81a88
Copyright (C) Microsoft Corporation.All rights reserved.

  /Users/abalol/Projects/Drabbit/Drabbit/Drabbit.csproj のパッケージを復元しています...
  MSBuild ファイル /Users/abalol/Projects/Drabbit/Drabbit/obj/Drabbit.csproj.nuget.g.props を生成しています。
  MSBuild ファイル /Users/abalol/Projects/Drabbit/Drabbit/obj/Drabbit.csproj.nuget.g.targets を生成しています。
  /Users/abalol/Projects/Drabbit/Drabbit/Drabbit.csproj の復元が 5.83 sec で完了しました。
  Drabbit -> /Users/abalol/Projects/Drabbit/Drabbit/bin/Debug/netcoreapp2.1/Drabbit.dll

ビルドに成功しました。
    0 個の警告
    0 エラー

経過時間 00:00:31.50
MyPc:Drabbit abalol$ dotnet ef migrations add Drabbit_v0.0.4
Done. To undo this action, use 'ef migrations remove'
MyPc:Drabbit abalol$ dotnet ef database update
Applying migration '20181002051658_Drabbit_v0.0.4'.
Done.
MyPc:Drabbit abalol$ dotnet build

MyPc:Drabbit abalol$ dotnet build

.NET Core 向け Microsoft (R) Build Engine バージョン 15.8.166+gd4e8d81a88

/Users/abalol/Projects/Drabbit/Drabbit/Drabbit.csproj のパッケージを復元しています...

MSBuild ファイル /Users/abalol/Projects/Drabbit/Drabbit/obj/Drabbit.csproj.nuget.g.props を生成しています。

MSBuild ファイル /Users/abalol/Projects/Drabbit/Drabbit/obj/Drabbit.csproj.nuget.g.targets を生成しています。

/Users/abalol/Projects/Drabbit/Drabbit/Drabbit.csproj の復元が 5.83 sec で完了しました。

Drabbit -> /Users/abalol/Projects/Drabbit/Drabbit/bin/Debug/netcoreapp2.1/Drabbit.dll

ビルドに成功しました。

0 個の警告

0 エラー

経過時間 00:00:31.50

MyPc:Drabbit abalol$ dotnet ef migrations add Drabbit_v0.0.4

Done. To undo this action, use 'ef migrations remove'

MyPc:Drabbit abalol$ dotnet ef database update

Applying migration '20181002051658_Drabbit_v0.0.4'.

Done.

MyPc:Drabbit abalol$ dotnet build

でこんな風にテーブルができてる。

テーブルを作成してモデルを自動生成するパターン（データベースファースト）。
既存のシステムへ使ったりする時はこちらが良いが複合主キーなどどこまでやってくれるか詳細不明

①ビルドする当たり前だけどビルド通らないとうごかない

dotnet build

1	dotnet build

②scaffoldする

dotnet ef dbcontext scaffold "Server=localhost;User Id=id;Password=password;Database=dbName" "Pomelo.EntityFrameworkCore.MySql" -c Drabbit -o Models

1	dotnet ef dbcontext scaffold "Server=localhost;User Id=id;Password=password;Database=dbName" "Pomelo.EntityFrameworkCore.MySql" -c Drabbit -o Models

-o で指定したフォルダに出力される

問題がなければこんな風に勝手にモデルに追加される。