To achieve the image switchover effect, two image elements are stacked. One element's transparency changes from 1 to 0 to gradually disappear, so the other can appear. However, the previous image occasionally flickers and then disappears.
The code where the exception occurs is as follows:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
In the preceding code, the switchover effect is implemented by changing the transparency of the two image elements. The transparency is set in CSS of the second image element. However, the transparency animation is configured on this element in the imgcomplete() method. That is, the transparency value changes from 1 to 0. But the transparency variable preop bound to the CSS is set to 1.
This exception occurs when the animation completion time is earlier than the CSS implementation time.
Instead delete style="{{'opacity:' + preop + ';'}}" of the second image element in the template. Instead, change the transparency from 0 to 1 to achieve the effect.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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] | |
| }, | |
| ... // The code is not demonstrated here. | |
| 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 information, please visit the following links:
Common Events
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-events-0000001123530338
Top comments (0)