[Day 7] Implementation of JS FA, user interaction, and JS animation (2)

Table of Contents of Series Articles

---

Preface

Today we will learn js animation together

1. Get animation object

The animation object is obtained by calling the animate method. The animation object supports animation properties, animation methods and animation events.

<!-- xxx.hml -->
<div class="container">
  <div id="content" class="box" onclick="Show"></div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.box{
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  margin-top: 30px;
}

/* xxx.js */
export default {
  data: {
    animation: '',
  },
  onInit() {
  },
  onShow() {
    var options = {
      duration: 1500,
    };
    var frames = [
      {
        width:200,height:200,
      },
      {
        width:300,height:300,
      }
    ];
    this.animation = this.$element('content').animate(frames, options);  //获取动画对象
  },
  Show() {   
    this.animation.play();
  }
}

illustrate:

• Keyframes and Options parameters must be passed in when using the animate method.
• When the animate method is called multiple times, the replace strategy is used, that is, the parameters passed in during the last call take effect.

2. Set animation parameters

After obtaining the animation object, set the style of the animation on the component by setting the parameter Keyframes.

<!-- xxx.hml -->
<div class="container">
   <div id="content" class="box" onclick="Show"></div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.box{
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  margin-top: 30px;
}

/* xxx.js */
export default {
  data: {
    animation: '',
    keyframes:{},
    options:{}
  },
  onInit() {
    this.options = {
      duration: 4000,
    };
    this.keyframes = [
      {
        transform: {
          translate: '-120px -0px',
          scale: 1,
          rotate: 0
        },
        transformOrigin: '100px 100px',
        offset: 0.0,
        width: 200,
        height: 200
      },
      {
        transform: {
          translate: '120px 0px',
          scale: 1.5,
          rotate: 90
        },
        transformOrigin: '100px 100px',
        offset: 1.0,
        width: 300,
        height: 300
      }
    ];
  },
  Show() {
    this.animation = this.$element('content').animate(this.keyframes, this.options);
    this.animation.play();
  }
}

illustrate:

• The order of translate, scale and totate will affect the animation effect.
• transformOrigin only works on scale and totate.

After obtaining the animation object, set the properties of the animation by setting the parameter Options.

<!-- xxx.hml -->
<div class="container">
   <div id="content" class="box" onclick="Show"></div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.box{
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  margin-top: 30px;
}

/* xxx.js */
export default {
  data: {
    animation: '',
  },
  onInit() {
  },
  onShow() {
    var options = {
      duration: 1500,
      easing: 'ease-in',
      delay: 5,
      iterations: 2,
      direction: 'normal',
    };
    var frames = [
      {
        transform: {
          translate: '-150px -0px'
        }
      },
      {
        transform: {
          translate: '150px 0px'
        }
      }
    ];
    this.animation = this.$element('content').animate(frames, options);
  },
  Show() {
    this.animation.play();
  }
}

Description: direction: Specifies the animation playback mode. normal: The animation loops forward. reverse: The animation plays in reverse loop. alternate: The animation plays alternately in a loop, playing forward for odd numbers and backward for even numbers. alternate-reverse: The animation is played in an alternate loop in reverse directions, with odd-numbered reverse plays and even-numbered forward plays.

3. Add events and call methods

The animation object supports animation events and animation methods. You can achieve the desired animation by adding start and cancel events and calling the play, pause, rewind and end methods.

<!-- xxx.hml -->
<div class="container">
 <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
 </div>
   <div class="row">
      <button type="capsule" value="play" onclick="playAnimation"></button>
      <button type="capsule" value="pause" onclick="pauseAnimation"></button>
   </div>
   <div class="row1">
      <button type="capsule" value="reverse" onclick="reverseAnimation"></button>
      <button type="capsule" value="cancel" onclick="cancelAnimation"></button>
   </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
button{
  width: 200px;
}
.row{
  width: 65%;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  position: fixed;
  top: 65%;
  left: 120px;
}
.row1{
  width: 65%;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  position: fixed;
  top: 75%;
  left: 120px;
}

