微信小程序之『仿 QQ 消息气泡拖拽消失』
转载:请写明掘金原文链接及作者名 ‘小小小’
一个潜心研究小程序QQ群:139128168 ← 点击加群
今天带来的是仿QQ消息气泡拖拽消失特效,源码中很多地方还是有很多不足,希望大家一起齐心协力,给我提出宝贵意见,咱们一起来继续完善此效果~~
先看效果:
原理并没有想象得那么简单,我们拆分来逐步分析~~
1)实现静态效果
先看效果:
上图看着很头疼,就算静态,也完全没有思路,我们将填充色去掉,留下曲线,再看看效果(盗用别人一张图):
这样思路就清晰很多,其实就是由两个圆、两条直线、两条曲线构成:
js代码如下:
// 两条贝塞尔曲线和两条直线
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.quadraticCurveTo(this.anchorX, this.anchorY, x2, y2);
this.ctx.lineTo(x3, y3);
this.ctx.quadraticCurveTo(this.anchorX, this.anchorY, x4, y4);
this.ctx.lineTo(x1, y1);
this.ctx.setFillStyle('red');
this.ctx.fill();// 两圆圈
this.ctx.beginPath();
this.ctx.arc(this.startX, this.startY, this.radius, 0, 2 * Math.PI)
this.ctx.arc(this.x, this.y, 20, 0, 2 * Math.PI)
this.ctx.setFillStyle('red');
this.ctx.fill();
如上代码即画出我们想要的静态效果。
再献上一张图,表示如上坐标点(又无耻盗图了):
坐标点:
(x1, y1)为A点
(x2, y2)为B点
(x3, y3)为C点
(x4, y4)为D点
(anchorX, anchorY)为X点
2)如何让气泡消息动起来
先看效果(再tm无耻盗图→_→):
js代码:
touchmove: function(e){this.x = e.changedTouches[0].x;this.y = e.changedTouches[0].y;this.anchorX = (e.changedTouches[0].x + this.startX)/2;this.anchorY = (e.changedTouches[0].y + this.startY)/2;
}
其实就是如上一个touchmove事件,x、y为手指移动的位置坐标,将x、y与气泡定位曲线和圆圈等关联起来,那么手指移动的时候,气泡也会跟着移动了,从而实现动起来的效果~~
3)如何拉断气泡
先看效果(终于没有盗图了):
js代码:
if(this.radius < 7){//写去除曲线链条,只留下消息...
}
有没有发现,拉得越长时候,初始位置小圆半径越来越小,当半径小于7的时候,我们就可以认定其为拉断。(至于拉断消失,源码很简单,朋友们自己去看)
4)松开手后,气泡消息消失
js代码:
touchend: function(e){// 松手后消息消失this.ctx.setFillStyle('rgba(1,1,1,0)');this.ctx.draw();
}
很简单,就是将整个颜色绘制成透明度为0,那么就实现消失效果。
参考文献:
- http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0311/2577.html
- http://blog.csdn.net/gesanri/article/details/48490873
源码下载
『 咻咻咻咻duang,是不是又忘了关注 →_→』
微信小程序之『仿 QQ 消息气泡拖拽消失』相关推荐
- 仿QQ消息气泡拖拽效果
此次的自定义View是仿qq消息列表,消息气泡拖拽效果. 1.原理介绍:自定义view,绘制原始点圆,touch点圆,然后将两圆用贝塞尔曲线连接并填充. 2.应用WindowManager,将自定义v ...
- Android qq消息气泡实现效果,BezierDemo源码解析-实现qq消息气泡拖拽消失的效果
这篇文章中我们比较了DraggableFlagView和BezierDemo两个项目的区别,提到将对其中一个做源码分析,那么我们就来分析BezierDemo的源码吧,因为这个项目的源码最简单,可以更直 ...
- 微信小程序--云开发仿QQ动态发布(发布内容、图片)
前言 微信小程序的云开发非常适合初级开发者,特别是对传统后端不是了解的开发者非常友好,我们只需要根据开发文档查找对应的函数即可(当然,微信开发文档坑是非常的多啊,一定要小心!) 下面就用云开发做一个类 ...
- 微信小程序播放音乐(仿QQ音乐)
效果图如下所示 .wxml <image mode="widthFix" class="music-image" src="{{mush[num ...
- 微信小程序图片上传、多图拖拽排序功能
基于movable-view实现的拖拽功能 可以建一个 dragImg的文件 wxml的代码 <view class="container"><movable-a ...
- 基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
- php微信发送客服消息,微信小程序API 发送客服消息
微信小程序API 发送客服消息 发送客服消息 当用户和小程序客服产生特定动作的交互时(具体动作列表请见下方说明),微信将会把消息数据推送给开发者,开发者可以在一段时间内(目前修改为48小时)调用客服接 ...
- 微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布 效果图 效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
- 分享微信小程序资讯类仿LOL盒子开发
分享微信小程序资讯类仿LOL盒子开发 一.主要功能 联盟盒子微信小程序功能分为管理员和非管理员功能.系统拥有多个非管理员用户,管理员用户仅有一个角色,对于管理员而言,管理员一般拥有操作用户信息比如更改 ...
最新文章
- 《ASP.NET 1.1入门经典—— VISUAL C# .NET 2003编程篇》学习笔记和心得 - 第十章
- Python生成器(send,close,throw)方法详解
- ORACLE---Unit04: SQL(高级查询)
- MYSQL8.0 排序查询报错 this is incompatible with sql_mode=only_full_group_by
- 科罗拉多州立大学计算机优势,盘点科罗拉多州立大学优势专业主要看排行榜
- MPP文件怎么打开?五种方法总有最合适!
- 计算机保研面试题-数据结构
- 越喜欢村上春树,就越懂得生活
- 中企海外周报 | 中国品牌闪耀亮相2019 IFA
- 电子制作之制作工具篇
- 光学瞄准镜测距之数学原理
- Android数据存储安全实践
- scrapy 两类item_手把手教你进行Scrapy中item类的实例化操作
- 先验概率、后验概率以及共轭先验
- CentOS系统的安装
- 制度是绝情的,管理是无情的,执行是合情的
- 蜗牛星际风扇噪音的简单解决方案
- ajax调用远程webservice,ajax跨域请求调用webservice接口
- 个人博客建站教程wordpress+wdcp(小白入门首选)
- Apexテストコード作成の落とし穴