现象描述：
stack组件下使用两个image组件堆叠，一个image组件通过动画样式设置透明度从1-0，隐藏起来，另一张显示出来，从而来实现图片切换，前一张图片会概率性的闪现然后消失。
问题代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<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变化。
修改代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<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/consumer/cn/doc/development/quickApp-References/quickapp-api-animate
快应用通用样式：
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-common-settings#h1-1575449213432
?
原文链接：https://developer.huawei.com/...
原作者：Mayism