0

最初の2つのキーは操作可能です（左端のキーとそのすぐ隣の黒いキー）。ここでホストされているので、見ることができます

http://23.23.184.26/miller/keyboardanimation/main.html

各キーの3Dの性質により、正方形の画像に置き換えることができる正方形のプロファイルが残らないため、キーボード全体を再描画する必要があります。台形要素のサポートはどこにも見当たりません...

これをSVGまたはキャンバスなどで行う必要がありますか？私がこれをしている方法は本当にばかげているように感じます。

そして、私は時々トランジションの間に奇妙な白いフラッシュを取得しています（IE9では私が思うにのみ）

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        a{
            color:white;
        }
        #main{
            background:white url('0.gif') no-repeat 0 0;
            position:relative;
            z-index:0;
            width:506px;
            height:319px;
        }

        #key1{
            position:absolute;
            width:50px;
            height:75px;
            top:175px;
            left:55px; 
        }
        #key2{
            position:absolute;
            width:50px;
            height:75px;
            top:100px;
            left:85px;
        }
        /*uncomment this to show button zones*/
        /*#key1:hover, #key2:hover{
            border:1px solid red;
        }*/
    </style>
</head>

<body>
    <div id="main">
        <div id="key1" onMouseDown="document.getElementById('main').style.background = 'url(1.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
        <div id="key2" onMouseDown="document.getElementById('main').style.background = 'url(2.gif)'" onMouseUp="document.getElementById('main').style.background = 'url(0.gif)'"></div>
    </div>
</body>

4

1 に答える 1

2

CSSアニメーションを使用していません：-/、Javascriptを使用して単純なバックグラウンド遷移を行っています。

とはいえ、もう1つの小さな詳細もあります。キャンバスを使用してピアノを描画およびアニメーション化する場合は、変更されないピアノと変更されるピアノのすべての部分を「再描画」する必要があります。

アニメートする部分が少なくなるので、SVGでこれを行い、アニメートすることをお勧めします:-)。

ご挨拶！ゴンザロG。

于 2012-05-22T19:31:20.013 に答える