画像が立ち上がってくるようなアニメーション

こんにちは!!

canvas,css,jsなどを使って、画像が立ち上がってくるようなアニメーションを作りたいと思っています。
(イメージは射的の的が立ち上がるようなアニメーションです。)

実現できるのであれば、特定の技術、フレームワークに限定するつもりはありません。

調べてみたのですが、なかなか良い情報にたどり着けず。。。

何か良い方法はないでしょうか?

ざっくりした質問で大変恐縮です。
キーワードになるようなことのご紹介、参考になるサイト等でもご紹介頂けると幸いです。

是非よろしくお願いします!!

行動規範の内容に同意します

回答2件

ベストアンサー

やっつけですが

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title></title>
6    <style>
7    #square {
8        width:  400px;
9        height: 400px;
10        border: 1px solid black;
11        box-sizing: content-box;
12        
13        animation: standup 2s ease-out;
14        transform-origin: bottom;
15    }
16    
17    @keyframes standup {
18        from {
19            transform: matrix3d(
20                1,      0,      0,      0,
21                0,      1,      0, -0.003,
22                0,      0,      1,      0,
23                0,      0,      0,      1);
24        }
25        to {
26            transform: matrix3d(
27                1,      0,      0,      0,
28                0,      1,      0,      0,
29                0,      0,      1,      0,
30                0,      0,      0,      1);
31        }
32    }
33    </style>
34</head>
35<body>
36    <div id="square"></div>
37</body>
38</html>

あまり詳しくないので突っ込んだことはお答えできません…あしからず。

投稿2015/10/08 16:06

htsign

総合スコア870

どんな言語で実装するとしても，まずは画像処理の基本くらいは知っておく必要があります．
本格的な実装をしたければ3次元の画像処理について知っていないといけません．透視投影変換，回転あたりがわかっていればできます．
ただし近似的な実装をするならば，2次元の画像変換だけでもできないことはありません．台形の変形で代用することもできます．（上辺の幅を一次関数で減らし，高さを二次関数で減らすなど）

Canvasで画像処理を行う例はこちら
台形変形をしている例はこちら
あとはタイマーを使って，高さを減らしながら再描画すれば良いと思います．

投稿2015/10/08 14:17