सीएसएस एनिमेशन में भौतिकी कैसे जोड़ें?

Question

मैं सिर्फ सीएसएस का उपयोग करके कुछ लोडिंग कर रहा हूं और मैं चाहता हूं कि वे असली व्यवहार करें, मैं animation-timing-function: cubic-bezier(1, 0, 1, 1) के साथ प्रयास कर रहा हूं, ठीक दिखता है लेकिन जैसा कि मैं चाहता हूं उतना वास्तविक नहीं, क्योंकि पहले मुझे नहीं पता कि cubic-bezier पैरामीटर वास्तव में काम करते हैं, मुझे this साइट मिली और जब तक मुझे कुछ अच्छा नहीं मिला तब तक उनके साथ खेला।

समेकित करने के लिए, मेरे एनीमेशन में असली भौतिक व्यवहार कैसे जोड़ें?

कृपया केवल सीएसएस, यदि संभव नहीं है, तो एक जेएस समाधान का स्वागत है।

यहां आपके पास FIDDLE उदाहरण है।

बस एक है कि आप कार्य करने के लिए जोड़ सकते हैं और शारीरिक व्यवहार भी पहले से ही mixins कि कुछ व्यवहार simulates हो सकता है sumule कर सकते हैं

कुछ एक कम या लगातार शारीरिक चर परिभाषित कर रहे हैं, या मूल्यों के साथ एससीएसएस की तरह मार्गदर्शन करने के सुझाव , मुझे कुछ सरल और केवल सीएसएस नहीं पता है।

अग्रिम में Thx

Answer 1

आप सीएसएस-केवल उपयोग कर सकते हैं, लेकिन आप मुख्य-फ़्रेम स्थिति, पैमाने और इतने पर, और उसके ऊपर बेज़ियर के लिए संख्या का पता लगाना, बहुत समय खर्च करेगा: एक आपके लेआउट में थोड़ा बदलाव, "गुरुत्वाकर्षण", आयाम, दूरी और आपको "सब खत्म" शुरू करना होगा (उपरोक्त भाग के लिए कम से कम)।

CSS एनिमेशन अच्छे हैं, लेकिन आप एक छोटे जावा स्क्रिप्ट कोड के साथ एक बेहतर परिणाम हासिल होगा का उल्लेख नहीं करने के लिए अगर आप कुछ बदलने की जरूरत है एक बहुत अधिक लचीलापन होता है -

• गेंद
के लिए एक वेक्टर को परिभाषित करें
• एक मनमाना गुरुत्वाकर्षण
• परिभाषित वेक्टर की गणना करें और डोम तत्व का उपयोग रूपांतरण (स्थिति की तुलना में चिकनी परिणाम देता है) के लिए
• बाइंड जिसके परिणामस्वरूप मूल्यों उछाल।
• requestAnimationFrame का उपयोग करके एनिमेट करें जो मॉनिटर करने के लिए समन्वयित करता है और सीएसएस एनिमेशन के रूप में चिकनी एनिमेशन देता है।

उदाहरण

यह उदाहरण बुनियादी पता चलता है, छाया में शामिल नहीं है, लेकिन यह पाठक के लिए एक व्यायाम के रूप में छोड़ दिया जाता है।

var div = document.querySelector("div"), 
 
    v = {x: 2.3, y: 1},  // some vector 
 
    pos = {x: 100, y: 20}, // some position 
 
    g = 0.5,     // some gravity 
 
    absorption = 0.7,   // friction/absorption 
 
    bottom = 150,    // floor collision 
 
    frames = 0;    // to reset animation (for demo) 
 

 
// main calculation of the animation using a particle and a vector 
 
function calc() { 
 
    pos.x += v.x;    // update position with vector 
 
    pos.y += v.y; 
 
    v.y += g;     // update vector with gravity 
 
    if (pos.y > bottom) {  // hit da floor, bounce 
 
    pos.y = bottom;   // force position = max bottom 
 
    v.y = -v.y * absorption; // reduce power with absorption 
 
    } 
 
    if (pos.x < 0 || pos.x > 620) v.x = -v.x; 
 
} 
 

 
// animate 
 
(function loop() { 
 
    calc(); 
 
    move(div, pos); 
 
    
 
    if (++frames > 220) {  // tweak, use other techniques - just to reset bounce 
 
    frames = 0; pos.y = 20; 
 
    } 
 
    requestAnimationFrame(loop) 
 
})(); 
 

 
function move(el, p) { 
 
    el.style.transform = el.style.webkitTransform = "translate("+p.x+"px,"+p.y+"px)"; 
 
}

div { 
 
    width:20px; 
 
    height:20px; 
 
    background:rgb(0, 135, 222); 
 
    border-radius:50%; 
 
    position:fixed; 
 
}

<div></div>

आप मंजिल की एक अधिक सटीक उछाल चाहते हैं, आपको लगता है कि प्रतिबिंबित करने के लिए और साथ ही वास्तविक स्थिति का diff का उपयोग कर सकते हैं:

if (pos.y > bottom) { 
    var diff = pos.y - bottom; 
    pos.y = bottom - diff; 
    ... 

और अगर आप इस की जरूरत है कई तत्वों के लिए, बस एक तत्काल-सक्षम ऑब्जेक्ट बनाएं जो तत्व को एनिमेट करने के लिए संदर्भ को संदर्भित करता है, गणना आदि

यदि आप अब दिशा बदलना चाहते हैं, बिंदु, गुरुत्वाकर्षण शुरू करें और इसी तरह, आप केवल संबंधित मानों को अपडेट करें और फिर से चलाए जाने पर सबकुछ सुचारू काम करता है।

उदाहरण मध्यवर्ती चरण सीएसएस कुंजी-फ्रेम

निर्माण करने के लिए आप एक सीएसएस-एनीमेशन के लिए संख्याओं का उपयोग करना उपरोक्त कोड संशोधित कर सकते हैं।

फ्रेम की संख्या का उपयोग करें और अनुक्रम सीमा को सामान्य करें, फ्रेमों की गणना करके गणना चलाएं। फिर प्रति मान निकालें, प्रत्येक 10 फ्रेम के साथ-साथ प्रत्येक बाउंस कहें, आखिरकार संख्याओं को कुंजी-फ्रेम के रूप में प्रारूपित करें।

आदर्श रूप से आप हमेशा शीर्ष और निचली स्थिति को शामिल करेंगे - आप वेक्टर के वाई-वैल्यू (साइन) की दिशा की निगरानी करके इसका पता लगा सकते हैं, यहां दिखाया नहीं गया है।

यह एक मध्यवर्ती कदम के रूप में काम करते हैं सीएसएस नियम जो हम बाद में उपयोग करेगा निर्माण करने के लिए होगा: हम उस से परिणाम हड़पने तो

var v = {x: 2.3, y: 1},  // some vector 
 
    pos = {x: 100, y: 20}, // some position 
 
    g = 0.5,     // some gravity 
 
    absorption = 0.7,   // friction/absorption 
 
    bottom = 150,    // floor collision 
 
    frames = 0,    // to reset animation (for demo) 
 
    maxFrames = 220,   // so we can normalize 
 
    step = 10,    // grab every nth + bounce 
 
    heights = [],    // collect in an array as step 1 
 
    css = "";     // build CSS animation 
 

 
// calc CSS-frames 
 
for(var i = 0; i <= maxFrames; i++) { 
 
    var t = i/maxFrames; 
 
    pos.x += v.x;    // update position with vector 
 
    pos.y += v.y; 
 
    v.y += g;     // update vector with gravity 
 

 
    if (pos.y > bottom) { 
 
    pos.y = bottom; 
 
    v.y = -v.y * absorption; 
 
    heights.push({pst: t * 100, y: pos.y}); 
 
    } 
 
    else if (!(i % step)) {heights.push({pst: t * 100, y: pos.y})} 
 
} 
 

 
// step 2: format height-array into CSS 
 
css += "@keyframes demo {\n"; 
 
for(i = 0; i < heights.length; i++) { 
 
    var e = heights[i]; 
 
    css += " " + e.pst.toFixed(3) + "% {transform: translateY(" + e.y.toFixed(3) + "px)}\n"; 
 
} 
 
css += "}"; 
 

 
document.write("<pre>" + css + "</pre>");

और के लिए सीएसएस के रूप में यह का उपयोग करता है हमारे अंतिम पृष्ठ, हमें यह परिणाम मिलता है (क्षमा करें, केवल इस डेमो में गैर-प्रीफ़िक्स्ड संस्करण):

(आपको निश्चित रूप से इसे ट्विक और ट्यून करना होगा, लेकिन आपको यह मिल जाएगा।)

div { 
 
    animation: demo 3s linear infinite; 
 
    width:20px; 
 
    height:20px; 
 
    border-radius:50%; 
 
    background:rgb(0, 148, 243); 
 
    position:fixed; 
 
    left:100px; 
 
} 
 

 
@keyframes demo { 
 
    0.000% {transform: translateY(21.000px)} 
 
    4.545% {transform: translateY(58.500px)} 
 
    9.091% {transform: translateY(146.000px)} 
 
    9.545% {transform: translateY(150.000px)} 
 
    13.636% {transform: translateY(92.400px)} 
 
    18.182% {transform: translateY(75.900px)} 
 
    22.727% {transform: translateY(109.400px)} 
 
    25.455% {transform: translateY(150.000px)} 
 
    27.273% {transform: translateY(127.520px)} 
 
    31.818% {transform: translateY(106.320px)} 
 
    36.364% {transform: translateY(135.120px)} 
 
    37.727% {transform: translateY(150.000px)} 
 
    40.909% {transform: translateY(125.563px)} 
 
    45.455% {transform: translateY(133.153px)} 
 
    47.273% {transform: translateY(150.000px)} 
 
    50.000% {transform: translateY(134.362px)} 
 
    54.545% {transform: translateY(148.299px)} 
 
    55.000% {transform: translateY(150.000px)} 
 
    59.091% {transform: translateY(138.745px)} 
 
    61.818% {transform: translateY(150.000px)} 
 
    63.636% {transform: translateY(141.102px)} 
 
    67.727% {transform: translateY(150.000px)} 
 
    68.182% {transform: translateY(147.532px)} 
 
    72.727% {transform: translateY(150.000px)} 
 
    77.273% {transform: translateY(150.000px)} 
 
    81.818% {transform: translateY(150.000px)} 
 
    86.364% {transform: translateY(150.000px)} 
 
    90.909% {transform: translateY(150.000px)} 
 
    95.455% {transform: translateY(150.000px)} 
 
    100.000% {transform: translateY(150.000px)} 
 
}

<div></div>

व्यक्तिगत तौर पर मैं जावास्क्रिप्ट समर्थन हालांकि के रूप में यह एनिमेशन के इन प्रकार के लिए अधिक सटीक है की सिफारिश करेंगे, और के रूप में उल्लेख किया है, यह आसानी से नई आवश्यकताओं को गोद ले सकते हैं।