/* xxx.js */
import prompt from '@system.prompt';
export default {
  data: {
    animation: '',
  },
  onInit() {
  },
  onShow() {
    var options = {
      duration: 1500,
      easing:'ease-in',
      elay:5,
      direction:'normal',
      iterations:2
    };
    var frames = [
      {
        transform: {
          translate: '-150px -0px'
        },
        opacity: 0.1,
        offset: 0.0,
        width: 200,
        height: 200,
      },
      {
        transform: {
          translate: '150px 0px'
        },
        opacity: 1.0,
        offset: 1.0,
        width: 300,
        height: 300,
      }
    ];
    this.animation = this.$element('content').animate(frames, options);
    this.animation.onstart = function(){
      prompt.showToast({
        message: "start"
      });
    };  //添加开始事件
    this.animation.onrepeat = function(){
      prompt.showToast({
        message: " repeated"
      });
    };//添加重播事件
    this.animation.oncancel = function(){
      prompt.showToast({
        message: "canceled"
      });
    };//添加取消事件
    this.animation.onfinish = function(){
      prompt.showToast({
        message: "finish"
      });
    };//添加完成事件
  },
  playAnimation() {
    this.animation.play();//调用播放开始的方法
  },
  pauseAnimation() {
    this.animation.pause();//调用播放暂停的方法
  },
  reverseAnimation() {
    this.animation.reverse();//调用播放倒放的方法
  },
  cancelAnimation() {
    this.animation.cancel();//调用播放取消的方法
  }
}

Change the animation state by changing the properties of playStat.

<!-- xxx.hml -->
<div class="container">
  <div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
  </div>
  <div class="row">
     <button type="capsule" value="{
   
   {state}}" onclick="playStateClick"></button>
  </div>
  <div class="row1">
     <button type="capsule" value="{
   
   {state1}}" onclick="playStateClick1"></button>
  </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
button{
  width: 200px;
}
.row{
  width: 65%;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  margin-left: 260px;
  position: fixed;
  top: 65%;
}
.row1{
  width: 65%;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
   margin-left: 260px;
  position: fixed;
  top: 75%;
}

/* xxx.js */
import prompt from '@system.prompt';
export default {
  data: {
    animation: '',
    state:'play',
    state1:'play'
  },
  onInit() {
  },
  onShow() {
    var options = {
      duration: 1500,
      easing:'ease-in',
      elay:5,
      direction:'normal',
      iterations:2,
    };
    var frames = [
      {
        transform: {
          translate: '-150px -0px'
        },
        opacity: 0.1,
        offset: 0.0,
        width: 200,
        height: 200,
      },
      {
        transform: {
          translate: '150px 0px'
        },
          opacity: 1.0,
          offset: 1.0,
          width: 300,
          height: 300,
        }
      ];
      this.animation = this.$element('content').animate(frames, options);
      this.animation.onstart = function(){
        prompt.showToast({
          message: "start"
        });
      };
      this.animation.onrepeat = function(){
        prompt.showToast({
          message: " repeated"
        });
      };
      this.animation.onfinish = function(){
        prompt.showToast({
          message: " finished"
      });
    };
  },
  playStateClick(){
    if(this.animation.playState != 'running'){
      this.animation.playState = 'running';//设置playState为running，动画运行。
      this.state = 'pause'
    }else{
      this.animation.playState = 'paused';//设置playState为paused，动画暂停。
      this.state = 'play'
    }
  },
  playStateClick1(){
    if(this.animation.playState != 'running'){
      this.animation.playState = 'running';
      this.state1 = 'finish'
    }else{
      this.animation.playState = 'finished';//设置playState为finished，动画结束。
      this.state1 = 'play'
    }
  }
}

Summarize

On the last day, we implemented a simple animation. Because there are not many people participating in our course. So I split the content. In the last few days, the quality of updates has also declined. I just released the code without explaining it too much. But that doesn’t mean the follow-up is over. This column will be made available for free after the new year, and content will continue to be added. I would like to wish everyone a happy new year and all the best! ! ! .