小程序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))
   },

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

赞 (0)

相关推荐

  • 小程序实现列表点赞功能

    最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应文章列表的id (我用的是 wx:for 列表渲染 加 template 模板来实现文章列表的,所以如果没找到对应的 id ,点赞时可能会出现点击一个列表,别的列表也会发生变化的事件) 2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存 后面通过缓存判断该文章是否

  • 微信小程序实现点赞业务

    微信小程序实现点赞业务

    本文实例为大家分享了微信小程序实现点赞业务的具体代码,供大家参考,具体内容如下 一.效果 二.实现 1.逻辑 1.从登录界面时,用户数据已经缓存到本地,在onload中从本地获取用户信息保存在data.userInfo中 2.判断用户的_openid是否在loveList返回的列表中,如果是取消赞,如果不是点赞加入昵称到loveList中 3.下面用的是nickName判断,后期优化成使用_openid判断 2.wxml <!-- wx:index = "index":列表循环后

  • 微信小程序基于本地缓存实现点赞功能的方法

    本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法 注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind

  • 微信小程序实现点赞、取消点赞功能

    微信小程序实现点赞、取消点赞功能

    最近接触到小程序,发现很有意思,在项目中遇到了一点小问题,就是点赞+取消点赞有些冲突,还有就是多项的点击,话不多说咱们直接上代码! 效果图 wxml <block wx:for="{{msg}}"> <image class='imgList' hidden='{{item.show}}' bindtap='zan' data-index='{{index}}' src='../resizeApi.png'></image> <image cl

  • 微信小程序实现列表页的点赞和取消点赞功能

    今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; var data = e.currentTarget.dataset; var mid = data.mid; var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid var isadd = 1; var newmessage = [];

  • 微信小程序项目总结之点赞 删除列表 分享功能

    小程序点赞功能 思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表 判断点击的id 2.如果id相同 判断是否点赞过 如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con

  • 微信小程序小组件 基于Canvas实现直播点赞气泡效果

    微信小程序小组件 基于Canvas实现直播点赞气泡效果

    先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: drawImage:function(data){[/align] var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一个控制点坐标值*/ var p12= data[0][2]; /* 三阶贝塞尔曲线第二个控制点坐标值*/ var p13= data[0][3]; /* 三阶贝塞尔曲线终点坐标值*/ var

  • 小程序点赞收藏功能的实现代码示例

    本文介绍了小程序点赞收藏功能的实现代码示例,分享给大家,具体如下: /收藏/ focusFavoriteTab: function (e) { var that = this; var isFocus = that.data.isFocus; console.log("isFocus", isFocus) var itemId = that.data.itemId; if (isFocus) { favoriteService.cancel(that, itemId).then((re

  • 小程序云开发教程如何使用云函数实现点赞功能

    小程序云开发教程如何使用云函数实现点赞功能

    本文我们就要使用高大上的云函数了,实现点赞功能 什么是云函数? 云函数 云函数即在云端(服务器端)运行的函数. 在物理设计上,一个云函数可由多个文件组成,占用一定量的CPU 内存等计算资源:各云函数完全独立:可分别部署在不同的地区. - 当云函数被小程序端调用时,定义的代码会被放在Node.js 运行环境中执行. 新建的项目中其实有云函数的示例可以参考. 首先,我们在cloudfunctions 文件夹右键,新建一个nodeJs云函数, 然后命名为vote, 点击回车,等一会它会弹窗,告诉我们要

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

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

    本文实例为大家分享了小程序animate动画实现直播间点赞的具体代码,供大家参考,具体内容如下 代码: <view class="listImg">     <block wx:for="{{list}}" wx:key="index">         <image class="heart_img {{number == index?'active': ''}}"  src="../

  • Android 仿微信小程序入口动画

    Android 仿微信小程序入口动画

    目录 效果对比 流程分析 自定义ViewGroup 小程序缩放比例值计算 动画遮罩 MainActivity 效果对比 微信原版 仿照效果 流程分析 自定义ViewGroup 整个布局是通过自定义ViewGroup来管理的,在自定义ViewGroup中,子布局一共有两个,一个是小程序布局,一个是会话列表布局,然后按照上下分别摆放就可以了. package com.example.kotlindemo.widget.weixin import android.content.Context imp

  • vue实现直播间点赞飘心效果的示例代码

    vue实现直播间点赞飘心效果的示例代码

    前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用 示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @

  • 微信小程序的动画效果详解

    微信小程序的动画效果详解

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ

  • mpvue小程序循环动画开启暂停的实现方法

    mpvue小程序循环动画开启暂停的实现方法

    用小程序的 animation 属性实现循环动画的开启与暂停,并封装到组件. 实现一个字体图标组件的循环旋转动画开启/暂停 用于点击图标,字体颜色变换,开始循环旋转动画,并刷新内容 刷新结束,停止动画,并设置字体颜色为原来的 主要利用 setInterval 定时器循环执行动画 首先,组件写出来 添加点击事件,动画属性, style 属性(用来动态修改样式) src/components/refresh.vue <template> <div> <div class=&quo

  • 微信小程序CSS3动画下拉菜单效果

    微信小程序CSS3动画下拉菜单效果

    微信小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个 思路 利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层view元素的高度,当高度为0时,里面嵌套的列表元素被完全隐藏,相当于菜单关闭.而当view元素的高度大于列表元素的高度时,相当于菜单显示. 效果图 wxml button按钮用于触发菜单的打开和关闭,first_click参数使用户第一次点击按钮之前菜单不可见,state参数用于控制菜单的打开和关闭状态

  • 微信小程序 动画的简单实例

    微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:

  • 微信小程序实现循环动画效果

    在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果: 上图中的"关注公众号"动画就是我们要实现的效果. 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明:创建一个动画实例animation.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画

  • 微信小程序实现元素渐入渐出动画效果封装方法

    微信小程序实现元素渐入渐出动画效果封装方法

    开端 之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了.做到类似jQuery show()的效果 原创文章,允许转载分享.但请转载请一定标明出处,这是起码的尊重 本文章阅读前需要对微信小程序的动画api有所了解 先看效果 可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画 解决 1.寻根问底,发现

  • 微信小程序 Animation实现图片旋转动画示例

    最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现. 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image> 注意其中的animati

随机推荐