动画

import animator from '@ohos.animator';

<!-- hml -->
<div class="container">
  <div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
  </div>
</div>

// js
export default {
  data : {
    divWidth: 200,
    divHeight: 200,
    animator: null
  },
  onInit() {
    var options = {
      duration: 1500,
      easing: 'friction',
      fill: 'forwards',
      iterations: 2,
      begin: 200.0,
      end: 400.0
    };
    this.animator = animator.createAnimator(options);
  },
  Show() {
    var options1 = {
      duration: 2000,
      easing: 'friction',
      fill: 'forwards',
      iterations: 1,
      begin: 200.0,
      end: 400.0
    };
    this.animator.update(options1);
    var _this = this;
    this.animator.onframe = function(value) {
      _this.divWidth = value;
      _this.divHeight = value;
    };
    this.animator.play();
  }
}

animator.update(options);

animator.play();

animator.finish();

animator.pause();

animator.cancel();

animator.reverse();

animator.onframe();

animator.onfinish();

animator.oncancel();

animator.onrepeat();