ऐनिमेशन वाले व्यू को एक जगह से दूसरी जगह ले जाना

उपयोगकर्ता इंटरैक्शन की वजह से स्क्रीन पर मौजूद ऑब्जेक्ट को अक्सर बदलने की ज़रूरत होती है या को प्रोसेस करता है. ऑब्जेक्ट के जिससे यह एक क्षेत्र से दूसरे क्षेत्र में ब्लिंक होती है, इस स्थिति में ऐनिमेशन का उपयोग करके इसे शुरुआती स्थिति से आखिरी जगह पर ले जाएं.

Android की मदद से, स्क्रीन पर व्यू ऑब्जेक्ट की जगह बदली जा सकती है. इसके लिए, यह तरीका अपनाएं: ObjectAnimator का इस्तेमाल करके. आप अंतिम स्थिति प्रदान करते हैं, और ऐनिमेशन की अवधि के साथ-साथ ऑब्जेक्ट को सेट करना चाहते हैं. आप साथ ही, टाइम इंटरपोलेटर का इस्तेमाल करके, ऐनिमेशन.

ObjectAnimator की मदद से व्यू की जगह बदलना

ObjectAnimator एपीआई, किसी व्यू की प्रॉपर्टी को तय समय में बदलने का तरीका उपलब्ध कराता है. इसमें, ObjectAnimator के इंस्टेंस बनाने के स्टैटिक तरीके शामिल हैं. ये तरीके, आप किस तरह की विशेषता को ऐनिमेट कर रहे हैं. इस पर अपने दृश्यों का स्थान बदलते समय स्क्रीन, translationX और translationY एट्रिब्यूट का इस्तेमाल करें.

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

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

इस उदाहरण में, ObjectAnimator.ofFloat() तरीका है, क्योंकि अनुवाद वैल्यू फ़्लोट होनी चाहिए. पहला पैरामीटर है जिसे आप ऐनिमेट करना चाहते हैं. दूसरा पैरामीटर वह प्रॉपर्टी है जो ऐनिमेट किया जा रहा है. व्यू को हॉरिज़ॉन्टल तौर पर अडजस्ट करना ज़रूरी है, इसलिए translationX प्रॉपर्टी का इस्तेमाल किया जाता है. ऐनिमेशन की आखिरी वैल्यू ही आखिरी पैरामीटर होती है. इसमें उदाहरण के लिए, 100 का मान ऐसी पोज़िशन को दिखाता है जिसमें बाईं ओर से कई पिक्सल स्क्रीन.

अगला तरीका बताता है कि ऐनिमेशन में कितना समय लगता है, मिलीसेकंड में. इसमें उदाहरण के लिए, ऐनिमेशन 2 सेकंड (2000 मिलीसेकंड) तक चलता है.

आखिरी तरीके से ऐनिमेशन चलता है, जिससे व्यू की स्थिति अपडेट हो जाती है आता है.

ObjectAnimator का उपयोग करने के बारे में अधिक जानकारी के लिए, इसका उपयोग करके ऐनिमेट करें देखें ObjectAnimator.

घुमावदार मोशन जोड़ें

हालांकि, ObjectAnimator का इस्तेमाल करना आसान है, लेकिन डिफ़ॉल्ट रूप से यह इसे शुरुआती और आखिरी पॉइंट के बीच सीधी लाइन से देखें. मेटिरियल डिज़ाइन के लिए, स्क्रीन पर ऑब्जेक्ट के स्पेशल मूवमेंट के लिए कर्व का इस्तेमाल किया जाता है और ऐनिमेशन का समय. घुमावदार मोशन का इस्तेमाल करने से, आपके ऐप्लिकेशन को बेहतर विज़न मिलता है साथ ही, यह आपके ऐनिमेशन को और दिलचस्प भी बनाएगा.

अपना पाथ तय करें

ObjectAnimator क्लास में कंस्ट्रक्टर हैं, जिनकी मदद से निर्देशांकों को ऐनिमेट किया जा सकता है पाथ के साथ एक साथ दो या उससे ज़्यादा प्रॉपर्टी का इस्तेमाल करके. इसके लिए उदाहरण के लिए, नीचे दिया गया ऐनिमेटर X और Y को ऐनिमेट करने के लिए Path ऑब्जेक्ट व्यू की प्रॉपर्टी:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

आर्क ऐनिमेशन ऐसा दिखता है:

पहला डायग्राम. घुमावदार पाथ का ऐनिमेशन.

Interpolator ईज़िंग कर्व को लागू करना है. ज़्यादा जानकारी के लिए, मटीरियल डिज़ाइन दस्तावेज़ ईज़िंग कर्व के सिद्धांत के बारे में ज़्यादा जानें. Interpolator तय करता है कि ऐनिमेशन में खास वैल्यू को कैलकुलेट करके, समय. यह सिस्टम, इसमें तीन बेसिक कर्व के लिए एक्सएमएल संसाधन उपलब्ध कराता है मटीरियल डिज़ाइन स्पेसिफ़िकेशन:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

पाथ इंटरपोलेटर का इस्तेमाल करें

कॉन्टेंट बनाने PathInterpolator क्लास एक इंटरपोलेटर है, जिसे Android 5.0 (एपीआई 21) में पेश किया गया है. यह इन पर आधारित है बेज़ियर कर्व या Path ऑब्जेक्ट. मटीरियल डिज़ाइन दस्तावेज़ में Android के उदाहरण ईज़िंग PathInterpolator का इस्तेमाल करें.

PathInterpolator में अलग-अलग तरह के बेज़ियर कर्व पर आधारित कंस्ट्रक्टर हैं. सभी बेज़ीयर कर्व के शुरू और आखिर के पॉइंट (0,0) और (1,1) पर तय हैं, क्रम से. अन्य कंस्ट्रक्टर के आर्ग्युमेंट, Bézier के टाइप पर निर्भर करते हैं कर्व बनाया जा रहा है.

उदाहरण के लिए, क्वाड्रेटिक बेज़ियर कर्व के लिए सिर्फ़ X और Y निर्देशांक में से एक कंट्रोल पॉइंट की ज़रूरत होती है:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

इससे ईज़िंग कर्व बनता है, जो तेज़ी से शुरू होता है और इसके बढ़ने के साथ घटता जाता है अंत तक पहुंचता है.

क्यूबिक बेज़ियर कंस्ट्रक्टर में भी इसी तरह से शुरुआत और आखिर के पॉइंट तय हैं. हालांकि, यह दो कंट्रोल पॉइंट की ज़रूरत होती है:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

यह उस मटीरियल डिज़ाइन का अनुपालन है, जिस पर जोर दिया गया है कम करें ईज़िंग कर्व.

ज़्यादा कंट्रोल के लिए, कर्व को तय करने के लिए आर्बिट्रेरी Path का इस्तेमाल किया जा सकता है:

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

इससे उसी ईज़िंग कर्व का पता चलता है जो क्यूबिक बेज़ियर वाले उदाहरण में है, लेकिन यह एक अगर आपके पास इन फ़ॉर्मैट की फ़ाइल नहीं है, तो Path बटन का इस्तेमाल करें.

एक्सएमएल रिसॉर्स के तौर पर, पाथ इंटरपोलेटर भी तय किया जा सकता है:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

PathInterpolator ऑब्जेक्ट बनाने के बाद, उसे Animator.setInterpolator() तरीका. Animator, समय या पाथ का पता लगाने के लिए इंटरपोलेटर का इस्तेमाल करता है कर्व की शुरुआत होती है.

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();