The caption below is for cuteness only

I haven’t written my blog for a long time, so today I bring you a little trouble. It’s a bit of a struggle, but it’s still a lot of work, as one blogger writes: Front-end engineers who want to stand out from the crowd need to pull out scratch paper, hence this ugly illustration:

The above content is the abstract of the article

Here’s what happened:

cute-qq-redpoint

SVG+JS to achieve the new version of mobile QQ gesture elimination red dot message animation. You can open mobile QQ and drag the red dot in the bottom menu message bar to experience. This plugin aims to achieve this effect.

Principle and part of the code

It’s a little rough, but the basics are there. By calculating the four coordinate positions in the draft and updating path D in TouchMove, the two quadratic Bezier curves are key. The reference coordinates of quadratic Bessel curves can be easily obtained: the centers of the lines connecting the centers of two circles are the reference points. So the code is as follows:

1 (function(){ 2 'use strict'; 3 4 var initCircle = document.getElementById('initCircle'); 5 var finalCircle = document.getElementById('finalCircle'); 6 var aPath = document.getElementById('animationPath'); 7 8 var touchFingers; / / cache touches queue 9 10 / / initial round coordinate 11 var x0 = parseInt (initCircle. GetAttribute (" cx ")); 12 var y0 = parseInt(initCircle.getAttribute('cy')); 13 var r0 = parseInt(initCircle.getAttribute('r')); // Final coordinates of the circle 16 var x1; 17 var y1; 18 var r1 = parseInt(finalCircle.getAttribute('r')); 19 20 //setter 21 Element.prototype._setter = function (options) { 22 var attr; 23 for(attr in options){ 24 if(options.hasOwnProperty(attr)){ 25 this.setAttribute(attr, options[attr]); 26} 27} 28}; 29 30 var updateF = function updateTouches(event) { 31 touchFingers = event.touches[0]; 32}; 33 34 35 var renderThing = function () { 36 37 x1 = touchFingers.clientX; 38 y1 = touchFingers.clientY; Var pX = x0 - ((x0-x1) / 2); 42 var pY = y0 - ((y0 - y1) / 2); Var _gX = math.abs (x0-x1); 46 var _gY = Math.abs(y0 - y1); Var longL = math.sqrt (_gX * _gX + _gY * _gY); var longL = math.sqrt (_gX * _gX + _gY * _gY); 50 51 var sinX = _gY / longL; 52 var cosX = _gX / longL; Var fourPoints = [56 'M', 57 x0 + r0 * sinX, 58 y0 + r0 * cosX, 59 'Q', 60 pX, 61 pY, 62 x1 + r1 * sinX, 63 y1 + r1 * cosX, 64 'L', 65 x1 - r1 * sinX, 66 y1 - r1 * cosX, 67 'Q', 68 pX, 69 pY, 70 x0 - r0 * sinX, 71 y0 - r0 * cosX, 72 'Z' 73 ]; 74 75 finalCircle._setter({ 76 cx: x1, 77 cy: y1 78 }); APath._setter({82 d: fourpoints.join (' ') 83}); 84 85}; 86 87 document.addEventListener('touchstart', function (e) { 88 e.preventDefault(); 89 touchFingers = e.touches[0]; 90}); 91 92 document.addEventListener('touchmove', function (e) { 93 e.preventDefault(); UpdateF (e); 95 renderThing(); 96}); 97 98 99} ());Copy the code

demo

Open the Codepen online Demo with your mobile phone

TODO

  1. Realize the elastic coefficient K, simulate the situation of tensile fracture, add the initial circle radius reduction control
  2. Plug-in processing

Github

The source address