1

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

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

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

<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>





1 件の回答 1

1

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

index.html

<!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>

page1.html

<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>

style.css

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;
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。