通用方法

当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。

表 1 Rect对象说明⁶⁺

表 2 ObserverParam对象说明⁶⁺

表 3 Observer对象支持的方法⁶⁺

this.$element('id').animate(Object, Object)

通过animate(keyframes: Keyframes, options: Options)方法获得animation对象。该对象支持动画属性，动画方法和动画事件。重复多次调用animate方法时，采用replace策略，最后一次调用时传入的参数生效。

表 4 Keyframes

表 5 Style类型说明

表 6 Options

表 7 easing有效值说明

• 返回值说明

  animation对象支持的属性：

  属性	类型	说明
  finished	boolean	只读，用于表示当前动画是否已播放完成。
  pending	boolean	只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。
  playState	string	可读可写，动画的执行状态： idle：未执行状态，包括已结束或未开始。 running：动画正在运行。 paused：动画暂停。 finished：动画播放完成。
  startTime	number	可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。

  animation对象支持的方法：

  方法	参数	说明
  play	-	组件播放动画。
  finish	-	组件完成动画。
  pause	-	组件暂停动画。
  cancel	-	组件取消动画。
  reverse	-	组件倒播动画。

  animation对象支持的事件：

  事件	说明
  start6+	动画开始事件。
  cancel	动画被强制取消。
  finish	动画播放完成。
  repeat	动画重播事件。

• 示例代码：

  <!-- xxx.hml -->
  <div class="container">
    <div id="idName" class="box"></div>
    <div class="buttonBox">
      <button @click="start">
        start
      </button>
      <button @click="cancel">
        cancels
      </button>
    </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;
  }
  .buttonBox{
    margin-top: 30px;
    width: 250px;
    justify-content: space-between;
  }
  button{
    background-color: #8e8b89;
    color: white;
    width: 100px;
    height: 40px;
    font-size: 24px;
  }
  

  // xxx.js
  import prompt from '@system.prompt';
  export default{
    data:{
      animation:'',
    },
    onInit(){
    },
    onShow(){
      var options = {
        duration: 1500,
        easing: 'friction',
        delay: 500,
        fill: 'forwards',
        iterations: 2,
        direction: 'normal',
      };
      var frames = [
        {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
        {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
      ];
      this.animation = this.$element('idName').animate(frames, options);
      // handle finish event
      this.animation.onfinish = function(){
        prompt.showToast({
          message: "The animation is finished."
        });
      };
      // handle cancel event
      this.animation.oncancel = function(){
        prompt.showToast({
          message: "The animation is canceled."
        });
      };
      // handle repeat event
      this.animation.onrepeat = function(){
         prompt.showToast({
            message: "The animation is repeated."
         });
      };
    },
    start(){
      this.animation.play();
    },
    cancel(){
      this.animation.cancel();
    }
  }
  

  

this.$element('id').getBoundingClientRect()⁶⁺

获取元素的大小及其相对于窗口的位置。

• 示例

  // xxx.js
  var rect = this.$element('id').getBoundingClientRect();
  console.info(`current element position is ${rect.left}, ${rect.top}`);
  

this.$element('id').createIntersectionObserver()⁶⁺

监听元素在当前页面的可见范围。

• 示例

  // xxx.js
  let observer = this.$element('broad').createIntersectionObserver({
    ratios: [0.2, 0.5], // number
  });
  
  observer.observe((isVisible, ratio)=> {
      console.info('this element is ' + isVisible + 'ratio is ' + ratio)
  })
  
  observer.unobserve()