web123456

HarmonyOS practical combat: set an interpolation to achieve animation effect

  • //
  • import animator from '@';
  • import promptAction from '@';
  • export default {
  • data: {
  • scaleVal:1,
  • DivWidth:200,
  • DivHeight:200,
  • translateVal:0,
  • animation: null
  • },
  • onInit() {
  • var options = {
  • duration: 3000,
  • fill: 'forwards',
  • begin: 200,
  • end: 270
  • };
  • = (options);
  • },
  • onShow() {
  • var _this= this;
  • //Add animation replay event
  • = function() {
  • ({
  • message: 'repeat'
  • });
  • var repeatoptions = {
  • duration: 2000,
  • iterations: 1,
  • direction: 'alternate',
  • begin: 180,
  • end: 240
  • };
  • _this.(repeatoptions);
  • _this.();
  • };
  • },
  • playAnimation() {
  • var _this= this;
  • //Add an animation frame-by-frame interpolation callback event
  • = function(value) {
  • _this. scaleVal= value/150,
  • _this.DivWidth = value,
  • _this.DivHeight = value,
  • _this.translateVal = value-180
  • };
  • ();
  • },
  • updateAnimation() {
  • var newoptions = {
  • duration: 5000,
  • iterations: 2,
  • begin: 120,
  • end: 180
  • };
  • (newoptions);
  • ();//Call the animation playback interface
  • },
  • pauseAnimation() {
  • ();//Call the animation pause interface
  • },
  • finishAnimation() {
  • var _this= this;
  • //Add animation completion event
  • = function() {
  • ({
  • message: 'finish'
  • })
  • };
  • (); //Call the animation completion interface
  • },
  • cancelAnimation() {
  • .cancel(); //Call animation to cancel interface
  • },
  • reverseAnimation() {
  • (); //Call the animation reversal interface
  • }
  • }