지도의 풍선이 늘어나는 애니메이션

Google 지도에서 바닥글에 표시한 이미지를 호버하면 어쩐지 말풍선이 늘어나는지 아십니까?
거기에 가까운 것을 해보고 싶어서 만들어 보았습니다.

이것입니다.



지도에는 오픈 소스 지도 라이브러리Leaflet를 사용합니다.
Leaflet은 Facebook이나 Evernote 또는 주요 웹 서비스에 사용됩니다.
본 적 없어?



이야기가 벗어났습니다.

주제에 들어가자.
연설 거품에서 나오는 선을 잡아 마커까지 당기는 애니메이션을 SVG로 만듭니다. 직선이 늘어날 뿐이기 때문에 간단할 것.

기존 풍선

Leaflet 표준 연설 거품은 이런 느낌.
풍선 컨테이너는 다음 HTML로 구성되었습니다.

<div class="leaflet-popup-tip-container">
  <div class="leaflet-popup-tip"></div>
</div>

leaflet-popup-tip 실제로 흰색 연설 거품 선의 부분입니다.
사각형의 흰색 <div>을 transform: rotate(45deg);로 45도 회전시켜 연설 선을 표현하는 것 같습니다.

으뜸이 늘어나는 연설선

<div class="leaflet-popup-tip"></div>를 지우고 <svg>와 <path>를 찔러보십시오.
그 때 선이 늘어나는 애니메이션도 추가.
SVG 부분은 D3에서 구현되었습니다.

// 吹き出しの表示イベント
map.on('popupopen', function (e) {
  // 吹き出し線コンテナ DIV に SVG を配置
  var svg = d3.select(".leaflet-popup-tip-container").append("svg")
    .attr({
      class: 'leaflet-popup-tip-svg',
      width: 2,
      height: 100,
  });
  // 吹き出し線グラフィックの作成
  var c1 = [1, 0];
  var c2 = [1, 91];
  var carray = [c1, c2];
  var line = d3.svg.line()
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];});
  var path = svg.append('path')
    .attr({
      'class': 'leaflet-popup-tip-path',
      'd': line(carray), // SVG 描画範囲での線の頂点座標
      'stroke': 'rgba(255,100,0,0.8)', // 線の色
      'stroke-width': 2, // 線の太さ
      'stroke-dashoffset': 91 // 点線の開始位置 = 線の全長
    })
    .style("stroke-dasharray", "91") // 点線の長さ = 線の全長
    .style("stroke-linecap", "round");
  // アニメーションの実行
  path.transition().delay(300).duration(1000).attr('stroke-dashoffset', 0); 
});

선이 늘어나는 애니메이션은 다음 두 가지로 실현됩니다.

stroke-dasharray (점선 길이) : 선의 전체 길이와 함께 실선이됩니다

stroke-dashoffset (점선의 시작 위치) : 선의 전체 길이와 함께 사용하면 선이 모두 깨진 상태가되고 0으로 설정하면 모든 항목이 표시됩니다

연설 거품이 사라지면 SVG 요소도 사라지고 다시 표시되면 같은 방식으로 SVG 요소가 만들어지고 애니메이션이 실행됩니다.

// 吹き出しを閉じたら SVG 要素を削除
map.on('popupclose', function (e) {
  e.popup._tipContainer.children[1].remove();
});

자세한 움직임과 로직은 데모 및 출처을 참조하십시오.