小程序仿直播点赞动效（不基于canvas）

最新推荐文章于 2023-02-01 00:30:21 发布

在路上_a

最新推荐文章于 2023-02-01 00:30:21 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： js

本文链接：https://blog.youkuaiyun.com/abc_26zm/article/details/106869629

版权

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种仿直播点赞动效的实现方法，通过随机数生成和动画控制，实现点赞图标从屏幕顶部飘落并消失的效果。使用了WXML和WXSS结合JS逻辑进行动态渲染，展示了如何在小程序中实现互动性强的UI动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿直播点赞动效

<view class="listImg">
	<block wx:for="{{list}}" wx:key="index">
		<image class="heart_img {{number == index?'active': ''}}" src="../../images/heart{{item}}.png"></image>
	</block>
</view>
<view class="click" bindtap="translate">调用事件</view>

 data: {
    list: ['1', '2', '3',],
    number: -1
  },

  randomNum(minNum, maxNum) {
    console.log(1)
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10);
        break;
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
        break;
      default:
        return 0;
        break;
    }
  },
translate() {
  console.log(2)
    let randomNum = this.randomNum(-30, 30)
    // number是控制active的
    this.setData({
      number: this.data.number + 1
    }, () => {
      if (this.data.number > 4) {
        this.setData({
          number: -1
        })
      }
    })
    // .active 是选择器
    this.animate('.active', [{
        opacity: 1,
        translateY: 0
      },
      {
        opacity: 0,
        translate: [randomNum, -200]
      },
    ], 1000, function () {
  //动画完成后的回调函数
    }.bind(this))
  },