Ротациядан кейін салыстырмалы x және y div алынады

Міне, мен қалаған нәрсе үшін математика сабағында көп көңіл бөлдім:

http://i.imgur.com/noKxg.jpg

Менің үлкен контейнерлік бөлімім бар және оның ішіндегі айналдырылған бірнеше мазмұным бар.

Мен не істеуге тырысып жатсам, басты дивиденті көрерменге қарай жылжыту арқылы бала divs арасында тірі болады. Қарапайым х/у (жоғары/сол) есептеулерге негізделгендіктен, бұл өте оңай еді, алайда айналымның орын алған кезде менің математикам жай ғана бұзылады.

Мен бірнеше нәрсені сынап көрдім және оны шынымен де жарамадым.

Міне, нәтижелерімнің оңайлатылған нұсқасы сұрыптауға болады, скрипка еркін сезінесіз:

http://jsfiddle.net/dXKJH/3/

Мен бұны түсінбеймін!

[EDIT]

Мен осы шешіммен қарапайым, өйткені мен айналдыру плагинін MSIE6 + -пен жұмыс жасау әдісін қолданып көргенді жөн көремін.

Howver мен барлық математикалық функцияларды ұстануға тырысса да, олар таза болып көрінсе де, нәтиже пиксельді емес, бұл PI есептеуімен айналысатын нәрсе? Менің ойымша, үлкенірек және аралықта, қорапшаларды жоғарғы сол жаққа дейін сәйкестендіреді деп ойлаймын. Бақытсыздық.

Сондай-ақ, кез-келген адам маған 45 градус бұрыш болса, не істеу керектігін еске түсіре алады, мен 4-квадранттар немесе бірдеңе болған кезде математикадан сыныптардан есіме түсіре алмаймын. тілегіме көп көңіл бөлдім :-)

Бүгінгі күнге дейін барлық көмектеріңіз үшін өте рахмет!

7
Math.sin / cos талап радионы емес, градус.
қосылды автор pimvdb, көзі

3 жауаптар

Ал, мен соншалықты алыс емес ... Мен div аяқталатын жерді жақсы көру үшін барлық нәрсені жасағанмын және осы себеппен айналдыру жолақтарын қостым.

Маңызды ұпайлар:

  • Math.sin/Math.cos require radians, not degrees
  • CSS rotates around the midpoint of the element, not (0, 0) (this applies to both the main div and the box divs; first translate -width/2, -height/2, rotate, and then translate back)
  • Use parseInt(x, 10) to make sure you're using base 10

Қорытынды код: http://jsfiddle.net/pimvdb/dXKJH/10/ . .css элементінде айналдырылған элементтері бар кейбір қиындықтар болғандықтан, бұл шешімді HTML-де қатты кодталған позициялар мен ротациялар қажет.

$("#div-1").rotate("-10deg");
$("#div-2").rotate("10deg");
$("#div-3").rotate("15deg");
$("#div-4").rotate("75deg");

$("#main").click(function() {
    console.log($('body').scrollLeft(), $('body').scrollTop());
});

$("a").click(function(e){
    goTo($(this).attr("id").substring(4,5));
    return false;
});


function n(x) {
    return parseInt(x, 10);
}

function sin(x) {
    return Math.sin(x/180 * Math.PI);
}

function cos(x) {
    return Math.cos(x/180 * Math.PI);
}

function rotate(x, y, a) {
    var x2 = cos(a) * x - sin(a) * y;
    var y2 = sin(a) * x + cos(a) * y;
    return [x2, y2];
}


var offsets = [null,
              [0,100,-10],
              [100,200, 10],
              [300,100, 15],
              [400,100, 75]].map(function(v) {
                  if(!v) return v;
                  var rotated = rotate(-50, -50, v[2]);
                  rotated[0] += v[0] + 50;
                  rotated[1] += v[1] + 50;
                  return rotated.concat(v[2]);
               });


function goTo(num){
    var obj = $("#div-" + num);
    var angle = -n(obj.rotate());
    var pointX = offsets[num][0] - 500;
    var pointY = offsets[num][1] - 500;
    var rotated = rotate(pointX, pointY, angle);
    var newX = rotated[0] + 500;
    var newY = rotated[1] + 500;

    $("#main").animate({rotate: angle + "deg"}, 1000);  
    $("body").animate({scrollLeft: newX,
                       scrollTop:  newY}, 1000)
}
2
қосылды
Жақсы, маған бұл тәсіл ұнайды. Сіздің көмегіңіз үшін үлкен рахмет!
қосылды автор Alex, көзі

