

スプライトシートを使ってOnsen UIでフレームアニメーションを実装したいです。  
環境はmonacaで「Onsen UI最小限テンプレート」を使用しています。

下記URLより「フレームアニメーション」ファイルを見て、index.htmlで実装できることは確認済です。  
<https://ja.monaca.io/book/support/>

Onsen UIを使用した時、page1.htmlとpage2.htmlで実装する方法を教えていただけないでしょうか？

[code]

    <script>
    
    </script>
    
    <style>
        body {
          background-color: #eee;
          text-align: center;
        }
        h1 {
          text-align: center;
          font-size: 24px;
          color: #666;
        }
        h2 {
          text-align: center;
          font-size: 15px;
          color: #666;
        }
    
        /* 背景を左に、スプライトシートの幅分移動させるrunanimeアニメーション */ 
        @-webkit-keyframes runanime { 
           from { background-position:    0px; } 
             to { background-position: -3871px; }
        }
        .run { 
            width: 322px;
            height: 351px;
            margin-top: 30px; 
    
            /* 使用するスプライトシート */ 
            background-image: url("run.png");
            background-size: 4193px 351px;
    
            /* runアニメーションを1秒かけて12ステップ（1/12秒間隔）で無限に繰り返す */ 
            -webkit-animation: runanime 1s steps(12) infinite;  
        }
    
    </style>
    
[/code]

  
  
  
  


CC BY-SA 3.0
2015-06-17T07:32:44.943
11434
2016-10-24T13:07:12.873
8053
question
monaca onsen-ui
フレームアニメーションをOnsen UIで実装したいです


`index.html`の`<style>...</style>`の部分を`style.css`に書けば良いと思います。  
画像が用意できないのでここで動きが再現できませんが、とりあえずこれでpage1でサンプルのアニメーションは動きました。

index.html

[code]

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="components/loader.js"></script>
        <script>
          ons.bootstrap();
          function toggleAnimation() {
            $(".run").toggleClass("stop");
          }
        </script>
      </head>
      <body>
        <ons-navigator var="myNavigator" page="page1.html">
        </ons-navigator> 
      </body>
    </html>
    
[/code]

page1.html

[code]

    <ons-page>
      <ons-toolbar>
        <div class="center">Navigator</div>
      </ons-toolbar>
      <h1>Page 1</h1>
      <div style="text-align: center">
        <ons-button onclick="myNavigator.pushPage('page2.html')">
            Push Page 2
        </ons-button>
      </div>
      <div class="run" onclick="toggleAnimation()"></div>
      <h2>タップすると動きが止まります</h2>
    </ons-page>
    
[/code]

style.css

[code]

    body {
      background-color: #eee;
      text-align: center;
    }
    h1 {
      text-align: center;
      font-size: 24px;
      color: #666;
    }
    h2 {
      text-align: center;
      font-size: 15px;
      color: #666;
    }
    
    /* 背景を左に、スプライトシートの幅分移動させるrunanimeアニメーション */ 
    @-webkit-keyframes runanime { 
       from { background-position:    0px; } 
         to { background-position: -3871px; }
    }
    .run { 
        width: 322px;
        height: 351px;
        margin-top: 30px; 
    
        /* 使用するスプライトシート（www/images/配下にrun.pngを配置した場合） */ 
        background-image: url("../images/run.png");
        background-size: 4193px 351px;
    
        /* runアニメーションを1秒かけて12ステップ（1/12秒間隔）で無限に繰り返す */ 
        -webkit-animation: runanime 1s steps(12) infinite;  
    }
    .stop {
        -webkit-animation: none;
    }
    
[/code]


CC BY-SA 3.0
2015-06-18T05:48:04.550
11463
2015-06-18T05:48:04.550
3516
11434
answer