マウスの位置により目をくるくる回すプラグイン作った

最近作ったsvgのピカチュウを動かしたいなーってことでスクリプト書いてみました。
久しぶりに三角関数に触れたのでほとんど忘れてましたが、なんとか形になりました。

説明

現在のマウス座標より目の位置を移動させます。

改善点

  • mousemoveごとにイベントが発生しており、動作が重いのでsetTimeoutとcssのtranslatedを使う。
  • 目の内部にマウスをもっていったときの動きを正常にする。
  • svgと非svg要素でも動くように。(cx,cyで位置をセットしているのでsvg要素しか動かない。)
  • スマートフォン対応
  • 回転数によるコールバック関数実装

使い方

$(function(){  
    $('#left-eye #Oval-2').kurukuru({
        external:20,
        internal:8.5,
        group: {x:22.5,y:22.5}
    });
    $('#right-eye #Oval-2').kurukuru({
        external:20,
        internal:8.5,
        group: {x:22.5,y:22.5}
    });
});

ソースコード

/* ===========================================================
 * jquery.kurukuru.js 
 * 目をくるくる回すjqueryのプラグイン
 * made in matometaru
 * ========================================================== */
 
;(function ($) {
     $.fn.kurukuru = function (custom) {
      
        //起動時のウィンドウサイズを取得
        var width = window.innerWidth;
         
        options = $.extend(true, {
            external: 20,//外円の半径
            internal: 10,//内円の半径
            group: {x:20,y:20},//親の中点
        }, custom);

        //回転する半径を取得
        var r = (options.external - options.internal*2) + options.internal;
        var $target = $(this);
         
        function calc_angle(target,x,y) {
            // targetの位置取得
            target = target.position();
            xl = x - target.left;
            yl = target.top - y;
            if( xl < 0 ) {
                return 180 + Math.atan(yl/xl)/(Math.PI / 180);
            }else {
                return Math.atan(yl/xl)/(Math.PI / 180);
            }
        }
        //半径rと角度angleより、円上のx,y座標を取得
        function calc_position(r,angle){
            var p = {x:0,y:0}
            p.x = r * Math.cos(angle * (Math.PI / 180));
            p.y = r * Math.sin(angle * (Math.PI / 180));
            return p;
        }
        //座標の値に要素をセット
        function set_position(point) {
            $target.css({cx:(point.x+options.group.x),cy:-(point.y-options.group.y)})
        }
        $(document).on( "mousemove", function( event ) {
            angle = calc_angle( $target, event.pageX, event.pageY );
            position = calc_position(r,angle);
            set_position(position);
        });

    };
}($));

デモ

pikachu

参考サイト

atan2関数 - Mathクラス - JavaScript入門
Mathクラスで定義されているatan2関数について確認します
Math.atan2() - X軸から対象点までの角度 | JavaScriptリファレンス
Math.atan2()は、逆正接(アークタンジェント)を求めるメソッドです。引数の指定方法が違うだけで、atan()と同じです。直角三角形の隣辺BをX座標、対辺CをY座標と見立てた座標空間上で、第1引数にY座標、第2引数にX座標を指定します。2つの引数をY÷Xという計算で比率に変換し、この比率でアークタンジェントの計...
【jQuery】プラグインの様々な作り方(定義パターン)
「プラグインの作り方」と調べて出てくるのが大抵 $.fn.プラグイン名 = function(){全ての処理} この形でした。 ですが、配布されているプラグインのソースコードを確認すると上の形と違うことが多いです。 なので今回...

コメント