微信小程序点赞动画特效实现

这里提供两种实现点赞动画特效的方法:

方法一:使用 CSS 动画

  1. wxml 文件:

    <view class="like-container"> <image src="{{isLiked ? likedImg : unlikedImg}}" class="like-icon {{isLiked ? 'liked' : ''}}" bindtap="toggleLike"></image> </view>
  2. wxss 文件:

    .like-container {
    position: relative;
    }

    .like-icon {
    width: 30px;
    height: 30px;
    }

    .liked {
    animation: likeAnimation 0.5s ease-out;
    }

    @keyframes likeAnimation {
    0% {
    transform: scale(1);
    opacity: 0;
    }
    50% {
    transform: scale(1.5);
    opacity: 1;
    }
    100% {
    transform: scale(1);
    opacity: 0;
    }
    }

  3. js 文件:

    Page({
    data: {
    isLiked: false,
    likedImg: '/path/to/liked-icon.png',
    unlikedImg: '/path/to/unliked-icon.png',
    },
    toggleLike() {
    this.setData({
    isLiked: !this.data.isLiked
    })
    }
    })

解释:

  • 在 wxml 中,使用 image 组件展示点赞图标,并绑定 toggleLike 函数到点击事件。
  • 在 wxss 中,使用 @keyframes 定义动画 likeAnimation,实现缩放和渐隐效果。
  • 在 js 中,通过 isLiked 变量控制点赞状态,并动态切换图片和添加动画效果。

方法二:使用 canvas 绘制动画

  1. wxml 文件:

    <view class="like-container"> <canvas canvas-id="likeCanvas" class="like-canvas"></canvas> <image src="{{isLiked ? likedImg : unlikedImg}}" class="like-icon" bindtap="toggleLike"></image> </view>
  2. wxss 文件:

    .like-container {
    position: relative;
    }

    .like-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    }

    .like-icon {
    width: 30px;
    height: 30px;
    }

  3. js 文件:

    Page({
    data: {
    isLiked: false,
    likedImg: '/path/to/liked-icon.png',
    unlikedImg: '/path/to/unliked-icon.png',
    },
    toggleLike() {
    this.setData({
    isLiked: !this.data.isLiked
    })
    this.drawLikeAnimation()
    },
    drawLikeAnimation() {
    const ctx = wx.createCanvasContext('likeCanvas', this)
    // ... 使用 canvas API 绘制点赞动画,例如:绘制心形、气泡等
    }
    })

解释:

  • 在 wxml 中,使用 canvas 组件作为动画容器,并使用 image 组件展示点赞图标。
  • 在 wxss 中,将 canvas 组件绝对定位在 image 组件上方。
  • 在 js 中,使用 canvas API 绘制点赞动画,例如绘制心形、气泡等。

两种方法的比较:

  • CSS 动画简单易用,但效果较为单一。
  • Canvas 动画更加灵活,可以实现更复杂的动画效果,但需要编写更多代码。

总结:

以上两种方法都可以实现点赞动画效果,您可以根据实际需求选择合适的方案。

相关推荐
不老刘3 分钟前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
橘猫云计算机设计8 分钟前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
Mr.Liu61 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
沐土Arvin2 小时前
Nginx 核心配置详解与性能优化最佳实践
运维·开发语言·前端·nginx·性能优化
小程序照片合成13 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
教练 我想学编程13 小时前
学习记录706@微信小程序+springboot项目 真机测试 WebSocket错误: {errMsg: Invalid HTTP status.}连接不上
spring boot·学习·微信小程序
haoranyyy14 小时前
mac环境中Nginx安装使用 反向代理
linux·服务器·nginx
ak啊16 小时前
Nginx 高级缓存配置与优化
nginx
arbboter16 小时前
【AI插件开发】Notepad++ AI插件开发实践:从Dock窗口集成到功能菜单实现
人工智能·notepad++·动态菜单·notepad++插件开发·dock窗口集成·ai代码辅助工具·ai对话窗口
再学一丢丢20 小时前
Keepalived+LVS+nginx高可用架构
nginx·架构·lvs