I want to implement frame animation in Onsen UI.

I would like to implement frame animation in Onsen UI using sprite sheet.
The environment uses the "Onsen UI Minimum Template" in monaca.

"I have already checked the ""frame animation"" file from the URL below and confirmed that it can be implemented in index.html.
https://ja.monaca.io/book/support/

When using the Onsen UI, could you tell me how to implement page1.html and 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 animation that moves the background to the left by the width of the sprite sheet*/ 
    @-webkit-keyframes runanime { 
       from {background-position:0px;} 
         to {background-position:-3871px;}
    }
    .run{ 
        width —322px;
        height —351px;
        margin-top: 30px; 

        /* SPRITE SHEET*/ 
        background-image: url("run.png");
        background-size: 4193px351px;

        /* Run animation takes 1 second and repeats indefinitely in 12 steps (1/12 second intervals) */ 
        - webkit-animation:runanime1s steps(12) infinite;  
    }

</style>

monaca onsen-ui

2022-09-30 20:50

1 Answers

index.html should be <style>...</style> in style.css.
I can't reproduce the movement here because I can't prepare the image, but the animation of the sample has moved on page1.

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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>Page1</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>Tap to stop moving</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 animation that moves the background to the left by the width of the sprite sheet*/ 
@-webkit-keyframes runanime { 
   from {background-position:0px;} 
     to {background-position:-3871px;}
}
.run{ 
    width —322px;
    height —351px;
    margin-top: 30px; 

    /* Sprite sheet to be used (with run.png under www/images/)*/ 
    background-image: url("../images/run.png");
    background-size: 4193px351px;

    /* Run animation takes 1 second and repeats indefinitely in 12 steps (1/12 second intervals) */ 
    - webkit-animation:runanime1s steps(12) infinite;  
}
.stop{
    - webkit-animation: none;
}

2022-09-30 20:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656