小程序仿写抖音点赞动画

// html
<view class="hearts-container" bindtap="showHeards" >
    <view wx:for="{{hearts}}" wx:for-item="heart" s-key="index" class="heart-box">
       <image src="{{heart.img}}" class="heart" style="{{ heart.style }}" />
    </view>
</view>

// js
const app = getApp();
const rotates = [5, -5, 10, -10, 10, 0, 0, -15, 15, -20, 20];
const img = 'http://p1.meituan.net/scarlett/757d2ca1c072516f8161a77f4315e9d64616.png';

app.MoviePage({
  data: {
    hearts: [],
  },
  onLoad() {

  },
  showHeards(e) {
    let { x, y } = e.detail;
    const rankNum = rotates[Math.ceil(Math.random() * 10)] || 0;
    const that = this;
    let hearts = [];

    if (this.data.timer) {
      clearTimeout(this.data.timer);
      hearts = this.data.hearts;
      hearts.push({
        img,
        style: `top: ${y - 50}px; left: ${x - 50}px; transform: rotate(${rankNum}deg)`,
      });
    } else {
      hearts = [{
        img,
        style: `top: ${y - 50}px; left: ${x - 50}px; transform: rotate(${rankNum}deg)`,
      }];
    }
    const timer = setTimeout(() => {
      that.setData({
        hearts: [],
        timer: null,
      })
    }, 4000);
    this.setData({
      hearts,
      timer,
    });
  },
});

// css
.hearts-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;

    .heart {
      width: 80px;
      height: 80px;
      position: absolute;
      animation: heart 3s 1s forwards;
    }
}

@keyframes heart {
  0% {width: 90px; height: 90px;}
  20% {width: 100px; height: 100px;}
  50% {width: 100px; height: 100px; opacity: 0.5;}
  100% {opacity: 0;}
}