第五章：拼团成功组件

在落地页中加入拼团成功动画。同样也是使用组件实现。

动画效果设计为，开始显示两个人已在团内，另有一个人的头像在拼团成功时飞入第三个头像框，表示拼团成功。同时文字由“即将成团”变成“拼团成功”。并且倒计时持续刷新。拼团成功会有一个标志章显示出来，然后头像和拼团文字整体向上滚动，最后刷新出下一组拼团头像。
最右侧是一个去拼团的点击按钮。
写动画的难点不是动作怎样写，而是整体的节奏感是否协调。

分析界面布局：

纵向布局分三层

• 第一层标题，里面水平结构，包含三个文字。
• 第二层头像，文字，按钮，另外还有一个飞动的图片。这里头像又可以做成组件。
• 第三层是一个拼团成功的图片。

PinTuan组件

<view class="wrap">
  <view class="text-wrap">
    <text>还差</text>
    <text class="persion-num">{{personNum}}人</text>
    <text>成团，可直接参与</text>
  </view>

  <view class="pintuan-content">
    <PinTuanHead class="pin-tuan" headUrls="{{headUrls}}" animation="{{pinTuanAni}}" bindtransitionend="pinTuanAniEnd" isNeedLogin="{{isNeedLogin}}"></PinTuanHead>
    <view class="join" animation="{{pinTuanAni}}" bindtransitionend="pinTuanAniEnd">
      <text class="join-text">{{joinText}}</text>
      <text class="clock">还剩{{clockText}}</text>
    </view>
    <image animation="{{headAniData}}" bindtransitionend="headAniEnd" class="move-head" src="{{moveHead}}"></image>
    <button class="goGroup" bindtap="getUserProfile">去参团</button>
  </view>
  <image wx:if="{{pinTuanSuccess}}" class="successed" src="{{successedImg}}" mode="widthFix"
    animation="{{successAni}}" bindtransitionend="successAniEnd" style="transform: scale(0.3) opacity(0)"></image>
  <view class="bottom-border"></view>
</view>

animation动画

使用animation动画，可以实现复杂的动作流程。动画的开始和结束都需要处理逻辑。
创建动画后，需要导出一下，代码实现如下：

let ani = wx.createAnimation({
    delay: 0,
    duration: 500,
    timingFunction: 'ease'
});
ani.opacity(0).translateY(-30).step();
this.setData({
    pinTuanAni: ani.export()
});

先设置动画属性，再设计动画运动轨迹，最后导出：

• timingFunction: 'ease' 设置缓动效果。
• ani.opacity(0).translateY(-30).step(); 先透明度为0，然后Y轴坐标。
• step() 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
• bindtransitionend 是设置动画结束时的回调函数。

代码和样式请下载资源包，对应 PinTuan 文件夹下，因篇幅有限，这里不列出详细代码

PinTuanHead组件

分析界面布局：

三个头像，分为头像背景图，和真实头像图。并且需要动态控制头像显示。

<view class="wrap">
  <image wx:if="{{person1Show}}" class="icon" src="{{headUrls[0].avatar}}" mode="widthFix"></image>
  <image wx:else class="back" src="{{backImg}}" mode="widthFix"></image>

  <image wx:if="{{person2Show}}" class="icon" src="{{headUrls[1].avatar}}" mode="widthFix"></image>
  <image wx:else class="back" src="{{backImg}}" mode="widthFix"></image>

  <image wx:if="{{person3Show}}" class="icon" src="{{headUrls[2].avatar}}" mode="widthFix"></image>
  <image wx:else class="back" src="{{backImg}}" mode="widthFix"></image>
</view>

代码和样式在资源包 PinTuanHead 文件夹

Tips:

• 样式中使用 :nth-child 表示同类标签的第几个标签。这类伪标签可以节省 wxml 空间，减少 document 渲染的节点数量。