乐趣区

关于appgallery-connect:image组件动画问题

jiezi

景象形容：

stack 组件下应用两个 image 组件重叠，一个 image 组件通过动画款式设置透明度从 1 -0，暗藏起来，另一张显示进去，从而来实现图片切换，前一张图片会概率性的闪现而后隐没。

问题代码如下：

<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>

问题剖析：
上述代码用两个 image 组件实现了图片切换时淡入淡出的动画成果，次要是通过透明度实现的。第二个 image 的 css 中设置了透明度，然而 imgcomplete() 办法中又对该 image 组件做了透明度动画，透明度值从 1 到 0，同时代码中又将 css 中绑定的透明度变量 preop 设置为 1。

当动画办法实现工夫先于 css，就会呈现这个状况。

解决办法：
template 中第二个 image 组件的 style=”{{‘opacity:’ + preop + ‘;’}}” 去掉，改为通过动画款式来调用，从 0 - 1 变动。

批改代码如下：

<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>

欲了解更多详情，请参见：

快利用动画：

https://developer.huawei.com/…

快利用通用款式：

https://developer.huawei.com/…

原文链接：https://developer.huawei.com/…
原作者：Mayism

退出移动版