Virajı önde gelen noktaya sürükleyin (sudaki bir tekne gibi)

Question

Suyun altında bir tekne gibi sürüklemek için bir div bulmaya çalışıyorum, ancak rotasyonun doğru olması konusunda bir sorun yaşıyorum. İşte

Bugüne kadar ne var:
jsFiddle

JS

var start, stop; 
$('#canoe').draggable({ 
    containment: '#board', 
    cursor: 'none', 
    cursorAt: { 
     top: 5 
    }, 
    drag: function (event, ui) { 
     start = ui.position.left; 
     setTimeout(function() { 
      stop = ui.position.left; 
     }, 150); 
     $('#canoe').css({ 
      'transform': 'rotate(' + (start - stop) + 'deg)' 
     }); 
    } 
}); 

CSS

#board { 
    height:100%; 
    width:100%; 
    background:blue; 
} 
#canoe { 
    background: #fff; 
    border-radius:100% 100% 100% 100%; 
    height:60px; 
    width:10px; 
    position:absolute; 
    left:50%; 
    bottom:0; 
    transform-origin:top center; 
    transition: transform .2s; 
} 

HTML

<div id="board"> 
    <div id="canoe">A</div> 
</div> 

Dönüşün ayarlanmasını daha iyi bir yolu var mı, böylece 360deg dönüşle bile teknenin önü her zaman önde gidiyor.

Ek Bağlam: Ben Basic Game

Bounty güncelleme üzerinde çalışıyorum: Ben "tekne" saygısız olmadan bir sürekli hareket halinde bir daire içinde sürüklenen gerekiyor/dönüş yönünü değiştirerek.

Answer 1

Biraz daha karışık ama burada ben yaparım nasıl:

var save = false, timer; 

$('#canoe').draggable({ 
    containment: '#board', 
    cursor: 'none', 
    cursorAt: { 
     top: 5 
    }, 
    drag: function (event, ui) { 
     if (!save) save = ui.offset; 
     var canoe = $('#canoe'), 
      center_x = save.left + 5, 
      center_y = save.top + 30, 
      radians = Math.atan2(event.pageX - center_x, event.pageY - center_y), 
      degree = (radians * (180/Math.PI) * -1) + 180, 
      time  = Math.abs(ui.offset.top-save.top) + Math.abs(ui.offset.left-save.left); 

     canoe.css({ 
      '-moz-transform' : 'rotate('+degree+'deg)', 
      '-webkit-transform' : 'rotate('+degree+'deg)', 
      '-o-transform'  : 'rotate('+degree+'deg)', 
      '-ms-transform'  : 'rotate('+degree+'deg)' 
     }); 

     timer = setTimeout(function() { 
      clearTimeout(timer); 
      save = ui.offset; 
     }, Math.abs(time-300) + 400); 
    } 
}); 

FIDDLE

O kano merkezi bazı belirli bir zaman önce nerede geçerli fare konumunu karşılaştırır.
zaman yavaş hareketler daha uzun gerekeceğinden, ne kadar hızlı fare hareketleri dayalı ayarlanır zaman aşımı vb

O ki değildi bile, ayrıca kurmak kalmamak zaman aşımları temizlemek için iyi bir fikirdir Bunu test ettiğimde gerçekten sorun çıkar ve Math.abs kullanımı her zaman pozitif bir tam sayı olmasını sağlar.

CSS'ye birkaç tane daha tarayıcı öneki ekledim.

Answer 2

Sen gerekir: Geçen pozisyonları

Kaydet söyledi arasındaki hattın açısını hesaplamak,

• Mağaza position o değişiminde
• değiştiren her zaman position

http://jsfiddle.net/AstDerek/799Tp/

Hareket yumuşak görünmüyor ama ben istediğin şeye daha yakın.

Suyu sürüklemeyi simüle etmek istiyorsanız, açı değişikliğini bazı faktörlere göre azaltmanız, ardından sürüklemeden sonra, geminin açısı açısına denk gelene kadar harekete devam etmek için bir süre veya benzeri bir süre kullanmanız gerekir. olmalı veya yeni bir sürükleme olayı başlamalıdır.