小程序直播间点赞 animate动画实现

最新推荐文章于 2024-09-13 07:17:53 发布

挚友阳光

最新推荐文章于 2024-09-13 07:17:53 发布

阅读量727

点赞数

分类专栏： JavaScript 微信小程序前端技术文章标签：微信小程序 css3 javascript

本文链接：https://blog.csdn.net/qq_41366114/article/details/124210131

版权

前端技术同时被 3 个专栏收录

52 篇文章

订阅专栏

JavaScript

50 篇文章

订阅专栏

微信小程序

27 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中实现直播间点赞的动画效果，利用CSS3和JavaScript技术，通过动态改变点赞元素的样式，创建出丰富的视觉反馈。通过对点赞数的实时更新和动画的流畅播放，提升用户的互动体验。

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

在这里插入图片描述

<view class="listImg">
	<block wx:for="{{list}}" wx:key="index">
        <image class="heart_img {{number == index?'active': ''}}"  src="../../utils/image/{{index+1}}.png"></image>
	</block>
</view>
<view class="click" bindtap="translate">点赞</view>

.listImg{
    position: relative;
    width: 100px;
    height: 300px;
    border: 2rpx solid red;
}
.heart_img{
    width: 100rpx;
    height: 100rpx;
    display: block;
    opacity: 0;
    position: absolute;
    left: 26rpx;
    transform:translateX(-50%);
    bottom: 0;
    
}
click{
    color: #000;
}

    data: {
        list: 9,
        number: -1
    },
  
  randomNum(minNum, maxNum) {
        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() {
      let self = this;
        // 随机数
        let randomNum = this.randomNum(-30, 30);
        let number = this.data.number+1;
        console.log(number)
        // number是控制active的
        this.setData({
          number:number > 9 ? 0:number
        })
        // .active 是选择器
        this.animate('.active', [{
            opacity: 1,
            translateY: 0,
            ease:'else',
            scale: [.6, .6]
          },
          {
            scale: [1, 1],
            translate: [randomNum, -300]
          },
        ], 1500, function () {
          //动画完成后的回调函数
        }.bind(this))
   },