LAZY LINE PAINTERを使ってSVGアニメーションをつくってみた。

ちゃす!! うぇい系男子トランクです^o^

ふとSVG画像でロゴにアニメーションをつけたいなーと思って色々と調べてたら、
LAZY LINE PAINTERを見つけて、LIGの記事とか見たけど、なんかわかりづらかったので、僕なりにSVGアニメーションの実装について書きたいと思います。

（上記のLIGの記事と照らし合わせながら、読んで実装していくと更にわかりやすいかもです♪）

ちょっと長くなるかもしれないですが、順を追って説明していきます。

1.Illustratorでsvgデータを作成する

できたらアウトライン化します。

そして、SVGで保存！！

2.LAZY LINE PAINTERでアニーメーションを生成

LAZY LINE PAINTERはこちら

下記の画像の部分に、先ほど保存したSVGデータをドラックする。
↓

すると、ソースが自動生成されます！（すげぇ！）

昔は、色や線の太さをここで設定できたみたいですが、今はもうありません。

ここで、線の順番を確認します！
ちなみに、順番は、イラレでトレースした順になります。

問題なければ、Copy date to Clipboardをクリックしてソースをコピー！

そして、jsファイルにペースト！
適当に名前をつけて、保存しましょう(*^^*)
僕はscript.jsとつけました。

3.HTMLを編集

まずは、読み込みファイルの設定。
今回読み込むのは以下の3つ。

1.jQueryの読み込み

2.lazylinepainterのjsファイルの読み込み（DLはこちらより！）

3.LAZY LINE PAINTERで生成したjsファイルの読み込み

※昔はraphael.jsというのを読み込まないといけなかったみたいですが、今は必要ありません。

ちなみに、LAZY LINE PAINTERで以下のソースが生成されました。

/* 
 * Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * 
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  
 *  
 */ 
 
