扫码查看动画效果 

当前使用的微信小程序是Skyline模式。webview一样可以使用，而且能更高效的直接替换URL使用。但是由于性能问题，建议在Skyline模式下使用！

1、挑选喜欢的ICON

动态ICON官网：18,700+ Animated Icons - Lordicon

2、将ICON导出成gif 和 png

由于小程序不支复杂的canvas动画，且Lottie的canvas部分语法不支持。所以使用GIF代替是最好的方式

gif不要循环，否则会一直循环，就不好看了

3、使用两个image替换显示

之所以使用两个image是因为skyline模式直接替换src的话，gif图片不会加载且会卡死。

webveiw模式可以直接用src替换的方式

WXML:

<view class="search-history-clean-icon" bind:tap="cleanHistory">
            <image wx:if="{{trashGif}}" class="search-history-clean-icon-gif" src="/assets/image/trash.gif" />
            <image class="search-history-clean-icon-png" style="opacity: {{trashGif?0:1}};transition: opacity 0.2;" src="/assets/image/trash.png" />
        </view>

JS： 

data: {
    trashGif:false
},
cleanHistory(){
        var that = this;
        if(this.data.trashGif){
            this.setData({trashGif:false})
        }else{
            this.setData({trashGif:true})
            setTimeout(()=>{
                that.setData({trashGif:false})
            },500)
        }
    }

方式很简单，让两个image轮流显示就能达到动态的效果了！！！！