image component animation problem

Symptom:

Two image components are used for stacking under the stack component. One image component is hidden from 1-0 through the animation style, and the other is displayed, so as to realize the picture switching. The previous picture will flash and disappear probabilistically.

The problem code is as follows:

<template>
  <div class="page-wrapper">
    <input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" />
    <stack style="width:400px;height:400px">
    <image class="img" id="img1" src="{{imgUrl}}" oncomplete="imgcomplete"></image>
     <image class="img" id="img2" if="{{ximg}}" src="{{preUrl}}" oncomplete="imgcomplete2" style="{{'opacity:' + preop + ';'}}"></image>
    </stack>
  </div>
</template>
 
<script>
export default {
  data: {
     imgsrc: ["https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=http%3A%2F%2Fimg.aiimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=879ac47e0bd97e413b5462946d9ae4ed",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F01%2F11%2F16pic_111395_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=70c702a55248113dafa6e243dc253625",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=11199190c6ac8e3371f16d7568d40daa",
     "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg",
     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=3b33c5b006bcba88a24d03cfbca1ad20",
     "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9c16fdfaaf51f3de9ba8ee1194eef01f3a2979a8.jpg",
     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg&refer=http%3A%2F%2Fa1.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=6500d50b1680d27bb60fe044e90ce41b",       
            ],
    imgUrl:'',
    preUrl:'',
    ximg:true,
    preop:0,
    i:0
  },
  onInit: function () {
      this.imgUrl = this.imgsrc[0]
  },
  onCallAnimationClick() {
     if(this.i > 6){
     this.i = 0 ;
     this.imgUrl = this.imgsrc[this.i]
   }else{
        this.i++
   this.imgUrl = this.imgsrc[this.i]
   }
 
   console.log('imgcomplete=',this.i)
   },
   imgcomplete(){
    console.log('imgcomplete 1')
      this.preop = 1
      var options = {
        duration: 500,
        easing: 'linear',
        delay: 0,
        fill: 'forwards',
        iterations: 1
      }
 
      var frames = [{
        opacity: 1
      },
      {
        opacity: 0
      }];
      var animation = this.$element('img2').animate(frames, options);
      animation.play();
       var self = this
      animation.onfinish = function () {
        console.log("imgcomplete animation  onfinish");
        self.ximg = false
        self.preop = 0
        setTimeout(() => {
          self.ximg = true
          self.preUrl = self.$element("img1").attr.src
        }, 30);
 
      }
    },
  imgcomplete2() {
      console.log('imgcomplete 2')
      setTimeout(() => {
        this.preop = 1
      }, 50);
    },
}
</script>
 
<style>
.page-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.img{
  width:100%;
  height:100%;
}
.button {
  color: #20a0ff;
  background-color: #ffffff;
  padding: 10px 20px;
  border: 1px solid #20a0ff;
  border-radius: 40px;
}
</style>

problem analysis:
The above code uses two image components to achieve the animation effect of fade in and fade out when the image is switched, mainly through transparency. The transparency is set in the css of the second image, but the imgcomplete() method has made a transparency animation for the image component, the transparency value is from 1 to 0, and the code sets the transparency variable preop bound in the css to 1 .

This happens when the animation method finishes before the css.

solution:
The style="{{'opacity:' + preop +';'}}" of the second image component in the template is removed, and it is called by the animation style, which changes from 0-1.

modified code for

<template>
  <div class="page-wrapper">
    <input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" />
    <stack style="width:400px;height:400px">
    <image class="img" id="img1" src="{{imgUrl}}" oncomplete="imgcomplete"></image>
     <image class="img" id="img2" if="{{ximg}}" src="{{preUrl}}" oncomplete="imgcomplete2" ></image>
    </stack>
  </div>
</template>
 
<script>
export default {
  data: {
    imgsrc: ["https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=http%3A%2F%2Fimg.aiimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=879ac47e0bd97e413b5462946d9ae4ed",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F01%2F11%2F16pic_111395_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=70c702a55248113dafa6e243dc253625",
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=11199190c6ac8e3371f16d7568d40daa",
     "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg",
     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=3b33c5b006bcba88a24d03cfbca1ad20",
     "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9c16fdfaaf51f3de9ba8ee1194eef01f3a2979a8.jpg",
     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg&refer=http%3A%2F%2Fa1.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=6500d50b1680d27bb60fe044e90ce41b",       
            ],
    imgUrl:'',
    preUrl:'',
    ximg:true,
    preop:0,
    i:0
  },
  onInit: function () {
      this.imgUrl = this.imgsrc[0]
  },
      ...     //省略
  imgcomplete2() {
      console.log('imgcomplete 2')
      var options = {
        duration: 10,
        easing: 'linear',
        delay: 0,
        fill: 'forwards',
        iterations: 1
      }
      var frames = [{
        opacity: 0
      },
      {
        opacity: 1
      }];
      var animation = this.$element('img2').animate(frames, options);
      animation.play();
    },
}
</script>

For more details, please see:

Fast application animation:

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-animate

Quickly apply common styles:

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-common-settings#h1-1575449213432

Original link: https://developer.huawei.com/consumer/cn/forum/topic/0203471561239050262?fid=0101271690375130218&pid=0303471561239050087
Original Author: Mayism