小程序animation动画效果综合应用案例（交流QQ群：604788754）

如果案例有问题，可到QQ群找到今日相关压缩文件下载测试。

WXML:

  <view class="cebian">
    <view  animation="{{animation}}">
      <view class="cebian01">
        <text class="cebian011">电话</text>
      </view>
      <view class="cebian02">
        <text class="cebian021">发布</text>
      </view>
      <view class="cebian03">
        <text class="cebian031">咨询</text>
      </view>
    </view>

    <view class="cebian04" bindtap="anniuhide">
      <image src="{{anniuimg}}"  animation="{{animations}}"></image>
    </view>
  </view>

WXSS:

.cebian {
  width: 50px;
  height: auto;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 60px;
  right: 20px;
  z-index: 10;
  overflow: hidden;
}
.anniu{
  position: relative;
  left: 50px;
}
.cebian01, .cebian02,.cebian03,.cebian04 {
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 60px;
  color: #fff;
}
.cebian02,.cebian03,.cebian04{
  margin-top: 10px;
}
.cebian01{
  background-color: #50cb67;
}
.cebian02{
  background-color: #6785e5;
}
.cebian03{
  background-color: #ec4149;
}
.cebian04{
  background-color: #949494;
  position: relative;
}
.cebian04>image{
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
  
}

JS:

Page({
  data: {
    jiantous: false,
    anniuimg: '/picture/jiantou01.png',
  },
  /*右侧按钮部分效果*/
  onReady: function () {
    this.animation = wx.createAnimation();
    this.animations = wx.createAnimation()
  },
  anniuhide: function () {
    var leftjian = this.data.jiantous;
    if (leftjian == false) {
      this.animation.translate(50, 0).step();
      this.animations.rotate(180).translate(3,0).step();
      leftjian = true;
    } else {
      this.animation.translate(0, 0).step();
      this.animations.rotate(0).translate(0, 0).step();
      leftjian = false;
    }
    this.setData({
      animation: this.animation.export(),
      animations: this.animations.export(),
      jiantous: leftjian,
    });
  },
})

效果图：