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

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

説明

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

改善点

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

使い方

$(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
Created with Sketch.



















参考サイト

Math.atan

Math.atan2() – X軸から対象点までの角度を計算する

【jQuery】プラグインの様々な作り方(定義パターン)

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD