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

本文实例为大家分享了小程序animate动画实现直播间点赞的具体代码,供大家参考,具体内容如下

代码:

<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))
   },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 微信小程序实现点赞业务
  • 小程序云开发教程如何使用云函数实现点赞功能
  • 微信小程序实现点赞、取消点赞功能
  • 小程序实现列表点赞功能
  • 微信小程序实现列表页的点赞和取消点赞功能
  • 小程序点赞收藏功能的实现代码示例
  • 微信小程序项目总结之点赞 删除列表 分享功能
  • 微信小程序基于本地缓存实现点赞功能的方法
  • 微信小程序小组件 基于Canvas实现直播点赞气泡效果
张贴在2