Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
Figma Motion क्लस्टर9 मिनट पढ़ें·ExodeUI टीम द्वारा

Figma प्रोटोटाइप एनिमेशन को Flutter भौतिकी विजेट में परिवर्तित करना

जानें कि Figma प्रोटोटाइप एनिमेशन को शून्य हैंडऑफ़ ऋण के साथ मूल Flutter स्प्रिंगसिमुलेशन और एनिमेशनकंट्रोलर कोड में कैसे निर्यात करें।

प्रत्यक्ष सारांश एवं परिभाषा

कोर टेकअवे

Figma एनिमेशन को Flutter में अनुवाद करने के लिए, डेवलपर्स आमतौर पर कर्व्डएनिमेशन के साथ एनिमेशनकंट्रोलर का निर्माण करते हैं। हालाँकि, Flutter में प्रामाणिक मोबाइल अनुभव के लिए स्प्रिंगसिमुलेशन और भौतिकी-आधारित इशारों की आवश्यकता होती है। ExodeUI विज़ुअल वेक्टर परतों और स्प्रिंग तनावों को सीधे Flutter विजेट ट्री में अनुवादित करता है।

Flutter में कर्व्डएनीमेशन निराश क्यों करता है?

Flutter मानक कर्व्स (Curves.easeInOut, कर्व्स.fastOutSlowIn) प्रदान करता है, लेकिन ये अवधि-बद्ध हैं। यदि कोई उपयोगकर्ता स्वाइप जेस्चर को बाधित करता है, तो अवधि घट जाती है। स्प्रिंगडिस्क्रिप्शन (द्रव्यमान, कठोरता, भिगोना) के साथ स्प्रिंगसिमुलेशन का लाभ उठाकर, Flutter एनिमेशन पूरी तरह से प्राकृतिक बन जाते हैं।

उत्पादन कार्यान्वयन स्निपेट

इंटरएक्टिव घटक कार्यान्वयन
// Flutter Spring Simulation Widget
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

class SpringCard extends StatefulWidget {
  @override
  _SpringCardState createState() => _SpringCardState();
}

class _SpringCardState extends State<SpringCard> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  void _runSpring(double target) {
    final spring = SpringDescription(mass: 1.0, stiffness: 420.0, damping: 24.0);
    final simulation = SpringSimulation(spring, _controller.value, target, 0);
    _controller.animateWith(simulation);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _runSpring(0.92),
      onTapUp: (_) => _runSpring(1.0),
      child: ScaleTransition(scale: _controller, child: Card(child: Text("Exode Flutter"))),
    );
  }
}

संबंधित मार्गदर्शिकाएँ एवं उदाहरण

इंटरैक्टिव UI एक बार डिज़ाइन करें। वही फ़ाइल शिप करें।

ExodeUI में स्टेट, स्प्रिंग फ़िज़िक्स और लॉजिक विज़ुअली बनाएं, और वही फ़ाइल React, SwiftUI, Flutter आदि में चलाएं। मुफ़्त में शुरू करें।

मुफ्त में प्रयास करें