21.微信小程序之动画animation

最新推荐文章于 2026-05-21 12:09:45 发布

原创

最新推荐文章于 2026-05-21 12:09:45 发布 · 1.1k 阅读

收录于

从学校回来后，已经连上了9天的班。。

白天写代码，晚上回家大佬组织在线测试。。。

从双休→单休→不休 [○･｀Д´･ ○]

好了，说说动画吧。实现一个动画效果以开红包为效果。点击旋转着出现，再点旋转着消失

一.效果图

二、代码

1.redPackte.wxml

<button bindtap='takeReaPacket' class="btn">抢红包</button>

<view  wx:if="{
  
  {isShow}}" class='mask'>
  <view animation="{
  
  {animationData}}" class='redPacket'>
    <view class='desc'>
      <image src='{
  
  {manIcon}}'></image>
      <text class='desc-name'>盘子呐</text>
      <text class='desc-tip'>给你发了一个红包</text>
    </view>
    <view class='btn-ok'>