Apple компаниясының iPhone веб-торабын ұқсас етіп көруіңізге ұқсайды: http://www.apple.com/iphone/. Мен осы техниканы осында ойластырдым:

http://jsfiddle.net/Yw9SK/2/ (uses Webkit transitions)

This really doesn't require much math, don't over-engineer it. You just need to cancel the rotation of the child <div>s and adjust for their width/height and offset from the container <div>.

Here's how to do it:

container width: 500  height: 500  rotation: 0       top: 0    left: 0
child     width: 90   height: 90   rotation: 120deg  top: 330  left: 0


  1. To ensure the rotation is correct, the container must get the negative rotation of the child:

    child rotation: 120deg  --> container rotation: -120deg
    
  2. To have the child centered in the view, we need to subtract its width from the container width, divide by 2 (to keep it centered), and then subtract any offsets. The same thing happens for height:

    Width                                   Height
     500    (container width)                 500    (container height)
    - 60    (child width)                    - 40    (child height)
    ----                                     ----
     440                                      460
      /   (divide by 2                       /   (divide by 2
       2     to keep it centered)               2     to keep it centered)
    ----                                     ----
     220                                      230
    -  0    (subtract the left: offset)      -330    (subtract the top: offset)
    ----                                     ----
     220    translateX                       -100    translateY
    


Because the "stage" is centered on top of the container, the new transform will also be centered within the stage. (It's not much harder to make this happen for a rectangle compared to a square.) Thus our transform to be applied to the container <div> is:

transform: rotate(-120eg) translateX(220px) translateY(-100px)

Rinse and repeat for the other child elements and transition through them accordingly.


This JSFiddle is just an example of how to accomplish this. It is not a very well-designed implantation. A more optimal solution would have a transition-delay or animation-delay (instead of setInterval) and then listen for the 'transitionEnd' or 'animationEnd' events.

I would definitely recommend NOT trying to calculate the new positions and rotations programmatically on the fly (although you can, and then you just have to get those values from the .style property in JS). I would recommend having the translations/rotations you need pre-defined upfront (as seen in my example, though they should be in CSS) and simply apply them in correct order to the container. This will ensure the transitions are fast and smooth.

1
қосылды
бұл үшін рахмет, иә бір нәрсе ұқсас, бірақ бұл iphone пәні емес, осындай түрге ұқсас емес: zeitgeistbot.com
қосылды автор Alex, көзі
webkit өтуін жақсы көріп, болашақ нәрсе болуы мүмкін, бірақ мен оны мүмкіндіктегідей үйлесімді болуы керек.
қосылды автор Alex, көзі
Беттің кодын тексеріңіз, олар шын мәнінде jQuery арқылы браузерге тән өзгертулерді пайдаланып жатыр :) Олар сондай-ақ тиісті X/Y позицияларын массивте сақтап, көрсетілген сілтемесін басқаннан кейін қолдануда ... дәл менің мысалда көрсетілгендей .
қосылды автор skyline3000, көзі

Мен әртүрлі тәсілді ұсынғым келеді:

  1. Бастаудан бастап div-2-ге жылжыңыз (Негізгі/Div> Негізгі/Div> стильдерді қолданыңыз)
  2. Main Div-дың орталықтан түрлендіруін (div-2 орталығын) орнату.
  3. Div-2-ді (div-2 дұрыс ортаға дәл келтіру керек) Негізгі Div-ды бұру
  4. Негізгі бөлімді 0 градусқа бұрыңыз.
  5. div-3-ге жылжытыңыз
  6. Main Div-дың орталықтан түрлендіру-шығу нүктесін орнату (div-3 орталығын)
  7. Басты div-ды div-3-дің қарама-қарсы саны бойынша бұру (div-3 дұрыс шоғырлануы тиіс)
  8. Шаю және қайталаңыз

Бұл оңай болуы мүмкін және кем күрделі (неғұрлым оңтайландырылған) кодты береді. Қозғалыстар мен айналымдар анимацияланған болуы мүмкін екенін ескеріңіз. Сондай-ақ, сол/жоғарғы стилдердің орнына аудармаларды пайдалансаңыз, бұл шешім трансформациядан шыққан өзгерістерге байланысты әлдеқайда күрделі болады.

1
қосылды