var pathObj = {
    "smaphoto_logo": {
        "strokepath": [
            {
                "path": "M21.2,11.9c2.2,0,3.5,1.2,3.5,3c0,3.6-4.7,10.5-5.1,11c9.7,7.9,10,8.8,10,10.2c0,1.5-1.7,3.1-3.3,3.1    c-0.8,0-1.3-0.3-2.1-1.1c-3.2-3.4-5.1-5.3-8.1-7.8c-2.4,2.7-5.6,5.4-8.7,7.3c-2.5,1.6-3.4,2-4.4,2c-1.7,0-3-1.5-3-3.3    c0-1.6,0.7-1.9,3-3.1c10.5-5.3,14.7-14.7,14.7-15.5c0-0.2-0.1-0.4-0.5-0.4H4.4c-1.4,0-2.2-1-2.2-2.7c0-1.8,0.8-2.7,2.2-2.7H21.2z",
                "duration": 600
            },
            {
                "path": "M58.7,12.2c1.7,0,2.3,0.1,2.9,0.5c0.8,0.5,1.3,1.4,1.3,2.6c0,3.5-6.7,11.3-12.1,15.1c2.3,2.6,3.9,4.5,3.9,6    c0,1.5-1.8,3-3.5,3c-0.8,0-1.4-0.3-2.1-1.3c-3.8-5-6.9-8.2-9.8-10.6c-1.6-1.4-2-1.9-2-2.8c0-1.5,1.7-3.1,3.3-3.1    c1.2,0,2.2,0.9,6.4,4.8c3.7-2.4,8.1-7.7,8.1-8.3c0-0.2-0.2-0.3-0.8-0.3h-20c-1.4,0-2.2-1-2.2-2.8c0-1.8,0.8-2.7,2.2-2.7H58.7z",
                "duration": 600
            },
            {
                "path": "M85.2,29h-7.1v7.3c0,1.6-1.3,2.9-3,2.9c-1.6,0-2.9-1.3-2.9-2.9v-22c0-1.8,1.5-3.4,3.4-3.4h9.7    c6.1,0,9.4,4.1,9.4,9C94.7,24.9,91.3,29,85.2,29z M84.5,16.2h-6.3v7.6h6.3c2.4,0,4.1-1.5,4.1-3.8C88.6,17.6,86.8,16.2,84.5,16.2z",
                "duration": 600
            },
            {
                "path": "M120.7,39.2c-1.6,0-3-1.3-3-3v-9h-13.2v9.1c0,1.6-1.3,2.9-3,2.9c-1.6,0-2.9-1.3-2.9-2.9V13.6    c0-1.6,1.3-2.9,3-2.9c1.6,0,2.9,1.3,2.9,2.9V22h13.2v-8.3c0-1.6,1.3-2.9,3.1-2.9c1.6,0,2.9,1.3,2.9,2.9v22.6    C123.7,37.9,122.3,39.2,120.7,39.2z",
                "duration": 600
            },
            {
                "path": "M143.1,39.5c-8.4,0-14.6-6-14.6-14.5c0-8.4,6.2-14.5,14.6-14.5c8.5,0,14.7,6,14.7,14.5    C157.7,33.4,151.6,39.5,143.1,39.5z M143.1,15.8c-5.2,0-8.5,3.9-8.5,9.2c0,5.2,3.3,9.2,8.5,9.2s8.5-4,8.5-9.2    C151.6,19.7,148.2,15.8,143.1,15.8z",
                "duration": 600
            },
            {
                "path": "M180.1,16.2h-5.8v20c0,1.6-1.3,3-3,3c-1.6,0-3-1.3-3-3v-20h-5.8c-1.4,0-2.6-1.2-2.6-2.7    c0-1.4,1.2-2.6,2.6-2.6h17.7c1.4,0,2.6,1.2,2.6,2.6C182.6,15,181.5,16.2,180.1,16.2z",
                "duration": 600
            },
            {
                "path": "M199.3,39.5c-8.4,0-14.6-6-14.6-14.5c0-8.4,6.2-14.5,14.6-14.5c8.5,0,14.7,6,14.7,14.5    C214,33.4,207.8,39.5,199.3,39.5z M199.3,15.8c-5.2,0-8.5,3.9-8.5,9.2c0,5.2,3.3,9.2,8.5,9.2s8.5-4,8.5-9.2    C207.8,19.7,204.5,15.8,199.3,15.8z",
                "duration": 600
            },
            {
                "path": "M137.2,24.8c0,3.5,2.8,6.2,6.2,6.2s6.2-2.8,6.2-6.2H137.2z",
                "duration": 600
            },
            {
                "path": "M193.2,24.8c0,3.5,2.8,6.2,6.2,6.2s6.2-2.8,6.2-6.2H193.2z",
                "duration": 600
            },
            {
                "path": "M219.6,18.2c-1.1,0-2-0.9-2-2c0-3.4-2.8-6.2-6.2-6.2c-1.1,0-2-0.9-2-2s0.9-2,2-2c5.7,0,10.2,4.6,10.2,10.2    C221.6,17.4,220.7,18.2,219.6,18.2z",
                "duration": 600
            },
            {
                "path": "M225.6,18.2c-1.1,0-2-0.9-2-2c0-6.8-5.5-12.2-12.2-12.2c-1.1,0-2-0.9-2-2s0.9-2,2-2c9,0,16.2,7.3,16.2,16.2    C227.6,17.4,226.7,18.2,225.6,18.2z",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 228,
            "height": 40
        }
    }
}; 
 
 
/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

まず、HTMLをいじります。

id名付きの空divを設定します。
（僕の場合は、ロゴをh1にしたかったので、h1タグを使ってます）

<h1 id="svg-special"></h1>

id名は、LAZY LINE PAINTERで生成したソースの下記の部分と合わせます。（2箇所）

var pathObj = {
    "svg-special": {
        "strokepath": [
            {
                "path":
"M114.1,57v9.4c1.2-0.4,
//.................省略...................

/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#svg-special').lazylinepainter( 
 {
//.................省略...................

4.応用①

応用で、下記のように設定を追加することで、
線の色、太さ、表示順、動き等いろいろと変更できます。
生成したソースの一番下にあるところです！

 /* 
 Setup and Paint your lazyline! 
 */ 
 
  $(document).ready(function(){
 $('#svg-special').lazylinepainter(
 {
    "svgData": pathObj,
    "strokeWidth": 2,//線の太さ
    "strokeColor": "#e09b99",//線の色
    "ease": "easeInOutQuad"//描画を滑らかに
    //"drawSequential": false, 同時に描画を開始
}).lazylinepainter('paint');
 });

さらに、jQueryを付け足して、フェードイン・フェードアウトのエフェクトもつけられたりしますが、それはまた次回説明したいと思います！

今回もデモをつくったので、こちらからソース等確認してもらえたらと思います。

デモ

ほな！アディオス♪

打開してこ ～正式にスマphotoにジョインしました～

どうも、トランクです。こんにちは。

今日はデザインもwebも関係ないことを話します。

実は、ここ最近（2週間前程から）少し病んでいました。

親友と喧嘩したり、仕事においても目標がなくなったりと、毎日毎日があまり楽しくなかったですね。。

でも、今は”打開してこー！”というスタンスで気持ちを入れ替えています( ^ω^ )

その理由は・・・、

同居人がやっているサービス”スマphoto”に正式にジョインしました。

どんなサービスかというと、

結婚式、同窓会、飲み会、デート、誕生日、記念日、卒業式などなどのイベント行事に、プロのカメラマンが同行し、笑顔＝幸福の瞬間を写真として切り取り、それをオリジナルのアルバムにして提供するというサービスです( ^ω^ )

”大切な人達の笑顔を形に。「More Smile, More HAPPY」”という素敵なコンセプトもとに、展開しています。

そのwebとデザインの担当として、今回ジョインさせてもらいました☆

自分自身すごくいいサービスだと思っていて、本当にこのサービスに携わることができて嬉しく思っています。

smaphoto-smile.jp

Twitterもやってます！よかったら、フォローお願いします！

twitter.com

今日は初めての打ち合わせがあり、今後の展開やスケジューリング等を明確していき、充実した時間になったと思います。

これからはだんだんと忙しくなると思いますが、スマPhotoのコンセプトのもとユーザーが幸せだと感じてくれるサービスに育てるとともに、新しい視点も取り入れ、イノベーションとなるような新しい取り組みができたら最高だと思います。

てな感じて、ウェイウェイやっていきます！！

アディオス!!

Bootstrap3 Collapseの使い方

Bootstrap3のCollapseの使い方について書きます。

まず、Collapseの読み方は「コラップス」です。コラプスでもコラプセでもコラッタでもありません。

Collapseとは、いわゆる、アコーディオンパネルのことです。

さて、早速実装していきます。めちゃ簡単です。

まずは、クリックすることになるタイトル部分

<a data-toggle="collapse" data-parent="#accordion" href="#sample">
 タイトル
 </a>

〜説明〜
data-toggle : Collapseを起動させる
data-parent : アコーディオン風に閉じたり開いたりするためのもの
href : 指定した場所のパネルを開く→表示するboxのid名を挿れる

表示するbox（パネル）部分

<div class="collapsing collapse" id="sample">
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

classに下記のものを必要に応じて指定する
.collapse hides content
→表示するboxがデフォルで隠れている
.collapsing is applied during transitions
→トランシジョンを設定する
.collapse.in shows content
→表示するboxデフォルトで表示されている

まとめ

<div class="col-md-12" id="accordion">
<a data-toggle="collapse" data-parent="#accordion" href="#sample">
 タイトル
 </a>
<div class="collapsing collapse" id="sample">
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

以上!!!

サンプル作ったので、あとは、そっちを見てちょ☆( ^ω^ )☆

サンプル

コーポレートサイトのFAQとかによく使われるので、必要な際は是非!!

それでは、アディオス♪

Slidebars.js仕様変更後の実装方法

トランクです。はじめまして、こんにちは。
はてなブログを始めました。

開設したのは結構前でしたが、書くことがなかったので放置してましたが、表題の件で、

「参考記事が皆無やけん、これは書かないけん、どげんかせんといかん！」

てことで初投稿です。

さて、早速本題。
実装方法に入ります。

Slidebars.js公式サイト

↑ファイル一式はこちらからDL

◇まずはmeta viewport tagの設定（ここは仕様変更前と同じ！）

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

◇jQueryの読み込み！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

◇slidebars.cssとslidebars.jsの読み込み

<link rel="stylesheet" href="path/to/slidebars.css">

<script src="path/to/slidebars.js"></script>

※もちろんパスはそれぞれの階層に合わせて変えてね♪

～ここからが仕様変更となった部分～

◇下記のdivタグでコンテンツ全体を囲む。（body直下に設置）

<div canvas="container">
</div>

・canvasエリアがいわゆるブラウザ画面内（常に表示されいるコンテンツ部分。）
・後述するoff-canvasは逆にブラウザ画面外＝ドロワーメニューということになります。

※固定されたナビゲーションやフッターを作りたいときは、body直下にさらにcanvasエリアを加える。

<div id="fixed-navigation" canvas="">
</div>

<div canvas="container">
</div>

◇Basic Document（ここまでをまとめると）

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="path/to/slidebars.css">
</head>

<body>
<div canvas="container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/slidebars.js"></script>
</body>

</html>

さて、次に行くぜ！！

◇Off-Canvas（＝ブラウザ画面外＝ドロワーメニュー本体）の設定

下記、指定方法。このdivボックス間にメニューを書く。

<div off-canvas="id side style">
</div>

※off-canvas名に必ず含めないといけないもの（3点）

・【id】
→固有のID名。英数字から始まるものでハイフン、数字も含めてもOK

・【side】
→メニューをどの位置から出すか。（left, right, top, bottom）から選択

・【style】
→メニューのアニメーションスタイルの設定。（reveal, push, overlay, shift.）から選択

◇jQueryの設定

<script>
( function ( $ ) {
  // Initialize Slidebars
  var controller = new slidebars();
  controller.init();
} ) ( jQuery );
</script>

◇Basic Document（ここまでをまとめると）

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="path/to/slidebars.css">
  </head>

  <body>
    <div canvas="container">
    </div>

    <div off-canvas="id-1 left reveal">
    </div>

    <div off-canvas="id-2 right push">
    </div>

    <div off-canvas="id-3 top overlay">
    </div>

    <div off-canvas="id-4 bottom shift">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="path/to/slidebars.js"></script>

    <script>
      ( function ( $ ) {
        // Initialize Slidebars
        var controller = new slidebars();
        controller.init();
      } ) ( jQuery );
    </script>
  </body>
</html>

※↑上下左右からそれぞれ異なる4つスタイルでドロワーメニューが出てくる様、設定しています。

あともうちょい！
次に行くぜ！！！

◇開閉ボタンの指定

buttonタグに（open,close,toggleのいずれか+id名）のclass名をつける。
ここでははtoggleを使用。

open→開くボタン
close→閉じるボタン
toggle→開閉ボタン

<button class="toggle-id-1">
MENU
</button>

◇jQueryを追記

<script>
// Toggle Slidebars
$( '.toggle-id-1' ).on( 'click', function ( event ) {
  // Stop default action and bubbling
  event.stopPropagation();
  event.preventDefault();

  // Toggle the Slidebar with id 'id-1'
  controller.toggle( 'id-1' );
} );
</script>

※.on( 'click'の手前にはbuttonタグ（開閉ボタンの）のclass名を
※controller.toggle後にはドロワーメニューを囲うoff-canvas名のidの部分を

※開閉ボタン毎、ドロワーメニュー毎に、このスクリプトは個別に作成する（最後のまとめ部分参照）

◇Basic Document（最後のまとめ）

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="path/to/slidebars.css">
</head>

<body>
<div canvas="container">
</div>

<div off-canvas="id-1 left reveal">
</div>

<div off-canvas="id-2 right push">
</div>

<div off-canvas="id-3 top overlay">
</div>

<div off-canvas="id-4 bottom shift">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/slidebars.js"></script>

<script>
      ( function ( $ ) {
        // Initialize Slidebars
        var controller = new slidebars();
        controller.init();

        // Toggle Slidebars
        $( '.toggle-id-1' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-1'
          controller.toggle( 'id-1' );
        } );

        $( '.toggle-id-2' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-2'
          controller.toggle( 'id-2' );
        } );

        $( '.toggle-id-3' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-3'
          controller.toggle( 'id-3' );
        } );

        $( '.toggle-id-4' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-4'
          controller.toggle( 'id-4' );
        } );
      } ) ( jQuery );
</script>
</body>
</html>

こんな感じです♪
あとは、ドロワーメニューに個別にclass名をつけてカスタマイズしていく！

適当にデザモサイトも作ったので、こちらで実際のソースコード見てもらった方がわかりやすいかもです( ^ω^ )

デモサイト

以上!!